ล่าสุดบริษัทได้สร้างเพจ H5 เพื่อให้นักเรียนลงคะแนนเสียง โดยส่วนใหญ่จะใช้งานบน WeChat และจำเป็นต้องเพิ่มฟังก์ชันการแชร์ WeChat
บทความนี้จะบันทึกเรื่องที่ต้องให้ความสนใจเป็นหลักเมื่อเรียกใช้อินเทอร์เฟซการแชร์ WeChat
1. สำหรับเฟรมเวิร์ก angular1 ที่ใช้ในส่วนหน้า คุณต้องแนะนำไฟล์อินเทอร์เฟซ WeChat บนหน้าดัชนีก่อน
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. เขียนฟังก์ชันการแชร์ WeChat ในไฟล์ myApp.run โปรดทราบว่าฟังก์ชันนี้จำเป็นต้องรับและแยกวิเคราะห์ URL ของหน้าปัจจุบัน จากนั้นส่งไปที่แบ็กเอนด์เพื่อสร้างลายเซ็นที่เกี่ยวข้องและอัปโหลดโค้ดโดยตรง
// ฟังก์ชั่นแชร์ WeChat function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data. รหัส == 0) { var respanse = res.data.data; เมื่อเปิดโหมดดีบั๊ก ค่าส่งคืนของการเรียก API ทั้งหมดจะถูกแจ้งเตือนทางฝั่งไคลเอ็นต์ หากคุณต้องการดูพารามิเตอร์ขาเข้า คุณสามารถเปิดได้จากฝั่งพีซี ข้อมูลพารามิเตอร์จะถูกพิมพ์ผ่าน log และ appId จะถูกพิมพ์บนฝั่งพีซีเท่านั้น respanse.appId, การประทับเวลา: respanse.timestamp, // จำเป็น, สร้างการประทับเวลาของลายเซ็น nonceStr: respanse.nonceStr, // จำเป็น, สร้างลายเซ็นสตริงสุ่มของ ลายเซ็น: respanse.signature,// จำเป็น, ลายเซ็นต์ jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// จำเป็น, รายการอินเทอร์เฟซ JS ที่จำเป็นต้องใช้}); ) }หลังจากแยกวิเคราะห์ URL ปัจจุบันแล้ว ให้ส่งไปยังอินเทอร์เฟซส่วนหลังจำเป็นต้องส่งคืน appId, การประทับเวลา, สตริงสุ่ม และลายเซ็น จากนั้นเพิ่มรายการอินเทอร์เฟซ (jsApiList) ด้วยตนเองตามต้องการ รูปแบบของอาร์เรย์ ฉันใช้มันที่นี่เท่านั้น
เมื่อทำการดีบัก คุณสามารถเปลี่ยนการดีบักเป็นจริงได้ เพื่อให้ทุกครั้งที่เรียกใช้อินเทอร์เฟซ WeChat ข้อมูลอินเทอร์เฟซจะได้รับการแจ้งเตือน ทำให้ง่ายต่อการตรวจสอบว่าการเรียกอินเทอร์เฟซเป็นเรื่องปกติหรือไม่
3. หลังจากฟังก์ชั่นนี้ ปรับแต่งเนื้อหาการแชร์ รหัสจะเป็นดังนี้
wx.ready(function () { var obj = { title: 'การแข่งขันแบบทีม SPBCN เริ่มโหวตแล้ว!', // Share title desc: 'การแข่งขันแบบทีม SPBCN เริ่มโหวตแล้ว มาเชียร์พวกเรากันเถอะ!', // แชร์คำอธิบาย ลิงก์: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // แชร์ลิงก์ ชื่อโดเมนลิงก์หรือเส้นทางจะต้องสอดคล้องกับชื่อโดเมนความปลอดภัย JS ของบัญชีสาธารณะที่สอดคล้องกับปัจจุบัน หน้าหนังสือ // ลิงก์นี้เป็นลิงก์เปลี่ยนเส้นทางเนื่องจากจำเป็นต้องได้รับรหัสผู้ใช้ แต่ลิงก์นี้ไม่สามารถเขียนลิงก์ไปยัง WeChat ได้โดยตรงเพื่อรับรหัส // ดังนั้น คุณต้องคลิกและโหลดหน้าใหม่เพื่อใช้การเปลี่ยนเส้นทางและเปิดใหม่อีกครั้ง ลิงก์ WeChat เพื่อรับรหัส เพื่อใช้งานฟังก์ชั่นการรับข้อมูลผู้ใช้ imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // ไอคอนแชร์ล้มเหลว: ฟังก์ชั่น (res) { การแจ้งเตือน (JSON.stringify (res)) ; }; // 2.1 ติดตามการแชร์ให้เพื่อน การคลิกปุ่ม เนื้อหาการแชร์แบบกำหนดเอง และการแชร์อินเทอร์เฟซผลลัพธ์ wx.onMenuShareAppMessage(obj) ; // 2.3 ตรวจสอบการแชร์การคลิกปุ่ม QQ ปรับแต่งเนื้อหาการแชร์และการแชร์อินเทอร์เฟซผลลัพธ์ wx.onMenuShareQQ(obj); 2.4 ตรวจสอบการคลิกปุ่มแชร์บน Weibo ปรับแต่งเนื้อหาการแชร์และอินเทอร์เฟซผลลัพธ์การแชร์ wx.onMenuShareWeibo(obj); // 2.5 ติดตามการคลิกปุ่มแชร์บน QZone ปรับแต่งเนื้อหาการแชร์และอินเทอร์เฟซการแชร์ wx onMenuShareQZone(obj })wx.ready จะทำงานโดยอัตโนมัติหลังจาก wx.config ฉันกำหนดวัตถุทั่วไปสำหรับการแชร์เนื้อหา แล้วเรียกมันโดยตรง คุณยังสามารถกำหนดเนื้อหาที่แตกต่างกันสำหรับการแชร์เพื่อน แวดวงเพื่อน Weibo ฯลฯ ตามต้องการ เอกสารประกอบอินเทอร์เฟซ WeChat สำหรับรายละเอียด
สิ่งสำคัญหลักอยู่ที่ลิงก์การแชร์ ลิงก์จะต้องอยู่ภายใต้ชื่อโดเมนที่ปลอดภัยของ JS ที่กำหนดโดยบัญชีอย่างเป็นทางการของคุณ มิฉะนั้นการแชร์จะไม่สำเร็จ
อาการของความล้มเหลวในการแชร์คือรูปภาพลิงก์การแชร์ไม่สามารถโหลดรูปภาพที่คุณกำหนดเองได้ และชื่อการแชร์ไม่ถูกต้อง
5. โปรเจ็กต์ของฉันมีไว้สำหรับการโหวต ดังนั้นฉันต้องได้รับรหัสผู้ใช้ทุกครั้งที่คลิกเข้ามา หากคุณเพียงแค่แชร์บทความและไม่ต้องการข้อมูลผู้ใช้ เพียงแค่เปลี่ยนลิงก์ไปยังลิงก์บทความของคุณ
6. สำหรับหมวดหมู่การลงคะแนน ฉันได้ทำการดูแลเป็นพิเศษ นั่นคือ การเปลี่ยนเส้นทางลิงก์ ทุกคนรู้ดีว่า H5 สามารถรับข้อมูลผู้ใช้ WeChat ได้สองวิธี วิธีหนึ่งคือการติดตามบัญชีอย่างเป็นทางการของ WeChat; ผู้ใช้เพื่อรับข้อมูลสาธารณะของผู้ใช้ ผู้ใช้คลิกตกลง อย่างไรก็ตาม ทั้งสองอย่างนี้จำเป็นต้องเชื่อมต่อเข้ากับลิงก์ WeChat พิเศษตามข้อกำหนดของ WeChat ดังนั้นชื่อโดเมนจึงมาพร้อมกับ WeChat และไม่ใช่ชื่อโดเมนที่ปลอดภัยของ JS ของบัญชีทางการของเราเอง
7. ดังนั้นสำหรับลิงก์ที่แชร์ หากคุณยังคงต้องการรับรหัสผู้ใช้ คุณต้องใช้วิธีการอื่นเพื่อให้บรรลุ สิ่งที่ฉันใช้คือการเพิ่มหน้าว่าง และหลังจากโหลดหน้าแล้ว ให้ข้ามไปที่ WeChat เพื่อรับ ลิงค์รหัส http:// /dev.spbcn.org/wechat-vote-phone/redirect.html ลิงค์นี้เป็นหน้าว่าง รหัสสำหรับหน้านี้มีดังนี้
window.onload = ฟังก์ชั่น () { // ลิงก์เปลี่ยนเส้นทางซึ่งเหมือนกับลิงก์เพื่อรับรหัสผู้ใช้ในบัญชีอย่างเป็นทางการของ WeChat window.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. วิธีนี้มีข้อเสียคือเพิ่มหน้าว่างเพิ่มเติม ฉันยังไม่ได้คิดวิธีที่ดีเลย
9. หากไม่ได้เพิ่มขั้นตอนนี้ ลิงก์ที่แชร์จะแสดงตามปกติ แต่ไม่สามารถรับรหัสได้ และแบ็กเอนด์ไม่สามารถระบุผู้ใช้ได้ ส่งผลให้ไม่สามารถจำกัดผู้ใช้จากการโหวตได้
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network