Baru-baru ini, perusahaan membuat halaman H5 untuk dipilih oleh siswa. Halaman ini terutama digunakan di WeChat dan perlu menambahkan fungsi berbagi WeChat;
Artikel ini terutama mencatat hal-hal yang perlu diperhatikan saat memanggil antarmuka berbagi WeChat;
1. Untuk kerangka kerja Angular1 yang digunakan di front-end, Anda harus terlebih dahulu memasukkan file antarmuka WeChat pada halaman indeks;
<skrip src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. Tulis fungsi berbagi WeChat di file myApp.run. Perhatikan bahwa fungsi ini perlu mendapatkan dan mengurai URL halaman saat ini, lalu mengirimkannya ke backend untuk menghasilkan tanda tangan yang sesuai dan langsung mengunggah kodenya;
// fungsi berbagi WeChat function wxShare() { var url = $location.absUrl().split('#')[0]; kode == 0) { var respanse = res.data.data; Saat mode debugging diaktifkan, nilai kembalian dari semua panggilan api akan diberitahukan di sisi klien. Jika Anda ingin melihat parameter yang masuk, Anda dapat membukanya di sisi PC log, dan appId hanya akan dicetak di sisi PC. respanse.appId, stempel waktu: respanse.timestamp, // Wajib, buat stempel waktu tanda tangan nonceStr: respanse.nonceStr, // Wajib, buat tanda tangan string acak dari tanda tangan. tanda tangan: respanse.signature,//Wajib, tanda tangan jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']//Wajib, daftar antarmuka JS yang perlu digunakan}); ) }Setelah menguraikan URL saat ini, kirimkan ke antarmuka back-end. Back-end perlu mengembalikan appId, stempel waktu, string acak, dan tanda tangan, lalu menambahkan daftar antarmuka (jsApiList) secara manual sesuai kebutuhan bentuk array. Saya hanya membutuhkannya di sini. Perlu memanggil antarmuka berbagi;
Saat melakukan debug, Anda dapat mengubah debug menjadi true, sehingga setiap kali antarmuka WeChat dipanggil, informasi antarmuka akan diperingatkan, sehingga memudahkan untuk memeriksa apakah panggilan antarmuka itu normal;
3. Setelah fungsi ini, sesuaikan konten berbagi, kodenya sebagai berikut;
wx.ready(function () { var obj = { title: 'Kompetisi tim SPBCN telah mulai melakukan voting!', // Bagikan judul desc: 'Kompetisi tim SPBCN telah mulai melakukan voting, datang dan dukung kami!', // Bagikan Deskripsi tautan: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // Bagikan tautan, nama atau jalur domain tautan harus konsisten dengan nama domain keamanan JS akun publik yang sesuai dengan saat ini halaman // Tautan ini adalah tautan pengalihan karena diperlukan untuk mendapatkan kode pengguna, tetapi tautan ini tidak dapat langsung menulis tautan ke WeChat untuk mendapatkan kode. // Oleh karena itu, Anda perlu mengeklik dan memuat ulang halaman baru untuk menerapkan pengalihan dan membuka kembali Tautan WeChat untuk mendapatkan kode, untuk mengimplementasikan fungsi memperoleh informasi pengguna: 'http://cdn.spbcn.org/img/logo-image.png', // Bagikan ikon gagal: fungsi (res) { peringatan(JSON.stringify(res)) ; }; // 2.1 Memantau berbagi ke teman, klik tombol, konten berbagi yang disesuaikan, dan antarmuka hasil berbagi wx.onMenuShareAppMessage(obj); // 2.2 Memantau berbagi ke klik tombol Momen, antarmuka berbagi konten dan hasil yang disesuaikan wx.onMenuShareTimeline (obj) ; // 2.3 Pantau berbagi ke klik tombol QQ, sesuaikan konten berbagi dan antarmuka hasil berbagi wx.onMenuShareQQ(obj); 2.4 Pantau klik tombol bagikan di Weibo, sesuaikan konten berbagi dan antarmuka hasil berbagi wx.onMenuShareWeibo(obj); diMenuShareQZone(obj })wx.ready secara otomatis dijalankan setelah wx.config. Saya mendefinisikan objek umum untuk berbagi konten, dan kemudian memanggilnya secara langsung. Anda juga dapat menentukan konten yang berbeda untuk berbagi teman, lingkaran pertemanan, Weibo, dll Dokumentasi antarmuka WeChat untuk detailnya;
Penekanan utamanya adalah pada tautan berbagi. Tautan tersebut harus menggunakan nama domain aman JS yang ditetapkan oleh akun resmi Anda, jika tidak, pembagian tersebut tidak akan berhasil;
Gejala kegagalan berbagi adalah gambar tautan berbagi tidak dapat memuat gambar kustom Anda, dan judul berbagi salah;
5. Proyek saya adalah untuk pemungutan suara, jadi saya perlu mendapatkan kode pengguna setiap kali saya mengklik. Jika Anda hanya membagikan artikel dan tidak memerlukan informasi pengguna, cukup ubah tautan ke tautan artikel Anda;
6. Untuk kategori voting, saya telah memberikan perlakuan khusus di sini, yaitu mengarahkan tautan. Semua orang tahu bahwa ada dua cara bagi H5 untuk mendapatkan informasi pengguna WeChat. Yang pertama adalah dengan mengikuti akun resmi WeChat; pengguna untuk mendapatkan informasi publik pengguna. Pengguna mengklik OK. Namun, kedua hal ini perlu digabungkan menjadi tautan WeChat khusus sesuai dengan persyaratan WeChat. Oleh karena itu, nama domain tersebut disertakan dengan WeChat dan bukan nama domain aman JS dari akun publik kami;
7. Oleh karena itu, untuk tautan yang dibagikan, jika Anda masih perlu mendapatkan kode pengguna, Anda harus menggunakan metode lain untuk mencapainya. Yang saya gunakan adalah menambahkan halaman kosong, dan setelah halaman dimuat, lompat ke WeChat untuk mendapatkannya link kodenya, http://dev.spbcn.org/wechat-vote-phone/redirect.html Link ini merupakan halaman kosong. Kode untuk halaman ini adalah sebagai berikut;
jendela.onload = fungsi() { // Tautan pengalihan sama dengan tautan untuk mendapatkan kode pengguna di jendela akun resmi WeChat.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. Metode ini memiliki kelemahan, yaitu menambahkan halaman kosong tambahan. Saya belum memikirkan cara yang baik.
9. Jika langkah ini tidak ditambahkan, tautan yang dibagikan akan ditampilkan secara normal, tetapi kode tidak dapat diperoleh, dan backend tidak dapat menentukan pengguna, sehingga tidak dapat membatasi pengguna untuk memilih;
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.