微信支付实现思路

微信支付

支付分为微信内支付和微信外支付
先进行判断 是在微信内还是微信外

//判断是否微信
        is_weixn(){
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
          } else {
            return false;
          }
        },

微信内支付

微信内置js对象 WeixinJSBridge，进行开发，至此微信浏览器内支付已经完成

 //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
        onBridgeReady(){
          var  vm = this;
          var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',{
              debug:true,
              "appId":vm.weChatParameter.appId,     //公众号名称，由商户传入
              "timeStamp":timestamp, //时间戳，自1970年以来的秒数
              "nonceStr":vm.weChatParameter.nonceStr, //随机串
              "package":vm.weChatParameter.package,
              "signType":vm.weChatParameter.signType, //微信签名方式：
              "paySign":vm.weChatParameter.paySign, //微信签名
              jsApiList: [
                'chooseWXPay'
              ]
            },
            function(res){
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                Toast({
                  message: '支付成功',
                  position: 'middle',
                  duration: 3000
                });
                vm.number=null
                vm.$router.go(-1)
                //window.location.href = vm.BASE_URL + 'index.html#/depositResult'
              }else{
                Toast({
                  message: '支付失败',
                  position: 'middle',
                  duration: 3000
                });
              }
            }
          );
        },

微信外支付

官方文档

if(this.wechatpayType == 'wxpay_php'){
           // console.log("微信外支付")
            let data={
              amount:this.number,
            }
            this.$http.outsideWeChatPay(data).then( res => {
              if(res.data.code === 200){
                let url=res.data.data
                window.location.replace(url)   //这里是后端返回的URL直接进行跳转即可完成微信外支付
              }else{
                Toast({
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          }

在支付完后跳回原来的页面 接收支付结果并进行刷新

document.addEventListener("visibilitychange", function() {
    //需要的操作
});