Artikel ini merangkum penggunaan WeChat JSSDK dan membagikannya kepada Anda untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. Ikat nama domain
2.Tentroduce file JS
Perkenalkan file JS berikut pada halaman yang perlu memanggil antarmuka JS (dukungan https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Harap dicatat bahwa jika halaman Anda telah diaktifkan https, pastikan untuk memperkenalkan https://res.wx.qq.com/open/js/jweixin-1.0.0.js, jika tidak, Anda tidak akan berhasil menggunakan jssdk dalam sistem iOS9.0 atau di atas.
3. Verifikasi konfigurasi melalui antarmuka konfigurasi
Langkah ini adalah untuk mendapatkan serangkaian parameter dengan mengirim permintaan ke latar belakang menggunakan URL saat ini. Artinya, latar belakang akan menggunakan URL saya untuk memverifikasi di WeChat. Hal -hal yang perlu diperhatikan di sini digunakan untuk memverifikasi metode penulisan URL saat ini.
Biarkan url = location.href.split ('#') [0];
Pastikan untuk menulis situasi di atas. Kalau tidak, waktu konfigurasi yang tidak valid akan dilakukan.
Konfirmasikan bahwa URL adalah URL lengkap dari halaman (harap konfirmasi dalam peringatan halaman saat ini (location.href.split ('#') [0])), termasuk bagian 'http (s): //', dan '? 'Bagian parameter GET setelah itu, tetapi tidak termasuk bagian setelah'#'hash.
Pastikan URL yang Anda gunakan untuk menandatangani secara dinamis diperoleh. Anda dapat merujuk pada metode implementasi PHP dalam kode contoh untuk halaman dinamis. Jika halaman statis HTML diteruskan ke backend ke tanda tangan URL melalui AJAX di ujung depan, ujung depan perlu menggunakan JS untuk mendapatkan halaman saat ini dan menghapus tautan ke bagian hash '#' (Anda bisa mendapatkan lokasi yang lain. Lainnya klien will. Jika tautan saat ini tidak diperoleh secara dinamis, tanda tangan halaman setelah berbagi akan gagal.
Perhatikan dinamika di sini, jangan menyambungkannya sendiri, dan mengkodekan urat komponen secara bersamaan.
$.ajax({ type:'GET', url: url, dataType: 'jsonp'}).then((data)=> { wx.config({ debug: true, // Turn on debug mode, the return values of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side, the parameter information will be printed through the log and will only be printed on the PC sisi.4. berhasil diverifikasi melalui pemrosesan antarmuka siap
Setelah informasi konfigurasi diverifikasi, metode Ready akan dieksekusi. Semua panggilan antarmuka harus diperoleh setelah antarmuka konfigurasi mendapatkan hasilnya. Config adalah operasi klien yang tidak sinkron. Oleh karena itu, jika Anda perlu memanggil antarmuka yang relevan saat halaman dimuat, Anda harus menempatkan antarmuka yang relevan dalam fungsi siap untuk dipanggil untuk memastikan eksekusi yang benar. Untuk antarmuka yang dipanggil hanya ketika pengguna memicu, mereka dapat dipanggil secara langsung tanpa menempatkannya dalam fungsi siap.
wx.ready (() => {// alert ('ready'); //$('#onMenMenushareAppMessage').on('click ', () => {// Bagikan dengan teman wx.onMenushareAppMessage ({title:' ', desc:' ke Friends '); // Bagikan ke momen wx.onMenusharetimeline ({title: '', // berbagi judul tautan: shareUrl, // berbagi tautan imgurl: '', // Bagikan ikon sukses: function () {alert ('shared'); // alert ($ ('. pembersihan berbagi // alert ('dibatalkan');}}); });5. Verifikasi Gagal Melalui Antarmuka Kesalahan
Fungsi kesalahan akan dijalankan jika informasi konfigurasi gagal. Jika tanda tangan berakhir, verifikasi akan gagal. Untuk pesan kesalahan tertentu, Anda dapat membuka mode debug konfigurasi, atau Anda dapat melihatnya di parameter RES yang dikembalikan.
wx.error ((res) => {alert (res.errmsg);})6. Antarmuka Dasar
• Berbagi antarmuka momen
wx.onMenusharetimeline ({title: '', // Bagikan tautan judul: '', // Bagikan tautan imgurl: '', // Bagikan ikon sukses: function () {// fungsi panggilan balik dieksekusi setelah pengguna mengonfirmasi pembagian}, batal: function () {// Fungsi Callback Dieksekusi Setelah Pengguna Mengonfirmasi Saham}• Antarmuka untuk dibagikan dengan teman
wx.onmenushareAppMessage ({title: '', // Bagikan judul desc: '', // berbagi deskripsi tautan: '', // Bagikan tautan imgurl: '', // tipe ikon: '', // tipe musik, video atau tautan, tidak mengisinya data link default: '', / / Jika jenis musik, video atau video, Anda harus mengisi data tautan default: '', / / Jika jenis musik, atau video, atau video, atau video, atau video, atau video, atau video, {video, {Function, DATAIAD, DATA -LINK, DATA, / MUSIK, ACIAD: // fungsi panggilan balik dieksekusi setelah pengguna mengonfirmasi berbagi}, cancel: function () {// fungsi callback dieksekusi setelah pengguna membatalkan berbagi}});Jika Anda perlu menambahkan konten yang diperoleh dengan permintaan AJAX Asynchronous ke konten bersama di sini, antarmuka berbagi harus dipanggil lagi dalam fungsi yang berhasil setelah permintaan AJAX dikembalikan, tetapi antarmuka berbagi harus ditempatkan dalam fungsi WX.eady dan tidak dapat dipanggil secara terpisah. Karena operasi berbagi klien adalah operasi sinkron, data menggunakan AJAX belum dikembalikan.
7. Langkah -langkah ini tampak sederhana, tetapi pasti ada banyak masalah selama debugging , karena antarmuka JSSDK masih memiliki banyak batasan. Saya tidak sengaja melangkah di lubang.
8. Akhirnya, saya merangkum antarmuka ini .
'Gunakan ketat'; let wxdefaultOptions = {debug: true, appid: '', timestamp: 0, noncestr: '', tanda tangan: '', jsapilis: ['centangjsapi', 'onMenusharimeline', 'onMenushareappMessage', 'onMenushareQeline', 'onMenushareappMessage', 'onMenushareQeline', 'onMenushareappMessage', 'onMenushareQeline', 'OnMenushareAppMessage', 'onMenushareQeline', 'OnMenusharareAppMessage', 'onMenushareQely' OnmenushareAppMessage ',' OnMenushareQely 'OnMenushareAppMessage', 'OnMenushareQel 'showMenuItems', 'hideAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'unggahvoice', 'downloadvoice', 'pilihImage', 'previewImage', 'unggah', 'unduhan', 'getNetworkType', 'openlocation', 'getlocation', 'hideoptionMenu', 'showoptionMenu', 'closeWindow', 'scanqrow', scanpay ',' choospay ',' choospay ',' scanoWcR ',' scanpay ',' scanpay ',' scanpay ',' scanpay ',' cooloption ',' cooloptionMenu ',' choeSpay ', 'OpenProductSpecificView', 'AddCard', 'ChooseCard', 'OpenCard']}; // Biarkan saham = 'http: // xxx' + location.pathname; Biarkan getWxParam = (url, wxoptions) => {let url = location.href.spliT = (url, wxoptions) => {let url = location. url = encodeuricomponent (url); let promise = new Promise((resolve, reject)=> { $.ajax({ type:'GET', url: 'http://xxx/xxx?param='+url, dataType: 'jsonp' }) .then((data)=> { let wxParam = data; console.log(wxParam); wxOptions.appId = 'WXEB5C3F4A03B880F0'; }) resolve ();}, (error) => {console.log (kesalahan); Return Promise;} // Bagikan ke momen Let shareSocial = (param) => {wx.onMenusharetimeline ({title: param.title, // Bagikan tautan: param.link, // Bagikan tautan IMGURL: PARAM.ImGURL, // Bagikan Ikon Sukses: Function () {// Callback Param. {// Callback Function param.failcalback () dieksekusi setelah pengguna membatalkan berbagi; Sukses: Fungsi) {param.sucallback (); wx.ready (() => {// Bagikan ke momen shareSocial (param); sharetofriends (param);})} function callwx (param, wxoptions) {getWxParam (param.url, wxoptions) .then () => {jssdk (param);}) {/PARAM = () => {jssdk (param); Judul: '', desc: '', tautan: '', imgurl: '', sucallback: func, failcalback: func} module.exports = {wxdefaultOptions, // Ubah konfigurasi konfigurasi, // konfigurasi default, kustomisasi konten berbagi weChat setelah konfigurasi dan siap,}Artikel ini telah dikompilasi menjadi "Ringkasan Keterampilan Pengembangan JavaScript WeChat", dan semua orang dipersilakan untuk belajar dan membaca.
Saya ingin merekomendasikan tutorial tentang program mini WeChat yang sangat prihatin: "Tutorial Pengembangan Program Mini WeChat" telah disusun dengan cermat oleh editor semua orang, saya harap Anda menyukainya.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.