Html5 ใช้กระบวนการแชร์และปรับแต่งเนื้อหาบน WeChat

โปรเจ็กต์ล่าสุดจำเป็นต้องมีการแบ่งปัน WeChat และจำเป็นต้องปรับแต่งเนื้อหาของการแบ่งปัน WeChat เนื่องจากนี่เป็นครั้งแรกที่ฉันได้สัมผัสกับการแบ่งปัน WeChat ฉันจึงบันทึกปัญหาบางอย่างที่พบในระหว่างกระบวนการตลอดจนกระบวนการทั้งหมด ของการทำหน้าที่ให้สมบูรณ์

ต่อไปนี้เป็นกระบวนการทั่วไป (รายละเอียดจะระบุไว้ในแต่ละขั้นตอน)

• ติดตั้ง weixin-js-sdk
• เริ่มต้นการแบ่งปัน WeChat
• กำหนดค่า WeChat เพื่อแบ่งปันเนื้อหาที่กำหนดเอง (ส่งให้เพื่อน ส่งไปยังช่วงเวลา)

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

สำหรับคำแนะนำเฉพาะ โปรดดูเอกสารอย่างเป็นทางการของ WeChat

เนื่องจากหลายโครงการที่ฉันกำลังทำอยู่จำเป็นต้องใช้ฟังก์ชันการแบ่งปัน WeChat รหัสที่แบ่งปันบน WeChat จึงถูกรวมไว้ที่นี่

Api ในโค้ดด้านล่างเป็นคำขอ axios จริงๆ

 นำเข้า wx จาก 'weixin-js-sdk' นำเข้า api จาก '@/api'const wxApi = { /** * [wxRegister การเริ่มต้น WeChat Api] * @param {Function} โทรกลับ [ฟังก์ชั่นการโทรกลับพร้อม] */ wxRegister (โทรกลับ, url) { ให้แบบสอบถาม = { // url ที่นี่จะต้องเป็น url ที่ตรงกับหน้าที่คุณต้องการแชร์ทุกประการและจำเป็นต้องแปลง URL base64: url } api.getWxJsSdk(query).then(res => { la data = res.data wx.config({ debug: false, // Turn on debugging mode appId: data.appId, // Required, ตัวระบุเฉพาะของ การประทับเวลาบัญชีอย่างเป็นทางการ: data.timestamp, // จำเป็น, สร้างการประทับเวลาของลายเซ็น nonceStr: data.nonceStr, // จำเป็น, สร้างสตริงสุ่มของลายเซ็นลายเซ็น: data.signature, // จำเป็น, ลายเซ็น, ดูภาคผนวก 1 jsApiList: data.jsApiList // จำเป็น, รายการอินเทอร์เฟซ JS ที่จำเป็นต้องใช้, ดูภาคผนวก 2 สำหรับรายการอินเทอร์เฟซ JS ทั้งหมด }) }) wx.ready((res) => { // หากจำเป็น ปรับแต่งวิธีการโทรกลับพร้อมถ้า (โทรกลับ) { โทรกลับ() } }) },}

หมายเหตุ: หากคุณต้องการแปลง base64 ด้านบน คุณสามารถใช้ js-base64

3. กำหนดค่า WeChat เพื่อแบ่งปันเนื้อหาที่กำหนดเอง (ส่งให้เพื่อน ส่งไปยังช่วงเวลา)

ขั้นตอนที่สองคือการเริ่มต้นการกำหนดค่าบรรจุภัณฑ์สำหรับ WeChat แต่ก็ยังขาดการแชร์ที่เกี่ยวข้องและฟังก์ชันอื่น ๆ มาปรับปรุงที่นี่

 // เพิ่ม /*** หลังฟังก์ชัน wxRegister [ShareTimeline กำหนดเอง WeChat แบ่งปันไปยัง Moments]* @param {[type]} ตัวเลือก [share information]* @param {[type]} สำเร็จ [success callback]* @param {[ type]} ข้อผิดพลาด [การโทรกลับล้มเหลว]*/ShareTimeline (ตัวเลือก) {wx.updateTimelineShareData ({ title: option.title, // แชร์ลิงก์ชื่อ: option.link, // แชร์ลิงก์ imgUrl: option.imgUrl, // แบ่งปันไอคอนสำเร็จ () { // การตั้งค่าสำเร็จ}, ยกเลิก () { // การตั้งค่าล้มเหลว}})},/*** [ShareAppMessage ปรับแต่งการแชร์ WeChat ให้เพื่อน]* @ param ตัวเลือก {[type]} [แบ่งปันข้อมูล]* @param {[ประเภท]} สำเร็จ [การโทรกลับสำเร็จ]* ข้อผิดพลาด @param {[ประเภท]} [การโทรกลับล้มเหลว]*/ShareAppMessage (ตัวเลือก) {wx.updateAppMessageShareData({ title: option.title, // แบ่งปันชื่อ desc: option.desc, // แชร์ลิงก์คำอธิบาย: option.link, // แชร์ลิงก์ imgUrl: option.imgUrl, // แชร์ไอคอนสำเร็จ () { // การตั้งค่าสำเร็จ}, ยกเลิก () { // การตั้งค่าล้มเหลว}})}

4.เมื่อโทรเข้าเพจ

 // vue เป็นตัวอย่าง // สำหรับพารามิเตอร์ฟังก์ชันต่อไปนี้ โปรดอ้างอิงวิธีการข้างต้น import wx from 'your encapsulated file' mount(){ la base64 = need('js-base64').Base64 la url = base64. เข้ารหัส( window.location.href) wx.wxRegister(this.wxRegCallback,url)} วิธีการ:{ // กำหนดเอง jdk callback wxRegCallback () {}, // ฟังก์ชั่นที่กำหนดเองสำหรับการแบ่งปันกับเพื่อน ๆ wxShareAppMessage(){ la option = { title:'', // แบ่งปันชื่อ desc: '', // แบ่งปันลิงก์คำอธิบาย: ' ', // แชร์ลิงก์ imgUrl: '' // ไอคอนแชร์ } // ฉีดวิธีทั่วไป wx.ShareAppMessage(ตัวเลือก) }, // ฟังก์ชันที่กำหนดเองสำหรับการแชร์ไปยังแวดวงเพื่อน wxShareTimeline(){ la option = { title:'',// Share title desc: '', // Share description link: '', // Share link imgUrl: '' // Share icon } // ฉีดวิธีการทั่วไป wx.ShareTimeline(ตัวเลือก) }}

ข้างต้นเป็นขั้นตอนการแชร์บน WeChat หากมีข้อบกพร่องประการใดโปรดชี้ให้เห็น

การแบ่งปัน WeChat สามารถทดสอบได้บนอุปกรณ์จริงเท่านั้น

ชื่อโดเมนที่ใช้รูปแบบ localhost ไม่สามารถผ่านการยืนยัน WeChat ได้

ข้างต้นคือการใช้งาน Html5 ของการแบ่งปัน WeChat และเนื้อหาแบบกำหนดเองที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา!