vue中使用微信公众号js-sdk踩坑记录

// main.js
...
import wx from 'weixin-js-sdk'
import request from 'axios'
...
router.afterEach((to, from) => {
 let _url = window.location.origin + to.fullPath
 // 非ios设备，切换路由时候进行重新签名
 if (window.__wxjs_is_wkwebview !== true) {
 request.get('/api/jssdk"color: #ff0000">调用微信支付

两个方案何去何从
h5使用微信支付，细心的人会发现，微信是有两个方案的，我大致了解了一个，一个是js-sdk中开放的能力，一个是微信支付开放平台提供的接口
js-sdk版本:





微信支付版本：



如果你只需要在公众号中调用支付，两个方法都可以，笔者由于已经使用js-sdk接入了其他功能，所以这里就选择了chooseWXPay方式。
接入步骤
在其他功能都接入成功的前提下，接支付就很快很方便了，笔者把主要步骤列下：

  
微信公众平台中配置好js安全接口域名（例如www.imwty.com），这个是调用js-sdk的前提，公众号支付也是基于js-sdk；
  
微信支付平台中设置支付目录，参见微信支付开发文档，这里要说明的是，你需要进行支付的页面路由是什么，就要配置什么，而且需要在后边加上/（例如www.imwty.com/pay/）
  
调用js-sdk签名配置（wechat.config），上文已有提及。
  
在点击支付按钮的逻辑中，调用wechat.chooseWXPay()方法，该方法也涉及到支付签名，需要从服务端去获取签名信息

注意的点：访问支付页面务必不要遗漏/，微信那边会严格比较调用第4步骤时你所在的页面路由和支付平台中设置的路由是否一致。
Coding
这里主要展示第4步骤中笔者的写法，仅供参考


...
methods () {
 handlerPay () {**粗体文本**
 let self = this
 // 进行支付签名
 apiUtil.get('/api/jssdk/pay', {amount: this.amount}).then(function (wxmsg) {
  self.$wechat.chooseWXPay({
  // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
   appId: wxmsg.appId,
   timestamp: wxmsg.timeStamp,
   nonceStr: wxmsg.nonceStr, // 支付签名随机串，不长于 32 位
   package: wxmsg.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
   signType: wxmsg.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
   paySign: wxmsg.paySign, // 支付签名
   success: function (res) {
   // 支付成功的回调函数
   },
   cancel: function (res) {
   // 支付取消的回调函数
   },
   error: function (res) {
   // 支付失败的回调函数
   }
 }).catch(function () {
  ...
 })
 }
}


结语
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。