H5网站或uni-app打包的H5如何接入微信公众号支付
http://www.linfengya.cn/?post=39
我这边以一个uniapp打包的H5网站为例（普通H5网站依然通用，比葫芦划瓢就ok了）
uniapp官网的文档里面没有封装好的支付接口 所以纵使是用uniapp写的H5 依旧要按照普通H5接入公众号支付的流程，
前提准备：
①确保微信公众号已申请了微信支付
②微信公众号的appid
③微信公众号的secret（一般前端不需要用这个，后台需要用这个）
④公众号配置安全域名
流程: ①通过授权拿到code
②通过code拿到支付所需要的用到参数openid
③通过wx.config接口注入权限验证配置
④如果预下单签名校验通过 则执行第五步 (这一步会出现很多错误 比如 缺少什么参数,签名错误,非法调用等)
⑤使用WeixinJSBridge.invoke微信内H5调起支付 就ok了
下面开始贴代码：
首先使用npm安装一下微信的jsApi (这个应该都会吧 就跟vue使用npm安装依赖一样)
初始化：
npm init -y
安装微信模块：
npm install jweixin-module --save
H5的话 要引入js
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
然后走微信授权，(因为我这边是帐号登录注册，无需获取用户的微信信息，所以走的是静默授权)，顺便科普一下微信的两种授权(我谷歌的) :公众号授权有两种方式，一种是静默授权，用户无感知，但无法获取用户的基础信息，如果要想拉取到用户信息，则需要使用另一种授权方式，由于这种方式涉及到隐私，所以需要用户同意才行。
获取的方式则是
https://open.weixin.qq.com/connect/oauth2/authorize?appid=KaTeX parse error: Expected 'EOF', got '&' at position 8: {appid}&̲redirect_uri={uri}&response_type=code&scope=${scope}&state=123#wechat_redirect
//登录成功后跳转的首页域名 有些文章中写的这个地址需要进行encodeURIComponent()加密 我这里没有进行加密
var uri = 'http://www.linfeng******.com/index.html';
//公众号的appid
var appid = 'wx2aec******62811f';
window.location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid +'&redirect_uri='+uri+'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect');
通过走链接可以解析跳转到首页之后的url拿到code
首页调用此方法 会返回一个字符串 如果有值 则此值为code
function urlGetCode(){
var indexUrl = location.search.substr(1);//截取到当前的地址
var items = indexUrl.split('&');
var item;
var code;
for (let a = 0; a < items.length; a++) {
item = items[a].split("=");
if (item[0] == 'code') {
code = item[1];
return code;
}
}
}
我们拿到code之后 需要调用接口 使用code 换取一个openid
获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明
| 参数 | 是否必须 | 说明 |
|---|---|---|
| appid | 是 | 公众号的唯一标识 |
| secret | 是 | 公众号的appsecret |
| code | 是 | 填写第一步获取的code参数 |
| grant_type | 是 | 填写为authorization_code |
前端可以调用这个接口，但是会跨域，所以这个接口一般是由后台进行封装的 你只需要把code传给后台，让后台给你返回一个openid就行了，然后把openid用缓存存起来，因为预下单支付前要用到这个openid
详见微信开发文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#1
然后我们来到订单支付页面 调用支付接口之后后台会给你返回一些预下单的参数 例如
{
"appId": "wx2*********62811f",
"nonceStr": "b0c2e4491a8a5f06a1f4c0d81cd3c40c",
"orderNo": 122816*********7682,
"package": "prepay_id=wx14120839*********6f960fd1318413600",
"sign": "F581AD6144487*********4B1CBC0AB3",
"signType": "MD5",
"timeStamp": 1581653318,
"totalFee": 190
}
然后我们拿到这些参数之后 通过需要通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
详见微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4
如果debug为true 会alert一个弹窗 弹窗内容如果是｛“errMsg”:“config:ok”｝ 则表明验证通过
接下来就可以在微信内H5调起支付啦
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
appId: appId, //公众号名称，由商户传入
timeStamp: timestamp, //时间戳，自1970年以来的秒数
nonceStr: nonceStr, //随机串
package: data.package,
signType: 'MD5', //微信签名方式：
paySign: sign //微信签名
},
function (res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
callback(res)
} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
errorCallback(res)
}
}
)
详见微信支付文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7
到这一步如果参数和签名验证通过，就完成了 如果签名错误 可以使用签名校验工具
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1
完整代码
最后上一份完整的代码 因为业务需求 不止一个地方需要用到支付，比如订单的待支付时也要用到支付 ， 订单详情里也需要用到，所以推荐大家把支付封装一下 ，可以减少很多代码量
1.首先使用npm安装一下微信的jsApi (这个应该都会吧 就跟vue使用npm安装依赖一样)
初始化：
npm init -y
安装微信模块：
npm install jweixin-module --save
H5的话 要引入js
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
2.在uniapp的common下新建一个wxApi.js文件
wxApi.js
/*
微信(公众号)支付方法
*/
const wx = require('jweixin-module');
const wexinPay = (data, callback, errorCallback) => {
let [appId, timestamp, nonceStr, signature, packages, sign] = [data.appId, data.timeStamp, data.nonceStr, data.sign,
data.package, data.sign
];
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
signature, // 必填，签名，见附录1
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
appId: appId, //公众号名称，由商户传入
timeStamp: timestamp, //时间戳，自1970年以来的秒数
nonceStr: nonceStr, //随机串
package: data.package,
signType: 'MD5', //微信签名方式：
paySign: sign //微信签名
},
function(res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
//支付成功回调
callback(res)
} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
//支付失败回调
errorCallback(res)
}
}
)
}
export default {
wexinPay
}
3.在main.js里导入挂载一下（一定要用条件编译，否则在打包APP或在手机基座运行时会报 ‘jweixin’ of undefined,造成手机白屏）
// #ifdef H5
//导入 //（一定要用条件编译，否则在打包APP或在手机基座运行时会报 ‘jweixin’ of undefined,造成手机白屏）
import wxApi from './common/wxApi.js'
//挂载
Vue.prototype.$wxPay = wxApi.wexinPay
// #endif
4.在页面上调用支付 pay.vue
this.$wxPay(payInfo, function (res) {
/*成功的回调*/
console.log("支付成功")
}, function (e) {
/**失败的回调*/
console.log("支付失败或取消支付")
})
//该方法的第一个参数payInfo为调用后台支付返回的预下单参数
//打印payInfo
//{
// "appId": "wx2*********62811f",
// "nonceStr": "b0c2e4491a8a5f06a1f4c0d81cd3c40c",
// "orderNo": 122816*********7682,
// "package": "prepay_id=wx14120839*********6f960fd1318413600",
// "sign": "F581AD6144487*********4B1CBC0AB3",
// "signType": "MD5",
// "timeStamp": 1581653318,
// "totalFee": 190
//}
//第二个参数是成功回调 第三个参数是失败回调
转载自：小枫枫不疯喔