Html5 menerapkan proses berbagi dan menyesuaikan konten di WeChat

Sebuah proyek baru-baru ini memerlukan berbagi WeChat dan kebutuhan untuk menyesuaikan konten berbagi WeChat. Karena ini adalah pertama kalinya saya mengetahui berbagi WeChat, saya mencatat beberapa masalah yang dihadapi selama proses tersebut, serta keseluruhan proses. menyelesaikan fungsinya.

Berikut ini adalah proses umumnya (detailnya ditempatkan di setiap tahap)

• Instal weixin-js-sdk
• Inisialisasi berbagi WeChat
• Konfigurasikan WeChat untuk berbagi konten khusus (kirim ke teman, kirim ke Momen)

npm install weixin-js-sdk --save-dev

Untuk instruksi spesifik, silakan merujuk ke dokumentasi resmi WeChat.

Karena banyak proyek yang saya kerjakan memerlukan penggunaan fungsi berbagi WeChat, kode yang dibagikan di WeChat akan dirangkum di sini.

Api pada kode di bawah ini sebenarnya adalah permintaan aksio

 impor wx dari 'weixin-js-sdk'impor api dari '@/api'const wxApi = { /** * [inisialisasi wxRegister WeChat Api] * @param {Function} panggilan balik [fungsi panggilan balik siap pakai] */ wxRegister (panggilan balik, url) { let query = { // Url di sini harus url yang sama persis dengan halaman yang ingin Anda bagikan, dan url base64 perlu dikonversi: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // Aktifkan mode debugging appId: data.appId, // Diperlukan, pengenal unik dari stempel waktu akun resmi: data.timestamp, // Diperlukan, buat stempel waktu dari tanda tangan nonceStr: data.nonceStr, // Diperlukan, buat string acak dari tanda tangan: data.signature, // Wajib, tanda tangan, lihat Lampiran 1 jsApiList: data.jsApiList // Wajib, daftar antarmuka JS yang perlu digunakan, lihat Lampiran 2 untuk daftar semua antarmuka JS }) }) wx.ready((res) => { // Jika diperlukan Sesuaikan metode panggilan balik yang siap jika (panggilan balik) { panggilan balik() } }) },}

Catatan: Jika Anda perlu mengonversi base64 di atas, Anda dapat menggunakan js-base64

3. Konfigurasikan WeChat untuk berbagi konten yang disesuaikan (kirim ke teman, kirim ke Momen)

Langkah kedua adalah menginisialisasi konfigurasi pengemasan untuk WeChat, tetapi masih kekurangan fungsi berbagi dan fungsi lainnya.

 //Tambahkan /*** setelah fungsi wxRegister [Berbagi Timeline kustom WeChat berbagi ke Momen]* @param {[type]} opsi [berbagi informasi]* @param {[type]} sukses [panggilan balik berhasil]* @param {[ ketik]} kesalahan [panggilan balik gagal]*/ShareTimeline (opsi) {wx.updateTimelineShareData({ title: option.title, // Bagikan tautan judul: option.link, // Bagikan tautan imgUrl: option.imgUrl, // Bagikan ikon sukses () { // Pengaturan berhasil}, batal () { // Pengaturan gagal}})},/*** [ShareAppMessage Berbagi WeChat yang disesuaikan ke teman]* @ param {[type]} opsi [berbagi informasi]* @param {[type]} sukses [callback sukses]* @param {[type]} error [callback gagal]*/ShareAppMessage (opsi) {wx.updateAppMessageShareData({ title: option.title, // Bagikan judul desc: option.desc, // Bagikan tautan deskripsi: option.link, // Bagikan tautan imgUrl: option.imgUrl, // Bagikan ikon sukses () { // Setting berhasil}, batal () { // Setting gagal}})}

4. Saat memanggil halaman tersebut

 // vue sebagai contoh // Untuk parameter fungsi berikut, lihat metode di atas import wx from 'file enkapsulasi Anda' mount(){ let base64 = require('js-base64').Base64 let url = base64. menyandikan( window.location.href) wx.wxRegister(this.wxRegCallback,url)},metode:{ // Callback jdk yang disesuaikan wxRegCallback () {}, // Fungsi yang disesuaikan untuk berbagi dengan teman wxShareAppMessage(){ let option = { title:'', // Bagikan judul desc: '', // Bagikan tautan deskripsi: ' ', // Bagikan tautan imgUrl: '' // Bagikan ikon } // Suntikkan metode umum wx.ShareAppMessage(option) }, // Fungsi yang disesuaikan untuk berbagi ke lingkaran teman wxShareTimeline(){ let option = { title:'',// Bagikan judul desc: '', // Bagikan tautan deskripsi: '', // Bagikan tautan imgUrl: '' // Bagikan ikon } // Menyuntikkan metode umum wx.ShareTimeline(option) }}

Di atas adalah proses berbagi di WeChat. Jika ada kekurangan, harap tunjukkan.

Berbagi WeChat hanya dapat diuji pada perangkat nyata

Nama domain yang menggunakan format localhost tidak dapat lolos verifikasi WeChat

Di atas adalah implementasi HTML5 dari berbagi WeChat dan konten khusus yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu!