微信支付 (公众号，小程序，内嵌h5)
一，原生小程序
开发流程：
-
首先通过wx.login()获取到code,继而通过接口获取到openid，
-
使用
code和orderId请求后端接口，获取支付所需数据。 -
小程序调用 wx.requestPayment()接口，拉起微信支付页面。
-
判断是否支付成功后的逻辑
代码实现：
js
wx.requestPayment({
provider: 'wxpay',
appId: data.appId , //此参数可不用
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
timeStamp: data.timeStamp,
success: (res) => {
wx.navigateTo({
url:`/pages/index/index
})
},
fail: function (err) {
wx.showToast({
title:"支付失败",
mask: false,//是否显示透明蒙层，防止触摸穿透，默认：false
})
}
})二，微信h5支付（公众号）
方式一（wx.chooseWXPay）
-
安装 "weixin-js-sdk"
-
引入 import wx from 'weixin-js-sdk'
-
首先通过网页授权获取code 继而拿到openid
-
使用
code和orderId请求后端接口，获取支付所需参数。 -
使用config 函数进行接口权限注入，要在调用支付接口之前进行支付接口权限的注入。
授权链接:
https://open.weixin.qq.com/connect/oauth2/authorize？appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数说明：
-
appid :公众号appid
-
redirect_uri:授权成功之后的重定向地址，一般为当前公众号的域名
代码实现
js
axios.get("api/public/wechat/createJsapiSignature?url=" +
encodeURIComponent(window.location.href.split("#")[0]) +
"&appId=xxx"
).then((response) => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: appId, // 必填，公众号的唯一标识，填自己的！
timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: [
'chooseWXPay',
],
});
wx.ready(function () {
jweixin.onMenuShareAppMessage(shareData);
jweixin.onMenuShareTimeline(shareData);
jweixin.onMenuShareWeibo(shareData);
jweixin.onMenuShareQQ(shareData);
jweixin.onMenuShareQZone(shareData);
});
});
weiXinPay(){
wx.chooseWXPay({
timeStamp，nonceStr，
package，paySign等参数
timestamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
appId: data.appId, //此参数可不用
success: (r) => {
// 支付成功后的回调函数
if (r.errMsg == "chooseWXPay:ok") {
//支付成功
} else {
//支付失败
}
},
});
}方式二（WeixinJSBridge.invoke）
js
// 用于判断是有此对象即是否是微信环境下
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}else{
onBridgeReady()
}
}
onBridgeReady(data) {
const _this = this
WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": data.appId, //公众号ID，由商户传入
"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式
"paySign": data.paySign //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
console.log('成功')
} else {
console.log('支付失败，请重新尝试！')
}
})
}WeixinJSBridge 内置对象在其他浏览器中无效。只有在微信环境中才能使用其拉起微信支付。
WeixinJSBridge.invoke 与 wx.chooseWXPay
WeixinJSBridge.invoke() ：出现早 无需引用jssdk 无需wx.config方法注入 需要参数appId
wx.choosewxpay()：出现晚 需要jssdk注入 不需要参数appId
WeixinJSBridge.invoke()是微信浏览器的内置方法 而wx.choosewxpay()在引用的微信jssdk文件中 也是 去调用了WeixinJSBridge.invoke() 可以理解为将 WeixinJSBridge.invoke()进行了二次封装。
三，混合开发（内嵌h5）
混合开发常见为使用uni-app 或者为原生微信小程序去创建项目框架，使用其提供的web-view 标签引入已经开发部署完成的vue 项目域名，完成一个小程序。这样既可减少开发时间也可达到一套代码完成小程序，公众号。从而成为现下较为主流方式。
由于在小程序内所以只能去调用小程序的api，即wx.requestPayment 去拉起支付而当前页面却是在h5 所以要先从h5跳转到原生的小程序页面，然后才能去调用他的方式，支付方式和上文提到的原生小程序支付方式无二，等待支付完成之后再由原生小程序跳转到h5。
js
jWeixin.miniProgram.navigateTo({
//跳转到原生小程序
url: /pages/pay/index?access_token=${JSON.parse(sessionStorage.getItem("userInfo")).access_token}
&orderCode=${this.orderInfo.orderCode}`
})此为由h5跳转到原生小程序支付页面并携带支付所需订单参数。
<web-view :src="src"></web-view>
支付成功之后需要跳转到h5页面，此时只需要将web-view 中src 改为 h5线上路径即可
https://xxx/goods/pay/index
结语 :
此文旨在讲述小程序，公众号，内嵌h5 环境下的各种支付的实现方式和其中的注意事项，希望对您有所帮助。如果您发现有什么错误，欢迎您多多加以指正。。。