前言

欢迎大佬指正思路。

由于最近面试时，被问到了这种问题，但是我回答的含糊不清。
虽然以前做过这些功能，但是一直都没有去总结和记录，所以我决定回顾一下并记录下来。

此支付为 v2 。

只记录思路

正文

uniapp

首先，默认已经准备好小程序 appid 等相关内容。

<template><view><view @click="pay">支付<view></view>
</template>
<script>
export default {methods: {pay() {uni.request({url: '192.168.1.99:1234/api/pay',method: 'POST',data: { total_fee: 100 }, // 传入支付金额header: { Authorization: uni.getStorageSync('token') },  // 这里假设已经获取到用户凭证的 openid，并存入数据库，token中记录对应表idsuccess: (res) => {uni.requestPayment({"timeStamp": res.data.result.timeStamp,"nonceStr": res.data.result.nonceStr,"package": res.data.result.package,"signType": "MD5","paySign": res.data.result.paySign,success: (res) => {}, // 支付成功fail: (err) => {},   // 支付失败})},fail: (err) => {}})}}
}
</script>

后端

后端使用 nodejs(koa) 框架

const koaRequest = require('request');    // 这里使用 request 发送请求
const stringRandom = require('string-random');   // 使用 string-random 生成随机数
const crypto = require('crypto');    // 使用 crypto 进行 md5 加密
const xml2js = require('xml2js');    // 使用 xml2js 解析 xmlasync pay(ctx, next) {const { total_fee } = ctx.request.body    // 结构出 金额const { id } = ctx.token.datas    // 从 token 中解析出 idtry {const { openid } = await inquire(id) // ... 这里通过 id 查出用户 openidconst random = (stringRandom(32, { letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' }))  // 生成随机数const transactions = "wx_" + (new Date().getFullYear()) + (new Date().getMonth() + 1) + (new Date().getDate()) + (new Date().getHours()) + (new Date().getMinutes()) + (new Date().getSeconds()) + (new Date().getMilliseconds())    // 生成订单号let payParams = {appid: 'wx1234564789465465',    // 申请的微信小程序appidsecret: 'q1w2e3r4t5y6u7i8o9p',    // 申请的微信小程序keynonce_str: random,    // 随机数body: '测试', // 商品描述out_trade_no: transactions,  // 订单号total_fee,    // 金额spbill_create_ip: '101.101.101.101', // 终端ipnotify_url: 'https://xxx.xxx.xxx:1234/api/callback',   // 支付成功后的回调地址trade_type: "JSAPI", // 支付模式sub_openid: openid   // 用户的 openid}let str = MSign(payParams)   // 排序并将数据加密 MD5let postData = ''let keys = Object.keys(payParams).sort()    // 对数据排序// 转为 XML数据keys.map((p) => {postData += `<${p}><![CDATA[${payParams[p]}]]></${p}>`})postData += `<sign>${str}</sign>`postData = `<xml>${postData}</xml>`const resXml = await wechatpay(postData)let { prepay_id } = resXml// 签名let timestamp = parseInt(new Date().getTime()) + '';let finalsign =  {appId: "wx1234564789465465", // 对应 appidtimeStamp: timestamp,nonceStr: random,package: 'prepay_id=' + prepay_id,signType: "MD5"}let pxstr = MSign(finalsign)  // 加密// 客户端最后使用数据let clientParam = {timeStamp: timestamp,nonceStr: random,package: 'prepay_id=' + prepay_id,signType: "MD5",paySign: pxstr}ctx.body = { // 返回需要的支付数据code: "0",message: "支付",result: clientParam}} catch (err) {}
}// 支付成功后的回调，必须以固定格式返回给微信，不然微信会一直发请求
async callback(ctx, next) {let res = ctx.request.bodytry {const success = "<xml><return_code>" + res.xml.return_code + "</return_code></xml>"ctx.body = success// ... 其他业务逻辑} catch (err) {}
}// MD5加密
function MSign(req) {// 排序let keys = Object.keys(req).sort();// 拼接字符串let str = "";keys.map((p) => {str += `${p}=${req[p]}&`;})str += "key=xxxxxxxxxxxxxxxxxxxxxx";    // 申请支付的 keyreturn str = crypto.createHash('md5').update(str).digest('hex').toUpperCase()
}// 支付签名
const wechatpay = (xml) => {return new Promise((resolve,reject)=>{// 这里用了reques库koaRequest({url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',   // 微信支付前面的 apimethod:'POST',body: xml}, (err, res, body) => {if (err) reject(err)resolve(parseXml(body).xml)})});
}// 解析xml
const parseXml = (xml) =>{let { parseString } = xml2js;let res;parseString(xml,  {trim: true,explicitArray: false}, function (err, result) {res = result;});return res;
}

uniapp 微信支付功能相关推荐

uniapp小程序微信支付功能
目录字段说明前置工作获取openid 微信支付报错问题 uniapp 开发小程序需要实现微信支付功能,下面对相关业务进行说明. 字段说明 AppID:小程序的身份证,微信客户端用来确认你的小程 ...
uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程
前言关于 uni-app 项目中接入微信支付的文章鱼龙混杂,各种 JSAPI / JS-SDK 乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现 ...
微信小程序-JAVA实现微信支付功能(微信支付2.0)
微信小程序-JAVA实现微信支付功能(微信支付2.0) 一.前言本博客主要介绍JAVA后台与微信小程序(UNI-APP或者原生微信小程序)的微信支付的实现,如果是APP或者H5的开发暂时不支持,具体 ...
uniapp实现支付功能
uniapp实现支付功能详细参考: https://gitee.com/copperpeas/uniapp-payment uniapp-payment 介绍 uniapp支付微信支付流程测试接 ...
微信小程序中嵌套html_微信小程序：web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
微信公众号开发，微信支付功能开发（网页JSAPI调用）
1.微信支付的流程如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...
如何使用easywechat开发微信支付功能
easywechat是神一样的存在.非常好用.希望大家都能转到这上面来. 用easywechat来开发微信支付功能,步骤如下: 一,需要有一个商品下单页面,页面上有你的商品的信息,还要有购买数量,和一 ...
【javaWeb微服务架构项目——乐优商城day15】——会调用订单系统接口，实现订单结算功能，实现微信支付功能
0.学习目标会调用订单系统接口实现订单结算功能实现微信支付功能源码笔记及资料: 链接:https://pan.baidu.com/s/1_opfL63P1pzH3rzLnbFiNw 提取码:v ...
尚医通项目150-170：预约挂号、微信支付功能
前台用户系统预约挂号 1.接口分析 (1)根据预约周期,展示可预约日期数据,按分页展示 (2)选择日期展示当天可预约列表(该接口后台已经实现过) 2.页面展示分析 (1)分页展示可预约日期,根据有号 ...
企业微信支付功能怎么开通？
企业微信接入了微信支付,形成了企业支付功能,通过此功能,企业管理员可以以企业的名义给员工发送红包.对员工进行付款或收款. 前言企业微信接入了微信支付,形成了企业支付功能,通过此功能,企业管理员可以以 ...

uniapp 微信支付功能

前言

正文

uniapp

后端

uniapp 微信支付功能相关推荐

最新文章

热门文章