vue 移动端表格_Vue移动端项目结合Thinkphp，异步使用微信支付，不会出错

最新推荐文章于 2024-08-08 08:27:18 发布

weixin_39812142

最新推荐文章于 2024-08-08 08:27:18 发布

阅读量168

点赞数

还是最近手头的项目，因为移动端用的Vant-vue，所以和我们之前做过的项目有很多不同点，毕竟是前后端分离，比如说之前的微信授权，现在又来了微信支付，其实缕清了思路一点都不难。

我说一下我之前做没有前后分离站的思路：

获取openid->全站session存储->用户提交订单->生成order_sn->访问页面的时候生成根据sdk生成jsApiParameters->assign到页面js，点击按钮支付触发支付->之后是同步和异步通知处理

当然，这种思路是很好理解的，但是局限性很大，也不建议使用，之后又考虑了一种思路

订单号给用户看，因为给微信也要传递一个商户订单号，那么我就再生成一个订单号，和用户可见的订单号区分开来，就是说我们有一个订单编号和一个支付单号。

接下来我们就用ajax异步请求的方式来获取jsApiParameters信息，每次请求都重新更改支付单号，这样我们的前端页面就不会乱掉，给大家看下，很早期的一个页面，你就知道我为啥要这么做了

接下来进入正题：

配合Thinkphp，让Vue完美支持微信授权，走出开发大坑

大家可以先按照上面的路子，我们封装axios让他携带Wx-Code，或者在你的localStorage存入我们之前获取的openid，然后在请求的时候带上你的openid。

当然在vue中要用需要先安装weixin-js-sdk

npm install weixin-js-sdk

或者

yarn add weixin-js-sdk

安装完后导入

import wx from 'weixin-js-sdk'

然后在对应的click方法中使用

this.$http.post('/init/user/getpayinfo', { id: this.orderid}).then(res => { if (res.status === 200) {  let data = res.data wx.config({ debug: false, // 开启调试模式, appId: data.sign.appId, // 必填，企业号的唯一标识，此处填写企业号corpid timestamp: data.sign.timeStamp, // 必填，生成签名的时间戳 nonceStr: data.sign.nonceStr, // 必填，生成签名的随机串 signature: data.sign,// 必填，签名，见附录1 jsApiList: ['chooseWXPay'] }) wx.chooseWXPay({ appId: data.sign.appId, // 必填，企业号的唯一标识，此处填写企业号corpid timestamp: data.sign.timeStamp, // 必填，生成签名的时间戳 nonceStr: data.sign.nonceStr, // 必填，生成签名的随机串 signType: 'MD5', package: data.sign.package, paySign: data.sign.paySign, success: res=>{ this.$dialog.alert({ message: '恭喜您付款成功，请耐心等待系统发货' }); } }) })

在php中对应的方法处理这一部分的数据

因为较多内容，我仅仅贴图演示

先要下载微信支付的sdk，然后引入到thinkphp中，做好配置参数