H5 WeChat payment solution to the failure of introducing WeChat's js-sdk package

The content shared with you in this article is about the solution to the failure of introducing WeChat’s js-sdk package in H5 WeChat payment. The content is of great reference value and I hope it can help friends in need.

Preface

In the development of WeChat public account activities, since I have not been exposed to WeChat-related development before, I fell into pits and climbed into pits. However, it also made me understand WeChat public and WeChat official Familiarity with documentation is greatly increased.

Climb the pit: There is a high probability that Android will fail to activate WeChat payment (failed to introduce WeChat's js-sdk package)

In the official document of WeChat: https://pay.weixin.qq. com/wik...
There is such a DEMO:

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

After the back-end colleague successfully authorizes it, introduce this code on the activity page, be happy, build and submit for testing. Apple is fine. , Android seems to be fine, but sometimes Goose Android cannot adjust the payment. I initially thought it was due to the WeChat version, etc. However, the probability of successful adjustment is too low. It can only be adjusted once every 10 times. , it must be the code reason. Change it.

Solution:

Open the WeChat developer tools, log, and finally find that at this step if (typeof WeixinJSBridge == "undefined")
1.ios can activate WeChat Browser's js-sdk
2. Most Androids go to undefined
Actually, I don't know the reason here. Personally, I feel it is a problem with the built-in browser version of WeChat Android and the WeixinJSBridge method. (I hope someone can answer it)
Since js-sdk cannot be adjusted, then introduce the configuration manually //So sometimes being lazy is more troublesome, learn lessons

if (typeof WeixinJSBridge == "undefined"){
    console.log( WeixinJSBridge);
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

Vue introduces WeChat js-sdk Package

npm i -S weixin-js-sdk

Introduce module

import wx from 'weixin-js-sdk'

configuration on the page that needs to be introduced (refer to WeChat official documentation: https://mp.weixin.qq.com/wiki...):

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

这里timestamp是小写 s 是小写，数据类型是 int 类型

Now that the configuration is successful, let’s continue reading the official documentation
The official documentation says that there is a ready method. After the config verification is successful, put the interface in it to ensure execution.

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

Introduction parameters in ready (pay attention to the data type, and cooperate well with back-end colleagues - -)

wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});

Attached is my demo

Use Vue data in ready The data in WXPay accidentally fell into the pit pointed by this. If you do not add bind, the parameters in wx.chooseWXPay cannot get the data returned from the backend request. This here does not point to VueComponent, so naturally the request cannot be obtained. Finally, I assigned the data of this.wx_config array object.

getConfig(){
            wx.config({
                debug: this.wx_config.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: this.wx_config.appId, // 必填，公众号的唯一标识
                timestamp: this.wx_config.timestamp, // 必填，生成签名的时间戳
                nonceStr: this.wx_config.nonceStr, // 必填，生成签名的随机串
                signature:this.wx_config.signature,// 必填，签名
                jsApiList: this.wx_config.jsApiList // 必填，需要使用的JS接口列表
            });
            //微信支付
            wx.ready(function() {
                // console.log(this.jsApiCall());
                wx.chooseWXPay({
                    timestamp: this.wechat_code.timestamp,
                    nonceStr:this.wechat_code.nonceStr,
                    package: this.wechat_code.package,
                    signType: this.wechat_code.signType,
                    paySign: this.wechat_code.paySign,
                    success: function () {
                        // 支付成功后的回调函数
                        alert("支付成功");
                        window.location.href = "/hd/becomevip";
                    },
                    cancel: function() {
                        alert("支付失败");
                    }
                });
            }.bind(this));
        },

Summary:

It is always inevitable to step into pitfalls. To summarize, don’t do the right thing because you are afraid of trouble~

Related recommendations:

About the solution to the 1px border in the mobile H5 page

About the sharing introduction of the html5 canvas WeChat poster

The above is the detailed content of H5 WeChat payment solution to the failure of introducing WeChat's js-sdk package. For more information, please follow other related articles on the PHP Chinese website!