Vue — 微信公衆號內置h5支付相關

時間 2019-12-06

標籤 vue 微信公衆號內置 h5 支付相關简体版

原文原文鏈接

首先，在公衆號後臺配置h5頁面地址php

開發流程

1.經過配置h5地址，獲取code。再經過code，獲取openidios

getOpenid(){
　　let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx697881XXXXXXXX&redirect_uri=https://XXXXX.com&response_type=code&scope=snsapi_userinfo&state=access#wechat_redirect'

　　let self = this; 　　
　　let access_code=this.GetQueryString('code'); 　　
　　let local = window.location.href; 　　
　　if (access_code == null) { 　　　　
　　　　window.location.href = url; 　　
　　} else { 　　　　
　　　　self.curCode = access_code; 　　　　
　　　　self.$axios.get(self.baseUrl+'/api/weixin/openid/'+ self.curCode).then(res =>{ 　　　　　　
　　　　　　if(res.data.data.openid == ''){ 　　　　　　　　
　　　　　　　　window.location.href = url; 
　　　　　　} 　　　　　　
　　　　　　self.openid = res.data.data.openid; 
　　　　　　self.token = res.data.data.token; 
　　　　　　localStorage.setItem('openid',self.openid); 
　　　　　　self.getCerList(); 　　　　
　　　　}) 　　
　　} 
},

GetQueryString(name){
  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg)
  if(r!=null)return  unescape(r[2]); return null;
}

將獲取到的openid和token保存起來（有時獲取的openid爲空，能夠從新再獲取一遍）json

2.提交支付，獲取 prepay_id 和 appidaxios

　　　saveForm: function () {
        var self = this;
        if(!self.checkForm()){
          self.$toast.center('輸入有誤，請檢查');
          return false;
        }
        var data = {
          cert_id:self.curCertId,
          cert_name:self.curCertName,
          cert_type:0,
          wechat_id: localStorage.openid
        }
        self.$axios({
          method:"post",
          url:self.baseUrl+'/api/v1/weixin/applicants/users',
          headers:{
            'Content-Type': 'application/json'
          },
          data:data,
        }).then((res)=>{
          if(res.data.success){
            self.getOrderMsg();
          }else{
            self.$toast.center(res.data.msg);
          }
        })
      },
      getOrderMsg(){
        let self = this;
        let openid = localStorage.getItem('openid');
        self.$axios({
          method:"get",
          url:self.baseUrl+'/api/v1/weixin/wxorder/'+ openid +'/'+ self.curCertId,
        }).then((res)=>{
          if(res.data.success){
            let data = res.data.data;
            let price = data.price;
            if(price == 0){//免費
              this.$router.push({path:'/Wait'});
            }else{
              let appid = data.appid;
              let prepayid = data.prepay_id;
              let name = data.name;
              let apikey = data.apikey;
              let orderid = data.orderid;

              this.$router.push({path:'/Order',query:{appid:appid,prepayid:prepayid,price:price,name:name,orderid:orderid,apikey:apikey}});
            }


          }else{
            self.$toast.center(res.data.msg);
          }
        })


      },

3.參見微信開發文檔，逐一得到相關參數api

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6微信

data() {
      return {
        prepayid:'',
        price:'',
        name:'',
        orderid:'',
        apikey:'',

        timestamp:'',
        time:0,
        orderData:{
          appId:'',
          nonceStr:'',
          package:'',
          signType:'MD5',
          timeStamp:'',
        },
        paySign:'',
      }
    }

　　getParams: function(){
        var self = this;
        self.orderData.appId = self.$route.query.appid;
        self.orderData.package = 'prepay_id=' + self.$route.query.prepayid;
        self.price = Number(self.$route.query.price)/100;
        self.name = self.$route.query.name;
        self.orderid = self.$route.query.orderid;
        self.apikey = self.$route.query.apikey;

        self.getOrderData();
      },
      getOrderData(){
        this.getTimeStamp();//獲取時間戳
        this.orderData.nonceStr = this.getNonceStr(32);//獲取32位隨機數
        this.getPaySign(this.orderData);//生成簽名
      },

獲取時間戳參數微信開發

getTimeStamp(){
    const DATE = new Date();
    this.orderData.timeStamp = Date.parse(DATE)/1000 + '';//秒數 例如：1414561699
    this.time = this.formatDate();
}

    formatDate() {//時間格式
        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }

獲取隨機數參數app

　　getNonceStr(n){//生成 n 位隨機數
        let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        let res = "";
        for(let i = 0; i < n; i++) {
          let id = Math.ceil(Math.random() * 35);
          res += chars[id];
        }
        return res;

      }

生成簽名dom

　　　　getPaySign(obj){
        let self = this;
        const params = [];
        Object.keys(obj).forEach((key) => {
          let value = obj[key]
          // 若是值爲undefined咱們將其置空
          if (typeof value === 'undefined') {
            value = ''
          }
          // 對於須要編碼的文本（好比說中文）咱們要進行編碼
          // params.push([key, encodeURIComponent(value)].join('='))
          params.push([key, value].join('='))
        })
        let stringA = params.join('&');
        let stringSingTemp = stringA + '&key='+self.apikey;
        let sign = md5(stringSingTemp).toUpperCase();
        self.paySign = sign;

        var testparams = {
          "appId":self.orderData.appId,     //公衆號名稱，由商戶傳入
          "timeStamp":self.orderData.timeStamp,         //時間戳，自1970年以來的秒數
          "nonceStr":self.orderData.nonceStr, //隨機串
          "package": self.orderData.package,
          "signType":self.orderData.signType,         //微信簽名方式:
          "paySign":self.paySign,    //微信簽名
          'key':self.apikey
        }

      }

能夠經過簽名校驗工具進行驗證工具

4.調起微信支付接口

    pay(){
        let self = this;
        if (typeof WeixinJSBridge == "undefined"){
          if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady',self.onBridgeReady,false);
          }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', self.onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', self.onBridgeReady);
          }
        }else{
          self.onBridgeReady();
        }

      },

　　　onBridgeReady(){
        let self = this;
        var params = {
          "appId":self.orderData.appId,//公衆號名稱，由商戶傳入
          "timeStamp":self.orderData.timeStamp,//時間戳，自1970年以來的秒數
          "nonceStr":self.orderData.nonceStr,//隨機串
          "package": self.orderData.package,
          "signType":self.orderData.signType,//微信簽名方式:MD5
          "paySign":self.paySign,//微信簽名
        };
        WeixinJSBridge.invoke('getBrandWCPayRequest',params ,function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok"){
            self.$router.push('/Wait');
          }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
            self.$toast.center('取消支付！');
          }else{
            alert(JSON.stringify(res));
          }
        });
      },