Penjelasan mendetail tentang kendala pembayaran Html5 WeChat

Selama pengembangan akun publik WeChat, saya tidak memiliki pengalaman dengan pengembangan terkait WeChat sebelumnya, jadi saya terjebak dan mengalami kesulitan. Namun, hal ini juga meningkatkan pemahaman saya terhadap dokumen publik WeChat dan dokumen resmi WeChat.

Kesalahan 1: Masalah dengan SPA satu halaman dan perutean back-end

Kesalahan 2: Ada kemungkinan besar Android gagal mengaktifkan pembayaran WeChat (gagal memperkenalkan paket js-sdk WeChat)

Dalam dokumentasi resmi WeChat: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

Ada DEMO seperti ini:

 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //Nama akun resmi, diteruskan oleh stempel waktu pedagang:1395712654, //Cap waktu, jumlah detik sejak 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444, //Paket string acak:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //Metode tanda tangan WeChat: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //WeChat Signature}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //Gunakan metode di atas untuk menilai pengembalian front-end. Tim WeChat dengan sungguh-sungguh mengingatkan: //res. err_msg akan digunakan ketika pengguna berhasil membayar. Pengembalian oke, tetapi tidak dijamin sepenuhnya dapat diandalkan } }); }if (typeof WeixinJSBridge == tidak terdefinisi){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', diBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}lainnya{ onBridgeReady();}

Setelah rekan back-end berhasil mengotorisasi kode, saya dengan senang hati memperkenalkan kode ini ke halaman aktivitas dan mengirimkan build untuk pengujian. Ya, Apple tidak memiliki masalah, dan Android sepertinya tidak memiliki masalah pembayarannya, dan awalnya saya mengira itu versi WeChat. Ada alasan lain, tetapi kemungkinan berhasilnya terlalu rendah. Itu hanya bisa dilakukan setiap 10 kali. Ubah itu.

Buka alat pengembang WeChat, masuk, dan terakhir temukan pada langkah ini jika (typeof WeixinJSBridge == tidak terdefinisi)

1.ios dapat mengaktifkan js-sdk browser WeChat

2. Sebagian besar Android menjadi tidak terdefinisi.

Sebenarnya saya tidak tahu alasannya di sini. Secara pribadi, saya merasa ini adalah masalah dengan versi browser bawaan WeChat Android dan metode WeixinJSBridge. (Saya harap seseorang dapat memberi saya jawaban)

Karena js-sdk tidak bisa disesuaikan, mari kita perkenalkan konfigurasinya secara manual // Jadi terkadang bermalas-malasan itu lebih merepotkan, belajarlah dari pelajaran ini

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

 npm dan -S weixin-js-sdk

Impor modul ke halaman yang perlu diperkenalkan

 impor wx dari 'weixin-js-sdk'

Konfigurasi (lihat dokumentasi resmi WeChat: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):

 wx.config({ debug: true, // Aktifkan mode debugging. Nilai kembalian semua panggilan api akan diberitahukan di sisi klien. Jika Anda ingin melihat parameter yang masuk, Anda dapat membukanya di sisi PC , Informasi parameter akan dikeluarkan melalui log. Itu hanya akan dicetak di sisi PC. appId: '', // Diperlukan, pengidentifikasi unik dari stempel waktu akun resmi: , // Diperlukan, stempel waktu dari tanda tangan yang dihasilkan. nonceStr: '', // Diperlukan, stempel waktu dari tanda tangan yang dihasilkan Tanda tangan string acak: '', // Wajib, tanda tangan jsApiList: [] // Wajib, daftar antarmuka JS yang perlu digunakan. Misalnya, jika saya ingin memanggil antarmuka pembayaran, itu adalah [chooseWXPay]});

Di sini stempel waktu adalah huruf kecil, s adalah huruf kecil, dan tipe datanya adalah tipe int.

Sekarang konfigurasi berhasil, lanjutkan membaca dokumentasi resmi.

Dokumentasi resmi mengatakan bahwa ada metode siap pakai. Setelah verifikasi konfigurasi berhasil, antarmuka ditempatkan di dalamnya untuk memastikan eksekusi.

 wx.ready(function(){ // Metode siap akan dieksekusi setelah informasi konfigurasi diverifikasi. Semua panggilan antarmuka harus dilakukan setelah antarmuka konfigurasi mendapatkan hasilnya. config adalah operasi asinkron di sisi klien, jadi jika Anda perlu memanggil antarmuka yang relevan ketika halaman dimuat, antarmuka yang relevan harus dipanggil dalam fungsi siap untuk memastikan eksekusi yang benar. Untuk antarmuka yang dipanggil hanya ketika dipicu oleh pengguna, mereka dapat dipanggil secara langsung dan tidak perlu dipanggil ditempatkan di fungsi siap });

Impor parameter sudah siap (perhatikan tipe datanya, dan bekerja sama dengan baik dengan rekan back-end - -)

 wx.chooseWXPay({timestamp: 0, // Stempel waktu tanda tangan pembayaran. Perhatikan bahwa semua kolom stempel waktu yang digunakan di WeChat jssdk adalah huruf kecil. Namun, nama kolom timeStamp yang digunakan oleh versi terbaru latar belakang pembayaran untuk menghasilkan tanda tangan perlu menggunakan huruf kapital S karakter nonceStr: '', // String acak dari tanda tangan pembayaran, tidak lebih dari 32 bit paket: '', // Nilai parameter prepay_id dikembalikan oleh antarmuka pembayaran terpadu, format pengirimannya adalah: prepay_id=/*/*/*) signType: '', // Metode tanda tangan, defaultnya adalah 'SHA1', dan Anda harus memasukkan ' MD5' saat menggunakan pembayaran versi baru paySign: ' ', // Tanda tangan pembayaran berhasil: fungsi (res) {// Fungsi panggilan balik setelah pembayaran berhasil}});

Saat menggunakan data dalam data Vue yang sudah siap, saya tidak sengaja jatuh ke dalam lubang yang ditunjukkan oleh ini. Jika pengikatan tidak ditambahkan, parameter di wx.chooseWXPay tidak bisa mendapatkan data yang diminta dari backend. Ini di sini tidak menunjuk ke VueComponent secara alami tidak bisa dapatkan data yang saya tetapkan ke objek array this.wx_config setelah permintaan.

 getConfig(){ wx.config({ debug: this.wx_config.debug, // Aktifkan mode debug. Nilai kembalian dari semua api yang dipanggil akan diberitahukan di sisi klien. Jika Anda ingin melihat parameter yang masuk, Anda dapat membukanya di sisi PC, informasi parameter akan dicetak melalui log, dan hanya akan dicetak di sisi PC appId: this.wx_config.appId, // Diperlukan, pengidentifikasi unik resmi. stempel waktu akun: this.wx_config.timestamp, // Wajib, buat stempel waktu tanda tangan nonceStr: this.wx_config.nonceStr, // Wajib, buat string acak tanda tangan tanda tangan: this.wx_config.signature, // Wajib, tanda tangan jsApiList: this.wx_config.jsApiList // Wajib Isi daftar Antarmuka JS yang perlu digunakan}); //Pembayaran WeChat wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ cap waktu: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, paket: this.wechat_code.package, signType: this.wechat_code.signType, paySign: this.wechat_code.paySign, sukses: fungsi () { // Fungsi panggilan balik setelah peringatan pembayaran berhasil (pembayaran berhasil window.location.href = /hd/becomevip; }, batalkan: function() { peringatan(pembayaran gagal } });

Menginjak jebakan selalu tidak dapat dihindari. Singkatnya, jangan melakukan hal yang benar hanya karena Anda takut akan masalah~

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.