L'éditeur a reçu une tâche de leadership pour rédiger une page d'activité mobile h5, cliquer sur le contenu de la page pour récupérer iOS et Android et développer la fonction de partage (y compris WeChat, WeChat Moments, QQ, QQ Space, etc.) que l'utilisateur n'a pas connecté dans. Vous ne pouvez partager qu'après vous être connecté. Une fois le partage réussi, vous pouvez lancer une demande pour offrir une fonction de coupon. Voici l'expérience acquise, à titre de référence uniquement.
Il est recommandé de ne pas utiliser ShareSDK
Téléchargez directement les informations utiles : pas besoin de référencer d’autres bibliothèques
var u = navigator.userAgent;//Déterminer le type de téléphone mobile//---------------------------------- ----------- ---Téléphone Android---------------------------------- -------------- ----------// if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //Android var callbackButton = document.getElementById ('btnImg'); //Obtenir le nœud callbackButton.onclick = function (e) { e.preventDefault(); //Bloquer la fonction d'origine if (userId == null) { //Vérifiez si vous êtes connecté, s'il n'est pas connecté WebViewJavascriptBridge.callHandler('loginAction', function (response) {})//Voici la page h5 pour appeler la méthode de connexion Android} else {//Déjà connecté WebViewJavascriptBridge.callHandler('shareAction', { //La page h5 appelle la méthode Android pour partager les paramètres passés à Android, contenu : Vous traitez, je paie la facture, invitez des amis à y aller (amusant) et à réserver une balade ensemble, // Image texte partagéeLien : http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F% E5% 9B%BE.jpg, // Titre de l'URL de l'image partagée : Fun Hail - vous attend à la station Xinghai Square, // Image du titre partagéUrl : http://agent.qyueche.com/sup/ShareSdk/xing.html, //Plateforme de liens URL partagés : [2, 3] //1 Sina Weibo 2 Amis WeChat 3 Moments WeChat 4 Amis QQ 5 Espace QQ 6 SMS } , function (réponse) {}) } } function connectWebViewJavascriptBridge(callback) {//C'est après un partage réussi if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } } connectWebViewJavascriptBridge(function(bridge) { bridge.init(function(message, réponseCallback) { }) ; bridge.registerHandler('shareComplete', fonction (données, réponseCallback) { //Méthode de rappel iOS, // alert(data) if (data == 1) { //Si le partage est réussi $.ajax({ //Interface de demande pour recevoir des coupons type : 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, data : {}, dataType : json, success : function (data) { // Réception réussie swal(data .message); }, erreur : fonction (XMLHttpRequest, textStatus, errorThrown) { //Échec de la réception de swal('Échec de la réception !'); } }) } else { //Échec du partage de swal('Échec du partage !' } }) bridge.registerHandler('loginComplete', function (data , réponseCallback) { //Méthode de connexion iOS, userId = data; }) }) } else if (u.indexOf('iPhone') > -1) { //------------- --- -----------------------Téléphone Apple---------------------- ------------------------------------// // swal(iPhone); function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); ; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0) } setupWebViewJavascriptBridge(fonction (pont) { bridge.registerHandler('shareComplete', function (data, responseCallback) { //Méthode de rappel iOS, if (data.code == 1) { //Si le partage réussit $.ajax({ //Interface de demande pour recevoir le type de coupons : 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, données : {}, dataType : json, succès : fonction (données) { //Reçu avec succès swal(data.message); }, erreur : fonction (XMLHttpRequest, textStatus, errorThrown) { //Échec de la réception de swal('Échec de la réception !'); } }) } else { //Échec du partage de swal('Échec du partage !' } }) bridge.registerHandler ('loginComplete' , function (data, ResponseCallback) { //Méthode de connexion iOS, userId = data.userId; }) var callbackButton = document.getElementById('btnImg'); //Obtenir le nœud callbackButton.onclick = function (e) { //Click event e.preventDefault(); //Empêcher la fonction d'origine if (userId == null) { //Voir si vous êtes connecté bridge.callHandler('loginAction', function (response) {}) } else { bridge.callHandler('shareAction', { //Contenu du paramètre transmis à iOS : Vous traitez, je paie la facture, invitez des amis à y aller (amusant) et à réserver une balade ensemble, // Image texte partagéeLien : http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F% E5% 9B%BE.jpg, // Titre de l'URL de l'image partagée : Fun Hail - vous attend à la station Xinghai Square, // Image du titre partagéUrl : http://agent.qyueche.com/sup/ShareSdk/xing.html, //Plateforme de liens URL partagés : [2, 3] //1 Sina Weibo 2 Amis WeChat 3 Moments WeChat 4 Amis QQ 5 Espace QQ 6 SMS } , fonction (réponse) {}) } } }) }En général, les similitudes de code entre Android et iOS sont très similaires, mais le placement du code est différent. Il convient de noter que callHandler est la méthode pour appeler des pages sous iOS ou Android, et registerHandler est la méthode pour appeler des pages sous iOS et Android. .
Le nom de la méthode de la position de la case rouge dans l'image est personnalisé par le développeur de la page h5 et le personnel iOS et Android.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.