บรรณาธิการได้รับมอบหมายให้เป็นผู้นำในการเขียนหน้ากิจกรรมมือถือ h5 คลิกที่เนื้อหาของหน้าเพื่อดึงข้อมูล iOS และ Android และพัฒนาฟังก์ชันการแชร์ (รวมถึง WeChat, WeChat Moments, QQ, QQ Space ฯลฯ) ที่ผู้ใช้ไม่ได้บันทึกไว้ คุณสามารถแชร์ได้หลังจากเข้าสู่ระบบเท่านั้น หลังจากแชร์สำเร็จ คุณสามารถเริ่มต้นคำขอเพื่อมอบฟังก์ชันคูปองได้ ต่อไปนี้เป็นประสบการณ์ที่ได้รับสำหรับการอ้างอิงเท่านั้น
ไม่แนะนำให้ใช้ ShareSDK
อัปโหลดข้อมูลที่เป็นประโยชน์โดยตรง: ไม่จำเป็นต้องอ้างอิงถึงไลบรารีอื่น
var u = navigator.userAgent;//ระบุประเภทโทรศัพท์มือถือ//---------------------------------- ----------- ---โทรศัพท์ Android ----------------------------------- ------------------ ----------// ถ้า (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //Android var callbackButton = document.getElementById ('btnImg'); // รับโหนด callbackButton.onclick = function (e) { e.preventDefault(); //บล็อกฟังก์ชันเดิมถ้า (userId == null) { //ดูว่าคุณเข้าสู่ระบบหรือไม่ หากไม่ได้เข้าสู่ระบบใน WebViewJavascriptBridge.callHandler('loginAction', function (response) {})//นี่คือหน้า h5 ที่จะ call the Android Login method} else {//Already logged in WebViewJavascriptBridge.callHandler('shareAction', { //หน้า h5 เรียกเมธอด Android เพื่อแชร์พารามิเตอร์ที่ส่งไปยัง Android เนื้อหา: คุณเลี้ยง ฉันจ่ายบิล ชวนเพื่อนมา (สนุก) และจองรถด้วยกัน // แชร์ข้อความ pictureLinking: http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F% E5% 9B%BE.jpg, // ชื่อ URL รูปภาพที่แชร์: Fun Hail - รอคุณอยู่ที่สถานี Xinghai Square, // URL รูปภาพที่แชร์: http://agent.qyueche.com/sup/ShareSdk/xing.html, // แพลตฟอร์มลิงก์ URL ที่แชร์: [2, 3] //1 Sina Weibo 2 เพื่อน WeChat 3 WeChat Moments 4 เพื่อน QQ 5 QQ Space 6 SMS } , function (response) {}) } } function ConnectWebViewJavascriptBridge(callback) {//นี่คือหลังจากแชร์สำเร็จแล้ว if (window.WebViewJavascriptBridge) { โทรกลับ (WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { โทรกลับ (WebViewJavascriptBridge) }, false } } ConnectWebViewJavascriptBridge(function(bridge) { bridge.init(function(message, responseCallback) { }) ; bridge.registerHandler('shareComplete', ฟังก์ชัน (ข้อมูล, การตอบกลับ) { // วิธีการโทรกลับ iOS, // alert(data) if (data == 1) { //หากการแชร์สำเร็จ $.ajax({ // ขออินเทอร์เฟซเพื่อรับคูปองประเภท: get, contentType: application/x-www -form-urlencoded, // url: http://main.qyueche.com/api/coupon/receiveCoupon?userId= + userId + // &takeCouponType=2&couponId=176, url: http://dev.qyueche.cn/api/coupon/receiveCoupon?userId= + userId + &takeCouponType=2&couponId=187, ข้อมูล: {}, dataType: json, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) { // รับสำเร็จ swal (ข้อมูล .message); } ข้อผิดพลาด: ฟังก์ชั่น (XMLHttpRequest, textStatus, errorThrown) { //ล้มเหลวในการรับ swal('ล้มเหลวในการรับ!'); } }) } else { //ล้มเหลวในการแชร์ swal('ล้มเหลวในการแบ่งปัน!'); } }) bridge.registerHandler('loginComplete', function (data , responseCallback) { // วิธีการเข้าสู่ระบบ iOS, userId = data; }) }) } else if (u.indexOf('iPhone') > -1) { //------------- --- ----------------------- โทรศัพท์แอปเปิ้ล ---------------------- -----------------------------------// // swal (iPhone); ฟังก์ชั่น setupWebViewJavascriptBridge (โทรกลับ) { if (window.WebViewJavascriptBridge) { โทรกลับ (WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push (โทรกลับ); ; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'ไม่มี'; WVJBIframe.src = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0) } setupWebViewJavascriptBridge (ฟังก์ชั่น (บริดจ์) { bridge.registerHandler('shareComplete', function (data, responseCallback) { // วิธีโทรกลับ ios, if (data.code == 1) { // หากการแชร์สำเร็จ $.ajax ({ // ขออินเทอร์เฟซเพื่อรับประเภทคูปอง : รับ contentType: application/x-www-form-urlencoded, // url: http://main.qyueche.com/api/coupon/receiveCoupon?userId= + userId + // &takeCouponType=2&couponId=176, url: http://dev.qyueche.cn/api/coupon/receiveCoupon?userId= + userId + &takeCouponType=2&couponId=187, ข้อมูล: {}, dataType: json, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) { //ได้รับเรียบร้อยแล้ว swal(data.message); } ข้อผิดพลาด: function (XMLHttpRequest, textStatus, errorThrown) { //ล้มเหลวในการรับ swal('ล้มเหลวในการรับ!'); ('loginComplete' , ฟังก์ชั่น (ข้อมูล, responseCallback) { // วิธีการเข้าสู่ระบบ iOS, userId = data.userId; }) var callbackButton = document.getElementById('btnImg'); //รับโหนด callbackButton.onclick = function (e) { //คลิกเหตุการณ์ e.preventDefault(); // ป้องกันฟังก์ชันดั้งเดิมถ้า (userId == null) { //See หากคุณเข้าสู่ระบบ Bridge.callHandler('loginAction', function (response) {}) } else { bridge.callHandler('shareAction', { //เนื้อหาพารามิเตอร์ที่ส่งไปยัง iOS: คุณเลี้ยง ฉันจ่ายบิล ชวนเพื่อนมา (สนุก) และจองรถด้วยกัน // แชร์ข้อความ pictureLinking: http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F% E5% 9B%BE.jpg, // ชื่อ URL รูปภาพที่แชร์: Fun Hail - รอคุณอยู่ที่สถานี Xinghai Square, // URL รูปภาพที่แชร์: http://agent.qyueche.com/sup/ShareSdk/xing.html, // แพลตฟอร์มลิงก์ URL ที่แชร์: [2, 3] //1 Sina Weibo 2 เพื่อน WeChat 3 WeChat Moments 4 เพื่อน QQ 5 QQ Space 6 SMS } , ฟังก์ชั่น (ตอบสนอง) {}) } } }) }โดยทั่วไป ความคล้ายคลึงกันของโค้ดระหว่าง Android และ iOS จะคล้ายกันมาก แต่การวางโค้ดจะแตกต่างกัน ควรสังเกตว่า callHandler เป็นวิธีเรียกเพจใน iOS หรือ Android และ registerHandler เป็นวิธีเรียกเพจใน iOS และ Android .
ชื่อวิธีการของตำแหน่งของกล่องสีแดงในภาพถูกกำหนดโดยนักพัฒนาเพจ h5 และบุคลากร iOS และ Android
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network