微信支付

结合微信支付的api文档进行配置。参考

微信文档中的例子如下。

function onBridgeReady(){   WeixinJSBridge.invoke(      'getBrandWCPayRequest', {         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入              "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数              "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串              "package":"prepay_id=u802345jgfjsdfgsdg888",              "signType":"MD5",         //微信签名方式：              "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名       },      function(res){      if(res.err_msg == "get_brand_wcpay_request:ok" ){      // 使用以上方式判断前端返回,微信团队郑重提示：            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。      }    }); }// 下面是兼容不同浏览器绑定事件的方法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这个方法中。

所以第一步是获取数据，第二步是把获取到的数据传入到onBridgeReady方法第一步：发送请求获取后台数据1.在对应的api文件下封装请求（get）

export function wechatPay(type, vid, token, point, discount) {  let discount_type = discount || null  return axios.get(`${Host}/api/save_mobile`,{    params: {      pay_type: type,      video_id: vid,      token,      point,      discount_type    }  })}

2.在对应的组件调用请求

发送支付请求

import { wechatPay } from '../../../api/pay.js'export default {  name: 'payfooter',  computed: {    info() {      return this.$store.state.user.info    },    // 获取选择支付的方式    paytype() {      return this.$store.state.pay.paytype    }  },  methods: {    _wechatPay(type, vid, token, point) {       wechatPay(type, vid, token, point).then(res => {            console.log(res) // 这个res就是后台返回的数据       })    }  }}

3.后台返回的json格式数据如下（这不是console出来，方便显示我就直接把json数据复制过来）

{    "code": 0,    "data": {        "appId": "wx5beac*******7c40c",        "nonceStr": "8491k3******Rs5",        "package": "prepay_id=wx07**************2653",        "paySign": "CDE21B*************40C1A",        "signType": "MD5",        "timeStamp": "15******1"    },    "msg": null}

第二步：把数据传给onBridgeReady函数

所以真正需要获取的内容是 res.data.data，然后再把res.data.data的值传给onBridgeReady函数4.重新整理一下代码就是

methods: {    _wechatPay(type, vid, token, point) {       wechatPay(type, vid, token, point).then(res => {            res = res.data            if(res.code === 0) {                this.onBridgeReady(res.data) // 这样就把res.data传给onBridgeReady函数            }       })    },    // 微信支付api相关配置文档    onBridgeReady(data) {      if (typeof WeixinJSBridge === 'undefined') {        this.$toast({ message: '请使用微信内置浏览器进行支付' })      } else {        WeixinJSBridge.invoke(          'getBrandWCPayRequest',          {            appId: data.appId, // 公众号名称，由商户传入            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数            nonceStr: data.nonceStr, // 随机串            package: data.package,            signType: data.signType, // 微信签名方式：            paySign: data.paySign // 微信签名          },          res => {            if (res.err_msg === 'get_brand_wcpay_request:ok') {              this.$toast({ message: '支付成功' })              this.$router.push({path: '/videoplayer', query: { video_id: this.$route.query.video_id }}) // 支付成功之后跳转的路由            } else {              this.$toast({ message: '支付失败' })            }          }        )      }     },  }

支付宝支付

与微信支付不同的是，支付宝支付后台是返回form格式的数据，如下

那么在处理后台数据的时候用下面的方法（参考网络大神）

_wechatPay(type, vid, token, point) {     wechatPay(type, vid, token, point).then(res => {        const form = res.data        const div = document.createElement('div')        div.id = 'alipay'        div.innerHTML = form        document.body.appendChild(div)        document.querySelector('#alipay').children[0].submit() // 执行后会唤起支付宝     })}