Artikel ini telah membagikan versi terperinci dari antarmuka JS WeChat untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Instruksi dasar
Petunjuk Penggunaan
1.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
CATATAN: PEMBUATAN DUKUNGAN Menggunakan metode pemuatan modul AMD/CMD Modul
2. Suntikkan dan konfigurasikan antarmuka konfigurasi
Semua halaman yang perlu menggunakan JSSDK terlebih dahulu harus menyuntikkan informasi konfigurasi, jika tidak mereka tidak akan dipanggil (URL yang sama perlu dipanggil hanya sekali, dan aplikasi web spa yang mengubah URL dapat dipanggil setiap kali URL berubah).
wx.config ({debug: true, // Nyalakan mode debug, nilai pengembalian semua API yang disebut akan diberitahu pada klien. Untuk melihat parameter yang diteruskan, Anda dapat membukanya di sisi PC, informasi parameter akan dicetak melalui login dan hanya akan dicetak di sisi PC. non -cestr: '', // Diperlukan, string acak yang dihasilkan untuk tanda tangan tanda tangan: '', // Diperlukan, tanda tangan ditampilkan dalam Lampiran 1 JSAPILIST: [] // Diperlukan, daftar antarmuka JS yang akan digunakan, dan semua antarmuka JS terdaftar dalam Lampiran 2});3. Verifikasi melalui antarmuka siap
wx.ready (function () {// Setelah informasi konfigurasi diverifikasi, metode siap yang akan dijalankan. Semua panggilan antarmuka harus diperoleh setelah antarmuka konfigurasi mendapatkan hasilnya. Konfigurasi adalah operasi yang tidak sinkron dari klien. Oleh karena itu, jika Anda perlu memastikannya, dan secara langsung. tidak perlu ditempatkan dalam fungsi siap.});4. Verifikasi Antarmuka kesalahan gagal
wx.error (function (res) {// Jika informasi konfigurasi gagal memverifikasi, fungsi kesalahan akan dijalankan. Jika tanda tangan kedaluwarsa, verifikasi akan gagal. Untuk pesan kesalahan tertentu, Anda dapat membuka mode debug konfigurasi untuk dilihat, atau Anda dapat melihatnya dalam parameter res yang dikembalikan. Untuk SPAS, Anda dapat memperbarui tanda tangan di sini.});Instruksi Panggilan Antarmuka
Semua antarmuka dipanggil melalui objek WX (juga dapat digunakan dengan objek jweixin). Parameter adalah objek. Selain parameter yang perlu dilewati setiap antarmuka itu sendiri, ada juga parameter umum berikut:
1. Sukses: Fungsi panggilan balik dieksekusi ketika antarmuka berhasil.
2. Gagal: Fungsi panggilan balik dieksekusi ketika antarmuka panggilan gagal.
3. Lengkap: Fungsi panggilan balik dieksekusi ketika panggilan antarmuka selesai, dan akan dieksekusi terlepas dari keberhasilan atau kegagalan.
4. Batal: Fungsi panggilan balik ketika pengguna mengklik untuk membatalkan, hanya beberapa API yang membuat pengguna membatalkan operasi yang akan digunakan.
5. Pemicu: Metode yang mendengarkan pemicu saat tombol diklik di menu. Metode ini hanya mendukung antarmuka terkait dalam menu.
Fungsi di atas semuanya memiliki parameter, tipe objek, selain data yang dikembalikan oleh setiap antarmuka itu sendiri, ada juga ERRMSG properti umum, yang format nilainya adalah sebagai berikut:
1. Saat panggilan berhasil: "xxx: ok", di mana xxx adalah nama antarmuka panggilan
2. Saat pengguna membatalkan: "xxx: batal", di mana xxx adalah nama antarmuka yang disebut
3. Saat panggilan gagal: Nilainya adalah pesan kesalahan spesifik
Antarmuka dasar
Tentukan apakah versi klien saat ini mendukung antarmuka JS yang ditentukan
wx.checkjsapi ({jsapilist: ['pilihImage'] // Daftar antarmuka JS yang perlu dideteksi, semua antarmuka JS tercantum dalam Lampiran 2, Success: Function (res) {// Return sebagai pasangan nilai kunci, nilai API yang tersedia benar, dan tidak tersedia sebagai false/ untuk misalnya: {"checkResult": {"pilihImage": true}, "errmsg": "checkjsapi: ok"}});Berbagi Antarmuka
Dapatkan status klik tombol "Bagikan ke Moments" dan sesuaikan antarmuka konten berbagi
wx.onMenusharetimeline ({title: '', // Bagikan tautan judul: '', // Bagikan tautan IMGURL: '', // Bagikan Ikon Sukses: Function () {// Fungsi Callback Dieksekusi Setelah Pengguna Mengonfirmasi Berbagi}, Batal: Fungsi () {// Fungsi Callback Dieksekusi Setelah Pengguna Membagikan}});Dapatkan status klik tombol "Bagikan ke Teman" dan sesuaikan antarmuka konten berbagi
wx.onMenushareAppMessage ({title: '', // Bagikan judul desc: '', // berbagi deskripsi tautan: '', // bagikan tautan imgurl: '', // tipe ikon: '', // tipe saham, video atau tautan, tidak ada video yang disediakan, Data, Anda harus mengisi data, '', {// fungsi panggilan balik dieksekusi setelah pengguna mengonfirmasi berbagi}, cancel: function () {// fungsi callback dieksekusi setelah pengguna membatalkan berbagi}});Dapatkan status klik tombol "Bagikan ke QQ" dan sesuaikan antarmuka konten berbagi
wx.onMenuShareQQ({ title: '', // Share title desc: '', // Share description link: '', // Share link imgUrl: '' // Share icon success: function () { // Callback function executed after the user confirms the sharing}, cancel: function () { // Callback function executed after the user cancels the sharing}});Dapatkan status klik tombol "Bagikan ke Tencent Weibo" dan sesuaikan antarmuka konten berbagi
wx.onMenuShareWeibo({ title: '', // Share title desc: '', // Share description link: '', // Share link imgUrl: '' // Share icon success: function () { // Callback function executed after the user confirms the sharing}, cancel: function () { // Callback function executed after the user cancels the sharing}});Antarmuka gambar
Ambil gambar atau pilih gambar dari antarmuka album ponsel
wx.chooseImage ({Success: function (res) {var localIds = res.localids; // Mengembalikan daftar ID lokal dari foto yang dipilih. LocalId dapat menampilkan gambar sebagai atribut SRC dari tag IMG}});Pratinjau antarmuka gambar
wx.previewImage ({current: '', // URL tautan gambar yang saat ini ditampilkan: [] // Daftar tautan gambar yang perlu dipratinjau});Unggah antarmuka gambar
wx.uploadImage ({localid: '', // ID lokal dari gambar yang akan diunggah, diperoleh dari antarmuka Pilihan ISShowProgressTips: 1 // standarnya adalah 1, dan prompt kemajuan ditampilkan sukses: function (res) {var serverid = res.serverid; // kembalikan id server ID dari gambar} {var serverid = res.serverid;Catatan: Anda dapat mengunduh gambar yang diunggah oleh WeChat menggunakan antarmuka file multimedia. ServerID yang diperoleh di sini adalah media_id. Dokumen referensi ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.html
Unduh antarmuka gambar
wx.downloadImage ({serverId: '', // ID sisi server dari gambar yang akan diunduh, diperoleh dari antarmuka unggahan isshowprogressTips: 1 // standarnya adalah 1, dan prompt kemajuan ditampilkan keberhasilan: function (res) {var localid = res.localid; // kembali ke id lokal setelah gambar (res) {var localid = res.localid; // kembali ke id lokal setelah gambar (res) {var localid = res.localid; // kembali ke id lokal setelah gambar (res) {var localid = res.localid; // kembali ke id lokal setelah gambar (res) {var localid = res.localid; // kembali ke id lokal setelah gambar (res) {var localid = res.localid; // kembali ke id local iD setelah gambar (res) {res.localid;Antarmuka audio
Mulai perekaman antarmuka
wx.startrecord ();
Berhenti merekam antarmuka
wx.stoprecord ({Success: function (res) {var localid = res.localid;}});Antarmuka berhenti otomatis untuk memantau perekaman
wx.onvoicerecordend ({// Callback lengkap akan dieksekusi ketika waktu perekaman melebihi satu menit dan tidak berhenti. Lengkapi: function (res) {var localid = res.localid;}});Mainkan antarmuka suara
wx.playvoice ({localid: '' // ID lokal audio yang akan dimainkan, diperoleh oleh stopRecord Interface});Jeda antarmuka pemutaran
wx.pausevoice ({localid: '' // ID lokal audio yang perlu dijeda, diperoleh dengan antarmuka stoprecord});Hentikan Antarmuka Playback
wx.stopvoice ({localid: '' // id lokal audio yang perlu dihentikan, diperoleh oleh stoprecord antarmuka});Memantau antarmuka pemutaran suara
wx.onvoicePlayEnd ({serverId: '', // ID sisi server audio yang perlu diunduh, dapatkan keberhasilan: function (res) {var localid = res.localid; // kembalikan id lokal audio}});Unggah antarmuka suara
wx.uploadVoice({localId: '', // The local ID of the audio that needs to be uploaded, obtained from the stopRecord interface isShowProgressTips: 1// The default is 1, displaying the progress prompt success: function (res) { var serverId = res.serverId; // Return the server-side ID of the audio }});Catatan: Anda dapat mengunduh suara yang diunggah oleh antarmuka file multimedia WeChat. ServerID yang diperoleh di sini adalah media_id. Dokumen referensi ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.html
Unduh Antarmuka Suara
wx.downloadVoice ({serverId: '', // ID sisi server audio yang perlu diunduh, diperoleh dari interfoCeVoice antarmuka isShowprogresstips: 1 // default adalah 1, dan prompt kemajuan ditampilkan keberhasilan: function (res) {var localid = res.localid;// return the the success: function (res) {var localid = res.Antarmuka yang cerdas
Identifikasi audio dan kembali ke antarmuka hasil pengakuan
wx.translatevoice ({localid: '', // ID lokal audio yang perlu dikenali, isShowProgressTips: 1, // standarnya adalah 1, menampilkan kemajuan yang cepat sukses: function (res) {alert (res.translateresult); // hasil pengenalan suara}});Informasi peralatan
Dapatkan Antarmuka Status Jaringan
wx.getNetworkType ({Success: function (res) {var networkType = res.networkType; // return jaringan jaringan 2g, 3g, 4g, wifi}});Lokasi Geografis
Gunakan peta weChat bawaan untuk melihat antarmuka lokasi
wx.openlocation ({latitude: 0, // latitude, bilangan titik mengambang, kisaran adalah 90 ~ -90 bujur: 0, // bujur, angka floating point, kisaran adalah 180 ~ -180. Nama: '', // kisaran nama: '', // Detail alamat: 1, // peta level zoom, nilai shaping, kisaran 1 ~ kisaran 1 ~ 28. ditampilkan di bagian bawah antarmuka posisi tampilan, Anda dapat mengklik untuk melompat});Dapatkan antarmuka geolokasi
wx.getLocation ({timestamp: 0, // Posisi timestamp, disediakan noncestr: '', // Posisi tanda tangan acak, hanya disediakan bila kompatibel dengan versi 6.0.2, addrSign: '', // position Signature, disediakan bila kompatibel dengan versi 6.0.2, lihat lampiran 4 untuk detail. Fungsi) {RES) {VAR LANDIBE; LATIDE; lihat LATIBUDS. 90 ~ -90 var latitude = res.latitude; // bujur, angka floating, kisaran 180 ~ -180.Operasi antarmuka
Sembunyikan antarmuka menu wx.hideoptionmenu () di sudut kanan atas;
Tampilkan antarmuka menu wx.showoptionmenu () di sudut kanan atas;
Tutup antarmuka jendela web saat ini wx.closewindow ();
Batch Sembunyikan Antarmuka Tombol Fungsi
wx.hidemenuitems ({menulist: [] // Untuk menyembunyikan item menu, lihat Lampiran 3});Antarmuka tombol fungsi tampilan batch
wx.showMenuitems ({menulist: [] // Semua item menu yang akan ditampilkan ditampilkan dalam Lampiran 3});Sembunyikan semua antarmuka tombol non-base wx.hideallnonbasemenuitem ();
Tampilkan semua fungsi antarmuka tombol wx.showallnonbaseMenuitem ();
Pindai WeChat
Klik antarmuka pemindaian WeChat
wx.scanqrcode ({desc: 'scanqrcode desc', NeedResult: 0, // defaultnya adalah 0, hasil pemindaian diproses oleh weChat, dan 1 secara langsung mengembalikan hasil pemindaian, scantype: "qrcode", "barcode"], // Anda dapat spesifikasi apakah ke scan {qrcode "," Barcode "], // Anda dapat spesifikasi apakah ke scan {qrcode", "Barcode"], // Anda dapat spesifikasi apakah ke scan {qrcode "," Barcode "], // Anda dapat spesifikasi apakah ke scan {qrcode", "Barcode"], // Anda dapat spesifikasi apakah ke scan {qrcode "," Barcode "], / MUSE You dapat spesifik res.ResultStr; // ketika kebutuhan adalah 1, hasilnya dikembalikan dengan memindai kode}});Alamat panen
Edit Antarmuka Alamat Pengiriman
WX.EditAddress (Timestamp: 0, // Lokasi tanda waktu tanda tangan, hanya jika perlu kompatibel dengan versi 6.0.2, non -cestr: '', // Lokasi tanda tangan acak, hanya jika perlu kompatibel dengan versi 6.2, addrsign: '', // Lokasi tanda tangan, hanya jika perlu untuk disusun. nama pengguna = res.username; Alamat Level VaR Alamat Var = Res.address; // Informasi Pengiriman Rinci Var NationalCode = Res.NationalCode;
Dapatkan antarmuka alamat pengiriman terdekat
wx.getlatestAddress ({timestamp: 0, // Lokasi tanda waktu tanda tangan, hanya jika itu perlu kompatibel dengan versi 6.0.2, noncestr: '', // Lokasi tanda tangan acak, hanya jika perlu dikompatibel. (res) {var username = res.username; // Alamat Pengiriman Nasional Alamat Tingkat Ketiga Alamat var = res.address;Toko WeChat
Lompat ke antarmuka halaman produk WeChat
wx.openproductSpecificView ({productId: '', // produk idviewType: '' // 0. Nilai default, detail produk biasa halaman 1. Pindai detail produk halaman 2. Simpan Halaman Rincian Produk});Kupon Kartu WeChat
Lepaskan daftar kupon kartu untuk toko dan dapatkan daftar pilihan pengguna
wx.choosecard ({shopId: '', // Store ID CardType: '', // Card Type CardID: '', // Kartu ID Timestamp: 0, // Kartu ID Timestamp: Noncestr: '', // Card Voucher Signature Random String Cardsign: '', // Card Voucher Signature, lihat Appendix 6 untuk detail. Informasi daftar voucher kartu yang dipilih oleh pengguna}});Tambahkan antarmuka kupon kartu dalam batch
wx.addcard ({cardlist: [{cardid: '', cardext: ''}], // daftar kupon kartu yang perlu ditambahkan sukses: fungsi (res) {var cardlist = res.cardlist; // informasi daftar kupon kartu}});Periksa antarmuka kupon kartu di paket kartu weChat
wx.opencard ({cardlist: [{cardid: '', code: ''}] // Daftar kupon kartu yang akan dibuka});Pembayaran WeChat
Memulai permintaan pembayaran weChat
wx.choosewxpay ({timestamp: 0, // pembayaran tanda tangan timestamp noncestr: '', // Paket Paket Random String Random: '', // Rincian pesanan diperpanjang string, lihat Lampiran 5, paySign: '', // tanda tangan pembayaran untuk detail, lihat Lampiran 5});Lampiran 1 - Algoritma Tanda Tangan JSSDK
jsapi_ticket
Sebelum menghasilkan tanda tangan, Anda harus terlebih dahulu memahami jsapi_ticket. JSAPI_Ticket adalah tiket sementara yang digunakan oleh akun resmi untuk menghubungi antarmuka WeChat JS. Dalam keadaan normal, periode validitas JSAPI_Ticket adalah 7200 detik, yang diperoleh melalui Access_Token. Karena jumlah panggilan API untuk mendapatkan JSAPI_Ticket sangat terbatas, sering menyegarkan JSAPI_Ticket akan menyebabkan panggilan API terbatas dan memengaruhi bisnis mereka sendiri. Pengembang harus menyimpan jsapi_ticket secara global dalam layanan mereka.
1. Lihat dokumen berikut untuk mendapatkan access_token (berlaku selama 7200 detik, pengembang harus cache access_token secara global dalam layanan mereka): ../12/4b08382e91217687730a2dfc71e9218c.html
2. Gunakan akses_token yang diperoleh pada langkah pertama untuk meminta jsapi_ticket (valid selama 7200 detik, pengembang harus cache jsapi_ticket secara global dalam layanannya): https://api.weixin.qq.com/cgi-bin/ticket/getticket?cacsin.qq.com/cgi--bin/ticket/getticket?tapixin=okey
Berhasil mengembalikan JSON berikut:
{"errcode": 0, "errmsg": "ok", "ticket": "bxldikrxvbtpdhsm05e5u5suoxnkd8-41zo3mhkoyn5ofkwitdggnr2fwj0m9e8nyzwkvzvdvdvdvtaugsdshkksdsdshkkksdsdsdshes" "" "" "" "" "" "" "ucksdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdggnr2Setelah mendapatkan JSAPI_Ticket, Anda dapat menghasilkan tanda tangan untuk verifikasi izin JSSDK.
Algoritma tanda tangan
Aturan pembuatan tanda tangan adalah sebagai berikut: Bidang yang berpartisipasi dalam tanda tangan termasuk noncestr (string acak), jsapi_ticket yang valid, stempel waktu (cap waktu), URL (URL dari halaman web saat ini, tidak termasuk # dan bagian selanjutnya). Setelah menyortir semua parameter untuk ditandatangani dari kecil ke besar (urutan kamus) sesuai dengan kode ASCII dari nama bidang, format pasangan nilai kunci URL (yaitu, key1 = value1 & key2 = value2 ...) digunakan untuk menyambung ke string string1. Perlu dicatat di sini bahwa semua nama parameter adalah karakter kecil. String1 dienkripsi, dan nama bidang dan nilai bidang keduanya nilai asli dan tidak ada URL Escape yang dilakukan.
Yaitu, tanda tangan = sha1 (string1). Contoh:
• noncestr = wm3wzytpz0wzccnw
• jsapi_ticket = sm4aovdwfpe4dxkxges8vmcpggvi4c3vm0p37wvucfvkvay_90u5h9nbslyy3-sl-hhtdfl2fzfy1aochkp7qg
• Timestamp = 1414587457
• url = http: //mp.weixin.qq.com
Langkah 1. Setelah menyortir semua parameter yang akan ditandatangani dari kecil ke besar (urutan kamus) sesuai dengan kode ASCII dari nama bidang, menyambungkannya ke string string1 menggunakan format pasangan nilai kunci URL (yaitu, key1 = value1 & key2 = value2 ...):
jsapi_ticket = sm4aovdwfpe4dxkxges8vmcpggvi4c3vm0p37wvucfvkvay_90u5h9nbslyy3-sl-hhtdfl 2FZFY1AOCHKP7QG & NONCEST = WM3WZYTPZ0WZCCNW × TAMP = 1414587457 & url = http: //mp.weixin.qq.com
Langkah 2. Masuk String1 dengan SHA1 dan dapatkan tanda tangan:
F4D90DAF4B3BCA3078AB155816175BA34C443A7B
Hal -hal yang perlu diperhatikan
1. Noncestr dan stempel waktu yang digunakan untuk tanda tangan harus sama dengan noncestr dan cap waktu di wx.config.
2. URL yang digunakan untuk tanda tangan harus menjadi URL lengkap dari halaman yang memanggil antarmuka JS.
3. Untuk alasan keamanan, pengembang harus menerapkan logika tanda tangan di sisi server.
Lampiran 2 - Daftar semua antarmuka JS
• Onmenusharetimeline
• OnmenushareAppMessage
• Onmenushareqq
• Onmenushareweibo
• Startrecord
• StopRecord
• Onvoicerecordend
• Playvoice
• Pausevoice
• Stopvoice
• Onvoiceplayend
• Unggahvoice
• Downloadvoice
• PilihImage
• PreviewImage
• Unggahimage
• DownloadImage
• TranslateVoice
• GetNetWorkType
• Openlocation
• Getlocation
• HideOptionMenu
• Showoptionmenu
• Hidemenuitems
• Showmenuitems
• HideAllnonBaseMenuitem
• ShowallnonBaseMenuitem
• CloseWindow
• Scanqrcode
• ChooseWxPay
• getlatestAddress
• EditAddress
• OpenProductSpecificView
• AddCard
• ChooseCard
• OpenCard
Lampiran 3 - Daftar Semua Tombol
Kategori dasar
• Laporan: "Menuitem: ExposeArticle"
• Sesuaikan font: "Menuitem: SetFont"
• Mode siang hari: "Menuitem: DayMode"
• Mode malam: "Menuitem: Nightmode"
• Refresh: "Menuitem: Refresh"
• Lihat akun resmi (ditambahkan): "Menuitem: Profil"
• Lihat akun resmi (tidak ditambahkan): "Menuitem: AddContact"
Kategori komunikasi
• Kirim ke teman: "Menuitem: Bagikan: AppMessage"
• Bagikan ke saat -saat: "Menuitem: Bagikan: Garis Waktu"
• Bagikan ke QQ: "Menuitem: Bagikan: QQ"
• Bagikan ke Weibo: "Menuitem: Bagikan: Weiboapp"
• Koleksi: "Menuitem: Favorit"
• Bagikan ke FB: "Menuitem: Bagikan: Facebook"
Kelas Perlindungan
• Debug: "Menuitem: jsdebug"
• Edit Tag: "Menuitem: Edittag"
• Hapus: "Menuitem: Hapus"
• Tautan Salin: "Menuitem: CopyUrl"
• Halaman web asli: "Menuitem: OriginPage"
• Mode Membaca: "Menuitem: ReadMode"
• Buka di QQ Browser: "Menuitem: OpenWithQQBrowser"
• Buka di Safari: "Menuitem: Openwithsafari"
• Email: "Menuitem: Bagikan: Email"
• Beberapa akun publik khusus: "Menuitem: Bagikan: Merek"
Lampiran 4 - Algoritma Generasi Tanda Tangan Lokasi dan Alamat
Aturan generasi AddRSign sama dengan verifikasi izin izin JSSDK (lihat Lampiran 1), tetapi parameter tanda tangan yang berpartisipasi berbeda. Parameter tanda tangan yang berpartisipasi dalam AddRSign adalah: AppID, URL (URL Web saat ini), Timestamp, NonCestr, Accessoken (kredensial otorisasi pengguna, silakan merujuk ke protokol OAuth2.0 yang akan diperoleh).
Lampiran 5 - Bidang Ekstensi Pembayaran dan Algoritma Generasi Tanda Tangan
Detail Pesanan (Paket) Definisi String Ekstensi
Ketika pedagang mengarahkan API JS, pedagang perlu menentukan detail pesanan saat ini dan menggabungkan detail pesanan ke dalam paket dengan cara tertentu. Setelah JS API dipanggil, WeChat akan menghasilkan pesanan prabayar melalui konten paket. Berikut ini akan menentukan daftar bidang yang diperlukan dan metode tanda tangan untuk paket. Antarmuka perlu dicatat: Semua parameter yang masuk adalah tipe string!
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.