บทความนี้สรุปการใช้งานของ WeChat JSSDK และแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. ผูกชื่อโดเมน
2. เปิดไฟล์ JS
แนะนำไฟล์ JS ต่อไปนี้บนหน้าเว็บที่ต้องการเรียกอินเตอร์เฟส JS (สนับสนุน https): http://res.wx.qq.com/open/js/jweixin-1.0.js
โปรดทราบว่าหากหน้าของคุณเปิดใช้งาน https ให้แน่ใจว่าได้แนะนำ https://res.wx.qq.com/open/js/jweixin-1.0.0.js มิฉะนั้นคุณจะไม่สามารถใช้ JSSDK ในระบบ iOS9.0 หรือสูงกว่า
3. ตรวจสอบการกำหนดค่าผ่านอินเตอร์เฟสการกำหนดค่า
ขั้นตอนนี้คือการได้รับชุดพารามิเตอร์โดยส่งคำขอไปยังพื้นหลังโดยใช้ URL ปัจจุบัน นั่นคือพื้นหลังจะใช้ URL ของฉันเพื่อตรวจสอบใน WeChat สิ่งที่ควรทราบที่นี่ใช้เพื่อตรวจสอบวิธีการเขียน URL ปัจจุบัน
ให้ url = location.href.split ('#') [0];
อย่าลืมเขียนสถานการณ์ข้างต้น มิฉะนั้นจะทำการกำหนดเวลาการกำหนดค่าเวลาที่ไม่ถูกต้อง
ยืนยันว่า URL เป็น URL ที่สมบูรณ์ของหน้า (โปรดยืนยันในการแจ้งเตือนหน้าปัจจุบัน (location.href.split ('#') [0])) รวมถึง 'http (s): //' ส่วนและ '? 'ส่วนพารามิเตอร์รับหลังจากนั้น แต่ไม่รวมชิ้นส่วนหลังจาก'#'แฮช
ตรวจสอบให้แน่ใจว่า URL ที่คุณใช้เพื่อลงชื่อนั้นได้รับแบบไดนามิก คุณสามารถอ้างถึงวิธีการใช้งานของ PHP ในรหัสตัวอย่างสำหรับหน้าไดนามิก หากหน้าคงที่ของ HTML ถูกส่งผ่านไปยังแบ็กเอนด์ไปยังลายเซ็นของ URL ผ่าน AJAX ที่ปลายด้านหน้าส่วนหน้าจะต้องใช้ JS เพื่อรับหน้าปัจจุบันและลบลิงก์ไปยังส่วนแฮช '#' (คุณสามารถรับตำแหน่งได้ ลิงค์. หากลิงก์ปัจจุบันไม่ได้รับแบบไดนามิกลายเซ็นหน้าหลังจากการแชร์จะล้มเหลว
ให้ความสนใจกับพลวัตที่นี่อย่าประกบกันด้วยตัวเองและเข้ารหัส Uricomponent ในเวลาเดียวกัน
$ .ajax ({type: 'get', url: url, datatype: 'jsonp'}) จากนั้น ((ข้อมูล) => {wx.config ({debug: จริง, // เปิดโหมดการดีบัก, ค่าการส่งคืนของ APIs ทั้งหมดที่เรียกว่า ด้านพีซี4. ตรวจสอบได้สำเร็จผ่านการประมวลผลอินเทอร์เฟซพร้อม
หลังจากตรวจสอบข้อมูลการกำหนดค่าแล้ววิธีการพร้อมจะถูกดำเนินการ การโทรอินเตอร์เฟสทั้งหมดจะต้องได้รับหลังจากอินเตอร์เฟสการกำหนดค่าจะได้รับผลลัพธ์ การกำหนดค่าคือการทำงานแบบอะซิงโครนัสของไคลเอนต์ ดังนั้นหากคุณต้องการเรียกอินเทอร์เฟซที่เกี่ยวข้องเมื่อโหลดหน้าเว็บคุณต้องวางอินเทอร์เฟซที่เกี่ยวข้องในฟังก์ชันพร้อมที่จะเรียกเพื่อให้แน่ใจว่าการดำเนินการที่ถูกต้อง สำหรับอินเทอร์เฟซที่เรียกว่าเมื่อผู้ใช้ทริกเกอร์พวกเขาสามารถเรียกได้โดยตรงโดยไม่ต้องใส่ไว้ในฟังก์ชั่นพร้อม
wx.ready (() => {// alert ('พร้อม'); //$('#onmenushareappmessage').on('Click ', () => {// แบ่งปันกับเพื่อน wx.onmenushareappmessage ({title:', desc: '', link: ' ส่งไปยังเพื่อน '), ความสำเร็จ: ฟังก์ชั่น (res) {Alert (' แบ่งปัน '); // แบ่งปันไปยังช่วงเวลา wx.onmenusharetimeline ({title: '', // แชร์ลิงก์ชื่อเรื่อง: shareurl, // แชร์ลิงก์ imgurl: '', // แชร์ไอคอนความสำเร็จ: ฟังก์ชั่น () {alert ('แบ่งปัน'); // alert ($ ('. num') ดำเนินการหลังจากผู้ใช้ยกเลิกการแบ่งปัน // การแจ้งเตือน ('ยกเลิก');}}); -5. การตรวจสอบที่ล้มเหลวผ่านอินเตอร์เฟสข้อผิดพลาด
ฟังก์ชั่นข้อผิดพลาดจะถูกดำเนินการหากข้อมูลการกำหนดค่าล้มเหลว หากลายเซ็นหมดอายุการตรวจสอบจะล้มเหลว สำหรับข้อความแสดงข้อผิดพลาดเฉพาะคุณสามารถเปิดโหมดการดีบักของการกำหนดค่าหรือคุณสามารถดูได้ในพารามิเตอร์ RES ที่ส่งคืน
wx.error ((res) => {alert (res.errmsg);})6. อินเตอร์เฟสพื้นฐาน
•แบ่งปันไปยังอินเทอร์เฟซช่วงเวลา
wx.onmenusharetimeline ({title: '', // แชร์ลิงก์ชื่อเรื่อง: '', // แชร์ลิงก์ imgurl: '', // แชร์ไอคอนความสำเร็จ: ฟังก์ชั่น () {// ฟังก์ชั่นการเรียกกลับดำเนินการหลังจากผู้ใช้ยืนยันการแชร์}, ยกเลิก: ฟังก์ชั่น () {// ฟังก์ชั่นโทรกลับ•อินเทอร์เฟซที่จะแบ่งปันกับเพื่อน ๆ
wx.onmenushareappmessage ({title: '', // แชร์ชื่อ desc: '', // แชร์ลิงก์คำอธิบาย: '', // แชร์ลิงก์ imgurl: '', // แชร์ประเภทไอคอน: '', // แชร์, เพลง, วิดีโอหรือลิงก์ ฟังก์ชั่นการโทรกลับดำเนินการหลังจากผู้ใช้ยืนยันการแชร์}, ยกเลิก: ฟังก์ชัน () {// ฟังก์ชั่นการโทรกลับดำเนินการหลังจากผู้ใช้ยกเลิกการแชร์}});หากคุณต้องการเพิ่มเนื้อหาที่ได้รับด้วยคำขอ Ajax แบบอะซิงโครนัสไปยังเนื้อหาที่ใช้ร่วมกันที่นี่อินเทอร์เฟซการแชร์จะต้องถูกเรียกอีกครั้งในฟังก์ชั่นที่ประสบความสำเร็จหลังจากคำขอ AJAX ถูกส่งคืน แต่จะต้องวางอินเทอร์เฟซการแชร์ไว้ในฟังก์ชัน WX.Ready และไม่สามารถเรียกแยกกันได้ เนื่องจากการดำเนินการแชร์ไคลเอนต์เป็นการดำเนินการแบบซิงโครนัสข้อมูลที่ใช้ AJAX ยังไม่ได้รับการส่งคืน
7. ขั้นตอนเหล่านี้ดูง่าย แต่มีปัญหามากมายในระหว่าง การดีบัก อย่างหลีกเลี่ยงไม่ได้เนื่องจากอินเทอร์เฟซ JSSDK ยังคงมีข้อ จำกัด มากมาย ฉันเหยียบหลุมโดยไม่ตั้งใจ
8. ในที่สุดฉัน ก็ห่อหุ้มอินเทอร์เฟซนี้
'ใช้อย่างเข้มงวด'; ให้ wxDefaultOptions = {debug: true, appid: '', timestamp: 0, noncestr: '', ลายเซ็น: '', jsapilist: ['checkjsapi', 'onmenusharetimeline' 'Showmenuitems', 'Hideallnonbasemenuitems', 'showallnonbasemenuitems', 'showallnonbasemenuitems', 'showallnonbasemenuitems', 'translatevoice', 'Statrecord' 'StopVoice', 'UploadVoice', 'DownloadVoice', 'เลือก', 'PreviewImage', 'UploadImage', 'DownloadImage', 'GetNetworkType', 'OpenLocation', 'GetLocation', 'HideOptionMenu', 'OpenProductSpecificView', 'AddCard', 'Choosecard', 'OpenCard']}; // ให้ shareUrl = 'http: // xxx' + location.pathname; ให้ getwxparam = (url, wxoptions) => url = encodeuricomponent (url); ให้สัญญา = สัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {$ .ajax ({type: 'get', url: 'http: // xxx/xxx? param ='+url, ข้อมูล: 'jsonp'}) 'WXEB5C3F4A03B880F0'; }) Resolve ();}, (ข้อผิดพลาด) => {console.log (ข้อผิดพลาด); Return Promise;} // แบ่งปันไปยังช่วงเวลาให้ Sharesocial = (param) => {wx.onmenusharetimeline ({title: param.title, // แชร์ลิงก์ชื่อเรื่อง: param.link, // แชร์ลิงก์ imgurl: param.imgurl, // แชร์ไอคอน {// callback function param.failcalback () ดำเนินการหลังจากผู้ใช้ยกเลิกการแชร์ ความสำเร็จ: ฟังก์ชั่น (res) {param.sucallback (); wx.ready (() => {// แบ่งปันไปยังช่วงเวลา Sharesocial (param); Sharetofriends (param);})} ฟังก์ชั่น callwx (param, wxoptions) {getwxparam (param.url, wxoptions) Title: '', desc: '', link: '', imgurl: '', sucallback: func, failcalback: func} module.exports = {wxdefaultoptions, // เปลี่ยนการกำหนดค่า callwx, // การกำหนดค่าเริ่มต้นบทความนี้ได้รวบรวมไว้ใน "สรุปทักษะการพัฒนา JavaScript WeChat" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ฉันอยากจะแนะนำการสอนเกี่ยวกับโปรแกรม WeChat Mini ที่มีความกังวลอย่างมาก: "การสอนการพัฒนาโปรแกรม WeChat Mini" ได้รับการรวบรวมอย่างระมัดระวังโดยบรรณาธิการของทุกคนฉันหวังว่าคุณจะชอบ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น