H5 - 微信支付(JS.SDK)

• 前期步骤

1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2. 引入 JS 文件
3. 通过 wx.config() 注册权限

wx.config({
  debug: true,
  appId: '', // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['chooseWXPay'] // 必填，需要使用的 JS 接口列表
});

• 下单支付步骤

1. 获取支付项信息，请求后端接口下单
2. 根据下单返回的信息决定是否能拉起微信支付面板

交完整的支付小栗子

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>
    wx.config({
      debug: true,
      appId: '', // 必填，公众号的唯一标识
      timestamp: '', // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: ['chooseWXPay'] // 必填，需要使用的 JS 接口列表
    })
    
    <!-- H5微信支付流程 -->
    // 下单获取支付必备参数
    function order(){
        ajax({
            methods: 'POST',
            data: {},
            url: '下单url',
            success: function(res) {
                wechatPay(res.data) // 常用的方法(兼容性更好)
                // onChooseWXPay(res.data)
            }
        })
    }
    
    // **1.判断当前环境，监听支付面板**
    function wechatPay(json){
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', function () {
                    onBridgeReady(json);
                }, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', function () {
                    onBridgeReady(json);
                });
                document.attachEvent('onWeixinJSBridgeReady', function () {
                    onBridgeReady(json,)
                });
            }
        } else {
            onBridgeReady(json);
        }
    }
    // **1. 根据回调，判断支付结果(取消，密码错误，支付失败等等场景) 常用此方法**
    function onBridgeReady(json){
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', json,
            function(res){
                // 支付结果
            }
        )
    }
    
    
    
    // **2. 根据回调，判断支付结果(取消，密码错误，支付失败等等场景) **
    function onChooseWXPay(json){
        wx.chooseWXPay({
            timestamp: '', // 支付签名时间戳，
            nonceStr: '', // 支付签名随机串，不长于 32 位
            package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: '', // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
            paySign: '', // 支付签名
            success: function (res) {
                // 支付成功后的回调函数
            }
        })
    }
</script>

插入流程图说明