H5 WeChat js-sdk 패키지 도입 실패에 대한 WeChat 결제 솔루션

이 글에서 공유한 내용은 H5 WeChat 결제에서 WeChat의 js-sdk 패키지 도입 실패에 대한 해결 방법에 대한 내용이며, 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

서문

WeChat 공개 계정 활동을 개발하면서 이전에 WeChat 관련 개발을 접한 적이 없었기 때문에 구덩이에 빠지고 올라갔습니다. 하지만 이를 통해 WeChat에 대한 깊은 이해도 갖게 되었습니다. WeChat의 공식 문서에 대한 대중의 친숙도도 크게 높아졌습니다.

구덩이 오르기: 안드로이드가 위챗 결제 활성화에 실패할 가능성이 높습니다(위챗을 도입한 js-sdk 패키지 실패)

위챗 공식 문서에서 : https://pay.weixin.qq.com/wik...
다음과 같은 데모가 있습니다:

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

백엔드 동료가 성공적으로 승인한 후 이 코드를 이벤트 페이지, 행복하세요, 빌드 테스트용 제출 네, 애플은 문제 없고, 안드로이드는 문제 없는 것 같은데 가끔 안드로이드가 결제 조정이 안 되는 경우가 있어서 위챗 버전인 줄 알았는데, 조정 성공 확률은 입니다. 너무 낮습니다. 10회 한 번만 호출할 수 있습니다. 코드 때문일 것입니다. 변경하세요.

솔루션 아이디어:

WeChat 개발자 도구를 열고 로그를 작성한 후 마침내 이 단계에서 if (typeof WeixinJSBridge == "undefine")
1을 발견했습니다. WeChat 브라우저의 js-sdk를 호출할 수 있습니다
2. 대부분의 Android는 정의되지 않은 상태로 전환되었습니다
사실 여기서는 이유를 모르겠습니다. 개인적으로는 WeChat Android 내장 브라우저 버전과 WeixinJSBridge 방식에 문제가 있다고 생각합니다. (누군가 답변해 주셨으면 좋겠습니다)
js-sdk는 조정할 수 없으니 수동으로 구성을 도입하세요 //그래서 때로는 게으른 것이 더 귀찮으니 교훈을 얻으세요

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에서 WeChat을 소개합니다 js-sdk 패키지

npm i -S weixin-js-sdk

소개해야 할 페이지에 모듈

import wx from 'weixin-js-sdk'

구성을 소개합니다(WeChat 공식 문서 참조: 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 类型

이제 구성이 성공했으므로 계속해서 공식 문서를 읽어보겠습니다.
공식 문서에는 구성 후에 준비된 방법이 있다고 나와 있습니다. 확인이 성공하면 실행을 보장하기 위해 인터페이스를 내부에 넣으십시오.

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

도입 매개변수 준비 완료(데이터 유형에 주의하고 백엔드 동료와 잘 협력하세요 - -)

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

첨부된 데모는

# 🎜🎜# Ready에서 Vue 데이터를 사용할 때 실수로 이것이 가리키는 구덩이에 빠졌습니다. 바인드가 추가되지 않으면 wx.chooseWXPay의 매개변수가 백엔드에서 요청한 데이터를 가져올 수 없습니다. VueComponent는 요청 후 배열 개체 this.wx_config에 할당한 데이터를 자연스럽게 얻을 수 없습니다.

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

요약:

함정을 밟는 것은 언제나 피할 수 없는 일입니다. 요약하자면, 문제가 두려워서 옳은 일을 하지 마세요~

# 🎜🎜# 관련 추천 :

모바일 H5 페이지 1px 테두리 해결 방법에 대하여

공유 소개에 대하여 HTML5 캔버스 위챗 포스터

위 내용은 H5 WeChat js-sdk 패키지 도입 실패에 대한 WeChat 결제 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!