คำอธิบายโดยละเอียดเกี่ยวกับข้อผิดพลาดของการชำระเงิน Html5 WeChat

ในระหว่างการพัฒนาบัญชีสาธารณะของ WeChat ฉันไม่เคยมีประสบการณ์เกี่ยวกับการพัฒนาที่เกี่ยวข้องกับ WeChat มาก่อน ดังนั้นฉันจึงตกอยู่ในหลุมพรางและปีนเข้าสู่หลุมพราง อย่างไรก็ตาม ฉันยังเพิ่มความคุ้นเคยกับเอกสารสาธารณะของ WeChat และเอกสารอย่างเป็นทางการของ WeChat อีกด้วย

หลุมพราง 1: ปัญหาเกี่ยวกับ SPA หน้าเดียวและการกำหนดเส้นทางส่วนหลัง

หลุมพราง 2: มีความเป็นไปได้สูงที่ Android จะล้มเหลวในการเปิดใช้งานการชำระเงิน WeChat (ไม่สามารถแนะนำแพ็คเกจ js-sdk ของ WeChat)

ในเอกสารอย่างเป็นทางการของ WeChat: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

มีการสาธิตเช่นนี้:

 ฟังก์ชั่น onBridgeReady(){ WeixinJSBridge.inrigg( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, // ชื่อบัญชีอย่างเป็นทางการ ส่งผ่านโดยผู้ขาย timeStamp:1395712654, //การประทับเวลา จำนวนวินาทีตั้งแต่ปี 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444, //Random string package:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //วิธีลายเซ็น WeChat: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //WeChat Signature}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){/ //ใช้วิธีการด้านบนเพื่อตัดสินการส่งคืนส่วนหน้า ทีมงาน WeChat ขอเตือนอย่างจริงจัง: //res err_msg จะถูกใช้เมื่อผู้ใช้ชำระเงินสำเร็จ ส่งคืนได้ แต่ไม่รับประกันว่าจะเชื่อถือได้อย่างแน่นอน } }); }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 จะไม่มีปัญหา อย่างไรก็ตาม บางครั้ง Android ก็ไม่สามารถปรับเปลี่ยนได้ การชำระเงินและตอนแรกฉันคิดว่าเป็นเวอร์ชัน WeChat มีเหตุผลอื่น ๆ แต่ความน่าจะเป็นที่จะสำเร็จนั้นต่ำเกินไป สามารถทำได้ทุกๆ 10 ครั้งเท่านั้น จะต้องเกิดจากรหัส เปลี่ยนมัน.

เปิดเครื่องมือสำหรับนักพัฒนา WeChat บันทึก และสุดท้ายพบว่าในขั้นตอนนี้ถ้า (ประเภทของ WeixinJSBridge == ไม่ได้กำหนด)

1.ios สามารถเปิดใช้งาน js-sdk ของเบราว์เซอร์ WeChat ได้

2. Android ส่วนใหญ่ไม่มีการกำหนดไว้

อันที่จริงฉันไม่ทราบเหตุผลที่นี่ โดยส่วนตัวแล้วฉันรู้สึกว่ามันเป็นปัญหากับ WeChat Android เวอร์ชันเบราว์เซอร์ในตัวและวิธีการ WeixinJSBridge (หวังว่าจะมีคนให้คำตอบฉันได้)

เนื่องจากไม่สามารถปรับเปลี่ยน js-sdk ได้ เรามาแนะนำการกำหนดค่าด้วยตนเองกันดีกว่า // ดังนั้นบางครั้งการขี้เกียจก็ลำบากกว่า เรียนรู้จากบทเรียน

 if (ประเภทของ 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();}

 npm i -S weixin-js-sdk

นำเข้าโมดูลไปยังเพจที่ต้องการแนะนำ

 นำเข้า wx จาก 'weixin-js-sdk'

การกำหนดค่า (อ้างถึงเอกสารอย่างเป็นทางการของ WeChat: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):

 wx.config({ debug: true, // เปิดโหมดดีบั๊ก ค่าที่ส่งคืนของการเรียก api ทั้งหมดจะได้รับการแจ้งเตือนทางฝั่งไคลเอ็นต์ หากคุณต้องการดูพารามิเตอร์ที่เข้ามาคุณสามารถเปิดได้จากฝั่งพีซี ข้อมูลพารามิเตอร์จะถูกส่งออกผ่านบันทึก โดยจะพิมพ์บนฝั่ง PC เท่านั้น appId: '', // จำเป็น, ตัวระบุที่ไม่ซ้ำกันของการประทับเวลาบัญชีอย่างเป็นทางการ: , // จำเป็น, การประทับเวลาของลายเซ็นที่สร้างขึ้น nonceStr: '', // จำเป็น, การประทับเวลาของลายเซ็นที่สร้างขึ้น ลายเซ็นสตริงสุ่ม: '', // Required, ลายเซ็นต์ jsApiList: [] // Required, รายการอินเทอร์เฟซ JS ที่จำเป็นต้องใช้ ตัวอย่างเช่น หากฉันต้องการเรียกอินเทอร์เฟซการชำระเงิน จะเป็น [chooseWXPay]});

การประทับเวลาที่นี่เป็นตัวพิมพ์เล็ก s เป็นตัวพิมพ์เล็ก และประเภทข้อมูลเป็นประเภท int

เมื่อการกำหนดค่าสำเร็จแล้ว ให้อ่านเอกสารอย่างเป็นทางการต่อ

เอกสารอย่างเป็นทางการระบุว่ามีวิธีที่พร้อม หลังจากการตรวจสอบการกำหนดค่าสำเร็จ อินเทอร์เฟซจะถูกวางไว้เพื่อให้แน่ใจว่ามีการดำเนินการ

 wx.ready(function(){ // เมธอด ready จะถูกดำเนินการหลังจากตรวจสอบข้อมูล config แล้ว การเรียกอินเทอร์เฟซทั้งหมดจะต้องดำเนินการหลังจากที่อินเทอร์เฟซ config ได้รับผลลัพธ์ config เป็นการดำเนินการแบบอะซิงโครนัสในฝั่งไคลเอ็นต์ ดังนั้นหากคุณ จำเป็นต้องเรียกอินเทอร์เฟซที่เกี่ยวข้องเมื่อโหลดเพจ จะต้องเรียกใช้อินเทอร์เฟซที่เกี่ยวข้องในฟังก์ชันที่พร้อมใช้งานเพื่อให้แน่ใจว่ามีการดำเนินการที่ถูกต้อง สำหรับอินเทอร์เฟซที่ถูกเรียกเฉพาะเมื่อผู้ใช้ถูกทริกเกอร์เท่านั้น สามารถเรียกได้โดยตรงและไม่จำเป็นต้องเป็น วางไว้ในฟังก์ชันพร้อม });

นำเข้าพารามิเตอร์ให้พร้อม (ใส่ใจกับประเภทข้อมูลและร่วมมืออย่างดีกับเพื่อนร่วมงานส่วนหลัง - -)

 wx.chooseWXPay({timestamp: 0, // Payment Signature timestamp โปรดทราบว่าฟิลด์การประทับเวลาทั้งหมดที่ใช้ใน WeChat jssdk เป็นตัวพิมพ์เล็ก อย่างไรก็ตาม ชื่อฟิลด์ timeStamp ที่ใช้โดยเวอร์ชันล่าสุดของพื้นหลังการชำระเงินเพื่อสร้างลายเซ็นจะต้องใช้ตัวพิมพ์ใหญ่ อักขระ nonceStr: '', // สตริงสุ่มของลายเซ็นการชำระเงิน, แพ็คเกจไม่เกิน 32 บิต: '', // ค่าพารามิเตอร์ prepay_id ที่ส่งคืนโดยอินเทอร์เฟซการชำระเงินแบบรวม รูปแบบการส่งคือ: prepay_id=/*/*/*) signType: '', // วิธีการลงนาม ค่าเริ่มต้นคือ 'SHA1' และคุณต้องส่งผ่านใน ' MD5' เมื่อใช้ paySign การชำระเงินเวอร์ชันใหม่: ' ', // ลายเซ็นการชำระเงินสำเร็จ: ฟังก์ชั่น (res) {// ฟังก์ชั่นโทรกลับหลังจากชำระเงินสำเร็จ}});

เมื่อใช้ข้อมูลในข้อมูล Vue แบบพร้อมใช้ ฉันบังเอิญตกลงไปในหลุมที่ชี้โดยสิ่งนี้ หากไม่ได้เพิ่มการผูก พารามิเตอร์ใน wx.chooseWXPay จะไม่สามารถรับข้อมูลที่ร้องขอจากแบ็กเอนด์ได้ ซึ่งในที่นี้ไม่ได้ชี้ไปที่ VueComponent โดยธรรมชาติแล้วไม่สามารถทำได้ รับข้อมูลที่ฉันกำหนดให้กับวัตถุอาร์เรย์ this.wx_config หลังจากการร้องขอ

 getConfig(){ wx.config({ debug: this.wx_config.debug, // เปิดโหมด debug ค่าที่ส่งคืนของ apis ทั้งหมดที่ถูกเรียกจะถูกแจ้งเตือนทางฝั่งไคลเอ็นต์ หากคุณต้องการดู พารามิเตอร์ที่เข้ามา คุณสามารถเปิดได้ทางฝั่งพีซี ข้อมูลพารามิเตอร์จะถูกพิมพ์ผ่านบันทึก และจะพิมพ์บน 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, ความสำเร็จ: ฟังก์ชั่น () { // ฟังก์ชั่นโทรกลับหลังจากการแจ้งเตือนการชำระเงินสำเร็จ (การชำระเงินสำเร็จ); window.location.href = /hd/becomevip; }, ยกเลิก: function() { alert(Payment failed); }.bind(this) },

เป็นสิ่งที่หลีกเลี่ยงไม่ได้เสมอที่จะก้าวไปสู่หลุมพราง โดยสรุป อย่าทำสิ่งที่ถูกต้องเพียงเพราะคุณกลัวปัญหา~

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network