注意看 本文主要讲解uniapp打包成h5页面并部署在公众号时使用JSAPI的微信支付问题
前期准备工作
.首先要有一个开通商户注册的公众号,我们需要他的appid;
.其次要开通商户公众号的公众号支付的功能并添加域名,开通完成后就可以基本开始我们的开发了

既然是jsapi开发 自然是要引入的
npm install weixin-jsapi
在页面引入文件
import wx from 'weixin-jsapi'
如果是html文件中可以script标签引入

再来就是熟悉一下流程
微信支付需要先跳转到微信指定的页面获取code ,这个code在跳到微信指定的页面时会把这个code自动添加到地址栏中
然后我们再把这个code传给后端拿到openid ,再之后把openid给到后端获取调起微信支付的一系列参数
以下为作者的个人的支付流程 大家可以自行参考
OK 第一步 获取code
这里作者采用了静默授权的方式获取code
首先 copy两段来自其他地方的代码以获取code
点击查看代码
| function getUrlKey(name){ |
| return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(window.location.href)||[,""])[1].replace(/\+/g,'%20'))||null; |
| } |
| 此段代码为获取地址栏上参数名为name的值,后续我们会且只会传‘code’以获取地址栏上的code值 |
点击查看代码
| function getCodeApi(state){ |
| let urlNow=encodeURIComponent(window.location.href); |
| let scope='snsapi_base'; |
| let appid='你的appid'; |
| let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`; |
| window.location.replace(url); |
| } |
这段代码为拼接地址,并跳转到微信的指定界面
| 然后作者在onshow生命周期内调用了上面提到的getUrlKey()函数来对地址栏的code进行提取 |
点击查看代码
| |
| let WXcode = ref('') |
| onShow(()=>{ |
| WXcode.value=getUrlKey("code"); |
| if(WXcode.value!==null){ |
| console.log('拿到了code为',WXcode.value); |
| getOpenIdWXh5Api(WXcode.value).then(res=>{ |
| console.log('openid:') |
| console.log(res.data.data.result.openid); |
| if(res.data.status==1){ |
| let openid = res.data.data.result.openid; |
| payByWXh5Api({order_sn: props.sn,openid:openid}).then(res=>{ |
| console.log('订单参数:'); |
| console.log(res); |
| let response = res.data.data.response; |
| |
| wx.config({ |
| debug: false, |
| appId: response.appId, |
| timestamp: response.timeStamp, |
| nonceStr: response.nonceStr, |
| signature: response.paySign, |
| jsApiList: ['chooseWXPay'], |
| }); |
| wx.ready(res=>{ |
| console.log('js-sdk初始化成功',res); |
| wx.chooseWXPay({ |
| appId: response.appId, |
| timestamp: response |
| .timeStamp, |
| nonceStr: response.nonceStr, |
| package: response.package, |
| signType: response.signType, |
| paySign: response.paySign, |
| success: function(res) { |
| console.log('付款成功!', res); |
| uni.showToast({ |
| title: "付款成功!", |
| duration: 1000 |
| }) |
| window.location.replace('https://xxx.com/x/#/x此处为支付完成后的跳转地址 对地址栏进行直接替换用以清除地址栏上的上一单的code参数,否则会影响onshow时获取code,使之第二次及之后获取的code都为第一次支付时的code,用此重复code去请求openid会报40029 即code无效 以下还有两处为取消支付,支付失败后的跳转地址,同样需要对地址进行整体替换') |
| }, |
| cancel: function(res) { |
| console.log('付款取消!', res); |
| uni.showToast({ |
| title: "付款取消!", |
| icon:'error', |
| duration: 1000 |
| }) |
| window.location.replace('https://xxx.com/x/#/x') |
| }, |
| fail: function(res) { |
| console.log('付款失败!', res); |
| uni.showToast({ |
| title: "付款失败!", |
| icon:'error', |
| duration: 1000 |
| }) |
| window.location.replace('https://xxx.com/x/#/x') |
| } |
| }); |
| }); |
| wx.error(err=>{ |
| console.log('js-sdk初始化失败',err); |
| }); |
| }); |
| } |
| }); |
| } else { |
| console.log('第一次进,没拿到'); |
| } |
| }) |
| |
再之后 给你触发支付的函数调用前文提到的getCodeApi()函数
点击查看代码
| payFun(){ |
| |
| getCodeApi('123') |
| |
| } |
怕你忘了 这个getCodeApi函数为拼接微信提供的地址 这个‘123’参数无实意 只是微信的拼接要求 也可以换成其他的 跳到指定界面后微信会给你的地址栏加上code参数之后会自动跳转回来 所以作者在onshow里写了判断地址栏是否含有code参数 有则直接调起支付流程 并在支付完成或失败后手动的对地址栏进行了覆盖以解决首次触发支付后再次触发时获取的code值为旧值 使用微信开发助手进行调试时此错误更加明显 可以观察上方的地址栏上在触发一次支付后地址栏会一直存在code参数
本文作者:橙汁不加糖
本文链接:https://www.cnblogs.com/silencesuzuka/p/17704671.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步