wx.chooseWXPay 微信支付(单页面)

 

在移动端开发中我们有时候需要用到接入微信支付和支付宝支付 

话不多说直接贴微信官方提供的文档，当然公众号的一下必要设置 详见 （https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3）这个操作一般都是后台来完成的，当然如果你的目标是大前端的话，还是了解比较好，支付宝也是一样的需要进行配置

看起来有点啰嗦还有点不实用， 可以直接跳过第二步骤，直接npm 引入包文件   

import wx from 'jweixin-module';

然后请求后台接口返回参数注入微信支付配置 

/**
 * @param {*} wx 微信JSSDK
 * @param {*} response 后台返回的支付配置文件
 */
export function wxConfig(wx, response) {
  wx.config({
    debug: false,
    appId: response["app_id"],
    timestamp: response["time"],
    nonceStr: response["nonce_str"],
    signature: response["sign"],
    jsApiList: ["chooseWXPay"] ,// 必填，需要使用的JS接口列表 
  });
}

 然后调取后端的下单接口，由后端返回的object 对象 再调起wxPay 对象。 wxPay函数that参数为当前wxPay函数所在域的this对象，给回调使用 

/**
 * @param {*} wx 微信JSSDK
 * @param {*} response 支付参数
 */
export function wxPay(wx, response, that) {
  wx.ready(function() {
    wx.chooseWXPay({
      timestamp: response["timestamp"],
      nonceStr: response["nonceStr"],
      package: response["package"],
      signType: response["signType"],
      paySign: response["paySign"],
      success: res => {
        //  支付成功
        if(res.err_msg == "get_brand_wcpay_request:ok" ){
		   // 使用以上方式判断前端返回,微信团队郑重提示：
		   //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
		   that.payCheckSuccess(); // 支付成功回调
		}else if(res.err_msg == "get_brand_wcpay_request:cancel" ){
		   console.log('支付已取消!')
		} else{
			console.log('其他错误')
		}        
      },
      fail: res => {
        console.log(JSON.stringify(res));
      }
    });
  });
  wx.error(res => {
    console.log(JSON.stringify(res));
  });
}

注1：wxConfig函数和wxPay函数试异步的非同步执行，在调取微信支付前需要先执行wxCofig函数，用后台返回的参数注入当前权限，才可以正常调用；

注2：微信官方提示 如果使用  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 所以一般我们做微信的支付一般会做一个二次确认当前用户是否支付的操作，让用户去触发当前是否支付的操作

---

 

二

上面的只是使用的npm 包来进行调起微信支付，还有一种就是上面的引入微信官方提供的JSSDK  JS文件形式，适用于非单页面，当然单页面也可以使用，先说非单页面使用的操作；

        1. 在需要支付的页面引入      http://res.wx.qq.com/open/js/jweixin-1.4.0.js

        2.同上 注入微信配置 wx.config   

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

        3.config配置注入完成后   ready 会再次注入需要使用的API  详见微信官方提供的API

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    wx.checkJsApi({
      jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function(res) {
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });
});

      4. 然后调取后端的下单接口，由后端返回的object 对象 再调起微信内置支付 

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();
}

注：微信官方提示 如果使用  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 所以一般我们做微信的支付一般会做一个二次确认当前用户是否支付的操作，让用户去触发当前是否支付的操作

---