编写一个vue的微信支付插件

因为公司的spa项目需要接入微信,而微信的支付确实比较坑,所以在这里整理下包含三点.微信外拉起微信支付的H5支付,微信内的公众号支付.而微信公众号支付官方给了两种方式,文档特别乱,入参大小写都不一样,这次经过测试,两种方式都成功

参数准备

微信内的支付需要用到openid,这里有几种情况要说一下

1. 微信点击授权登录,
2. 微信静默授权登录
   以上两种方式都可以获取到openid
   H5支付不需要openid,但是不可以在微信环境使用
   我们公司的项目环境比较复杂, 有以下几种情况
   a. 微信授权登录->获取到openid和uid->后台绑定用户->用户可以使用微信支付
   b.账号密码登录->未曾绑定微信无openid,这时,我们在他登录的时候使用静默授权,获取到当前微信的openid,和用户信息一起暂存在本地,但不绑定,可以便可以使用微信支付

配置

1.在公众号后台->设置->公众号设置->功能设置中设置相关域名信息,并把验证文件放置在项目的根目录下
2.在开发->基本配置中设置白名单,并且appid和AppSecret给后台,AppSecret要单独保存下来,不然以后只能重置了,下面的服务器配置好像是公众号开发才用到的,暂且不用配置

插件部分

import wx from 'weixin-js-sdk'

// 微信公众号支付
export const wxpay = {
  install: (Vue) => {
    Vue.prototype.$wxpay = (msg, cb) => {
      // 因为在我的上一篇文章中的微信分享已经注入过wx.config,获取了微信支付的权限,所以这里就不再次注入,如果没有分享要加上下面的
      // wx.config({
      //   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，
      //   // 参数信息会通过log打出，仅在pc端时才会打印。
      //   appId: msg.appId, // 必填，公众号的唯一标识
      //   timestamp: msg.timeStamp, // 必填，生成签名的时间戳
      //   nonceStr: msg.nonceStr, // 必填，生成签名的随机串
      //   signature: 'MD5', // 必填，签名，见附录1
      //   jsApiList: [
      //     'chooseWXPay'// 微信支付
      //   ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      // })
      wx.chooseWXPay({
        timestamp: msg.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: msg.nonceStr, // 支付签名随机串，不长于 32 位
        package: msg.package,
        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: msg.sign, // 支付签名
        success: function (res) {
          // 支付成功后的回调函数
          if (res.errMsg === 'chooseWXPay:ok') {
            // 支付成功
            /*eslint-disable */
            cb('success')
          } else {
            alert(res.errMsg)
            cb('false')
          }
        },
        cancel: function (res) {
          // 支付取消
          alert('支付取消')
          cb('cancle')
        }
      })
    }
  }
}

// 微信公众号支付的第二种形式
export const wxpay2 = {
  install: (Vue) => {
    Vue.prototype.$wxpay2 = function onBridgeReady(msg, cb){
      WeixinJSBridge.invoke(
         'getBrandWCPayRequest', {
            "appId": msg.appId,     //公众号名称，由商户传入
            "timeStamp": msg.timeStamp,         //时间戳，自1970年以来的秒数
            "nonceStr": msg.nonceStr, //随机串
            "package": msg.package,
            "signType": "MD5",         //微信签名方式：
            "paySign": msg.sign //微信签名
         },
         function (res) {
          if ( res.err_msg == "get_brand_wcpay_request:ok" ){
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }
        }
      )
    }
  }
}

// 微信H5支付
export const wxH5pay = {
  install: (Vue) => {
    Vue.prototype.$wxH5pay = (msg, url) => {
      let redirectUrl = encodeURI(url)
      window.location.href = msg.mweburl + redirectUrl
    }
  }
}

// 支付宝的H5支付
export const alipay = {
  install: (Vue, msg) => {
    Vue.prototype.$alipay = (msg) => {
      alert('支付宝支付暂时还不能使用')
    }
  }
}

main.js引入

import { wxpay, wxpay2, wxH5pay } from './plugins/pay/pay'

Vue.use(wxpay)
Vue.use(wxpay2)
Vue.use(wxH5pay )

使用

// 给后台的传参,后台以获取支付签名
if(this.ua === 'wechat') { // 如果是微信浏览器
let query = {
          userid: this.personInfo.userid,
          token: this.personInfo.token,
          title: '商品标题', 
          amount: this.order.ordersumprice, // 价格
          openid: this.personInfo.wxopenid, // 公众号openid
          orderno: this.order.orderno // 订单号
        }
enchargeWx(query).then(res => {  // 调用后台接口,返回参数
  if (res.code === '1') {
    // 调支付
      this.$wxpay(res.data, this.cb) // 将参数和回调函数穿进去,根据不同的支付状态再做处理
    } else {
      this.$vux.alert.show({
      title: '失败',
      content: '获取支付签名失败'
    })
  }
 })
} else {
// 非微信环境,调用微信h5支付
// 具体向后台传参请看官方文档, 同后台协商
          let query = {
            token: this.token,
            title: this.formData.title,
            price: this.formData.price,
            coinsid: this.formData.coinsid,
            homePageName: '网站主页名', 
            wareName: this.formData.title,
            wapUrl: window.location.href,
            wapName: '网站名'
          }
          buygoldBywxhfive(query).then((Response) => {
            let redirctUrl = '&http://www.baidu.com/mine/wallet' // 支付成功后的重定向地址
            this.$wxH5pay(Response.data, redirctUrl)
          }).catch((err) => {
            this.$alert(err)
          })
}