شرح تفصيلي لمزالق الدفع بـ Html5 WeChat

أثناء تطوير حسابات WeChat العامة، لم يكن لدي أي خبرة في التطوير المتعلق بـ WeChat من قبل، لذلك وقعت في المزالق وتسلقت في المزالق، ومع ذلك، فقد زاد ذلك أيضًا من معرفتي بمستندات WeChat العامة ووثائق WeChat الرسمية.

المأزق 1: مشاكل في SPA ذات الصفحة الواحدة والتوجيه الخلفي

المأزق 2: هناك احتمال كبير بأن يفشل Android في تنشيط دفع WeChat (فشل في تقديم حزمة WeChat’s js-sdk)

في وثائق WeChat الرسمية: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

هناك عرض توضيحي مثل هذا:

 function onBridgeReady(){ WeixinJSBridge.invoc( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, // اسم الحساب الرسمي، الذي تم تمريره بواسطة التاجر timeStamp:1395712654, // الطابع الزمني، عدد الثواني منذ عام 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444، //حزمة سلسلة عشوائية:prepay_id=u802345jgfjsdfgsdg888،signType:MD5، //طريقة توقيع WeChat: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //توقيع WeChat}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ // استخدم الطريقة المذكورة أعلاه للحكم على الواجهة الأمامية، ويذكر فريق WeChat رسميًا: //res. سيتم استخدام err_msg عندما يدفع المستخدم بنجاح، لكن ليس من المضمون أن يكون موثوقًا به تمامًا }. }); }if (typeof WeixinJSBridge == uncategorized){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}else{ onBridgeReady();}

بعد أن نجح زميل الواجهة الخلفية في ترخيص الكود، قمت بتقديم هذا الكود إلى صفحة النشاط، بكل سرور، وأرسلت التصميم للاختبار الدفع، واعتقدت في البداية أنه إصدار WeChat هناك أسباب أخرى، ولكن احتمال النجاح منخفض جدًا، ولا يمكن إجراؤه إلا مرة واحدة كل 10 مرات، ويجب أن يكون ذلك بسبب الكود. تغييره.

افتح أدوات مطور WeChat، وسجل، وأخيرًا ابحث عن ذلك في هذه الخطوة إذا (typeof WeixinJSBridge == uncategorized)

يمكن لـ 1.ios تنشيط js-sdk لمتصفح WeChat

2. لقد ذهبت معظم أجهزة Android إلى وضع غير محدد.

في الحقيقة لا أعرف السبب هنا. شخصيًا، أشعر أن هناك مشكلة في إصدار المتصفح المدمج من WeChat Android وطريقة WeixinJSBridge. (اتمنى احد يجاوبني)

نظرًا لأنه لا يمكن ضبط js-sdk، فلنقدم التكوين يدويًا // لذا في بعض الأحيان يكون الكسل أكثر إزعاجًا، تعلم من الدرس

 if (typeof WeixinJSBridge == uncategorized){ console.log( WeixinJSBridge); if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); 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 من جانب العميل. إذا كنت تريد عرض المعلمات الواردة، فيمكنك فتحها على جانب الكمبيوتر الشخصي سيتم إخراج معلومات المعلمة من خلال السجل، وسيتم طباعتها فقط على جانب الكمبيوتر الشخصي. appId: ''، // مطلوب، المعرف الفريد للطابع الزمني للحساب الرسمي:، // مطلوب، الطابع الزمني للتوقيع الذي تم إنشاؤه. nonceStr: '', // مطلوب الطابع الزمني للتوقيع الذي تم إنشاؤه توقيع سلسلة عشوائية: '', // مطلوب، التوقيع jsApiList: [] // مطلوب، قائمة واجهات JS التي يجب استخدامها، على سبيل المثال، إذا أردت الاتصال بواجهة الدفع، فهي [chooseWXPay]});

هنا الطابع الزمني صغير، وs صغير، ونوع البيانات هو نوع int.

الآن بعد أن تم التكوين بنجاح، تابع قراءة الوثائق الرسمية.

تقول الوثائق الرسمية أن هناك طريقة جاهزة بعد نجاح التحقق من التكوين، يتم وضع الواجهة فيها لضمان التنفيذ.

 wx.ready(function(){ // سيتم تنفيذ الطريقة الجاهزة بعد التحقق من معلومات التكوين. يجب إجراء جميع استدعاءات الواجهة بعد حصول واجهة التكوين على النتيجة. التكوين عبارة عن عملية غير متزامنة من جانب العميل، لذلك إذا كنت تحتاج إلى استدعاء الواجهة ذات الصلة عند تحميل الصفحة، ويجب استدعاء الواجهة ذات الصلة في الوظيفة الجاهزة لضمان التنفيذ الصحيح. بالنسبة للواجهات التي يتم استدعاؤها فقط عندما يقوم المستخدم بتشغيلها، يمكن استدعاؤها مباشرة ولا تحتاج إلى ذلك وضعت في وظيفة جاهزة });

استيراد المعلمات جاهزة (انتبه إلى نوع البيانات، وتعاون بشكل جيد مع الزملاء الخلفيين - -)

 wx.chooseWXPay({timestamp: 0, // الطابع الزمني لتوقيع الدفع. لاحظ أن جميع حقول الطابع الزمني المستخدمة في WeChat jssdk هي أحرف صغيرة. ومع ذلك، فإن اسم حقل الطابع الزمني المستخدم بواسطة أحدث إصدار من خلفية الدفع لإنشاء التوقيعات يحتاج إلى تكبير حرف S حرف nonceStr: ''، // سلسلة عشوائية من توقيع الدفع، لا تزيد عن 32 بت الحزمة: ''، // قيمة معلمة prepay_id التي تم إرجاعها بواسطة واجهة الدفع الموحدة، تنسيق الإرسال هو: prepay_id=/*/*/*) SignType: '', // طريقة التوقيع، الافتراضي هو "SHA1"، وتحتاج إلى المرور " MD5' عند استخدام الإصدار الجديد من الدفع paySign: ' '، // نجاح توقيع الدفع: الوظيفة (الدقة) {// وظيفة رد الاتصال بعد الدفع الناجح}});

عند استخدام البيانات الموجودة في بيانات Vue جاهزة، وقعت عن طريق الخطأ في الحفرة التي يشير إليها هذا. إذا لم تتم إضافة الربط، فلن تتمكن المعلمات في wx.chooseWXPay من الحصول على البيانات المطلوبة من الواجهة الخلفية. وهذا لا يشير إلى أن VueComponent طبيعي الحصول على البيانات التي قمت بتعيينها لكائن الصفيف this.wx_config بعد الطلب.

 getConfig(){ wx.config({ debug: this.wx_config.debug, // تشغيل وضع التصحيح. سيتم تنبيه قيم الإرجاع ​​​ لجميع واجهات برمجة التطبيقات التي تم الاتصال بها من جانب العميل. إذا كنت ترغب في عرض المعلمات الواردة، يمكنك فتحها على جانب الكمبيوتر، وستتم طباعة معلومات المعلمة من خلال السجل، وستتم طباعتها فقط على معرف التطبيق على جانب الكمبيوتر: 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({ timestamp: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, الحزمة: this.wechat_code.package, نوع الإشارة: this.wechat_code.signType, paySign: this.wechat_code.paySign, النجاح: الوظيفة () { // وظيفة رد الاتصال بعد الدفع الناجح تنبيه (الدفع ناجح)؛ window.location.href = /hd/becomevip }, Cancel: function() { تنبيه (فشل الدفع } });

لا مفر دائمًا من الوقوع في المزالق. باختصار، لا تفعل الشيء الصحيح لمجرد أنك خائف من المتاعب

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.