위챗 공개 계정을 개발하면서 이전에는 위챗 관련 개발 경험이 없어서 함정에 빠지고 또 올라갔습니다. 하지만 이를 통해 위챗 공개 계정과 위챗 공식 문서에 대한 친숙도도 크게 높아졌습니다.
구덩이를 오르는 길함정 1: 단일 페이지 SPA 및 백엔드 라우팅 문제
함정 2: Android가 WeChat 결제를 활성화하지 못할 가능성이 높습니다(WeChat의 js-sdk 패키지 도입 실패).
WeChat 공식 문서: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
다음과 같은 DEMO가 있습니다.
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //판매자가 전달한 공식 계정 이름 timeStamp:1395712654, //타임 스탬프, 1970년 이후의 초 수 nonceStr:e61463f8efa94090b1f366cccfbbb444, //Random string package:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //WeChat 서명 방법: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //WeChat 서명}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //위 방법을 사용하여 프런트엔드 반환을 판단합니다. //res. err_msg는 사용자가 성공적으로 결제할 때 사용됩니다. ok를 반환하지만 절대적으로 신뢰할 수 있는 것은 아닙니다. } }); }if (WeixinJSBridge 유형 == 정의되지 않음){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false) }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady) }}else{ onBridgeReady();}백엔드 동료가 성공적으로 코드를 승인한 후 이 코드를 활동 페이지에 소개하고 테스트용 빌드를 제출했습니다. 글쎄요, Apple에는 문제가 없고 Android에는 문제가 없는 것 같습니다. 결제가 되는데 처음에는 위챗 버전인 줄 알았는데, 성공 확률이 너무 낮네요. 10번에 한 번만 가능하거든요. 변경하세요.
해결책:WeChat 개발자 도구를 열고 기록하고 마지막으로 이 단계에서 (typeof WeixinJSBridge == undefine)인 경우를 찾습니다.
1.ios는 WeChat 브라우저의 js-sdk를 활성화할 수 있습니다.
2. 대부분의 Android는 정의되지 않음으로 전환되었습니다.
사실 여기서는 이유를 모르겠습니다. 개인적으로 위챗 안드로이드 내장 브라우저 버전과 WeixinJSBridge 방식의 문제라고 생각합니다. (누군가가 대답해줬으면 좋겠어)
js-sdk는 조정할 수 없기 때문에 수동으로 구성을 소개하겠습니다. //그래서 때로는 게으른 것이 더 귀찮으니 교훈을 얻으세요.
if (typeof WeixinJSBridge == 정의되지 않음){ 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
소개해야 하는 페이지로 모듈을 가져옵니다.
'weixin-js-sdk'에서 wx 가져오기
구성(WeChat 공식 문서 참조: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):
wx.config({ debug: true, // 디버깅 모드를 켭니다. 모든 API 호출의 반환 값은 클라이언트 측에서 경고됩니다. 들어오는 매개변수를 보려면 PC 측에서 열 수 있습니다. . 매개변수 정보는 로그를 통해 출력됩니다. appId: '', // 필수, 공식 계정의 고유 식별자 timestamp: , // 필수, 생성된 서명의 타임스탬프 nonceStr: '', // 필수, 생성된 서명의 타임스탬프 무작위 문자열 서명: '', // 필수, 서명 jsApiList: [] // 필수, 사용해야 하는 JS 인터페이스 목록입니다. 예를 들어 결제 인터페이스를 호출하려면 [chooseWXPay]});여기서 타임스탬프는 소문자, s는 소문자, 데이터 유형은 int 유형입니다.
이제 구성이 완료되었으므로 공식 문서를 계속해서 읽어보세요.
공식 문서에는 구성 확인이 성공한 후 실행을 보장하기 위해 인터페이스가 배치된다고 나와 있습니다.
wx.ready(function(){ // config 정보가 확인된 후 Ready 메소드가 실행됩니다. 모든 인터페이스 호출은 config 인터페이스가 결과를 얻은 후에 이루어져야 합니다. config는 클라이언트 측의 비동기 작업이므로 페이지가 로드될 때 관련 인터페이스를 호출해야 하며, 올바른 실행을 보장하기 위해 준비 함수에서 관련 인터페이스를 호출해야 합니다. 사용자가 트리거할 때만 호출되는 인터페이스의 경우 직접 호출할 수 있으며 호출할 필요가 없습니다. });매개변수 가져오기 준비 완료(데이터 유형에 주의하고 백엔드 동료와 잘 협력하세요 - -)
wx.chooseWXPay({timestamp: 0, // 결제 서명 타임스탬프. WeChat jssdk에서 사용되는 모든 타임스탬프 필드는 소문자입니다. 그러나 서명을 생성하기 위해 최신 버전의 결제 배경에서 사용하는 타임스탬프 필드 이름은 S를 대문자로 시작해야 합니다. 문자 nonceStr: '', // 결제 서명의 무작위 문자열, 32비트 이하 package: '', // 통합 결제 인터페이스에서 반환된 prepay_id 매개변수 값, 제출 형식: prepay_id=/*/*/*) signType: '', // 서명 방법, 기본값은 'SHA1'이며 '를 전달해야 합니다. 새 버전의 결제 paySign을 사용하는 경우 MD5': ' ', // 결제 서명 성공: function(res) {// 결제 성공 후 콜백 함수}}); 첨부된 내용은 내 데모입니다.준비된 Vue 데이터를 사용할 때 실수로 이것이 가리키는 구덩이에 빠졌습니다. 바인드가 추가되지 않으면 wx.chooseWXPay의 매개변수가 백엔드에서 요청한 데이터를 가져올 수 없습니다. 이것은 당연히 VueComponent를 가리킬 수 없습니다. 요청 후 this.wx_config 배열 객체에 할당한 데이터를 가져옵니다.
getConfig(){ wx.config({ debug: this.wx_config.debug, // 디버그 모드를 켭니다. 호출된 모든 API의 반환 값은 클라이언트 측에 경고됩니다. 들어오는 매개변수를 PC 측에서 열 수 있습니다. 매개변수 정보는 로그를 통해 인쇄되며 PC 측에만 인쇄됩니다. appId: this.wx_config.appId, // 필수, 공식의 고유 식별자입니다. 계정 타임스탬프: this.wx_config.timestamp, // 필수, 서명 타임스탬프 생성 nonceStr: this.wx_config.nonceStr, // 필수, 서명의 무작위 문자열 생성 서명: this.wx_config.signature, // 필수, 서명 jsApiList: this.wx_config.jsApiList // 필수 목록을 입력하세요. 사용해야 하는 JS 인터페이스}); //WeChat 결제 wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ 타임스탬프: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, 패키지: this.wechat_code.package, signType: this.wechat_code.signType, paySign: this.wechat_code.paySign, 성공: 함수() { // 결제 성공 후 콜백 함수 Alert(결제 성공) window.location.href = /hd/becomevip; }, 취소: function() { 경고(결제 실패) } }) }.bind(this)); 요약:함정을 밟는 것은 언제나 피할 수 없는 일입니다. 요약하면, 문제가 두려워서 옳은 일을 하지 마십시오~
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.