Introduction à la fonction de partage d'applications d'appel HTML5

Cet article présente principalement les informations pertinentes sur l'exemple de la fonction de partage d'application appelant html5 (WebViewJavascriptBridge). Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

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.) et permettez-leur de se connecter avant de pouvoir partager. Après un partage réussi, lancez une demande pour la fonction de coupon. Voici l'expérience acquise, à titre de référence uniquement.

Il est recommandé de ne pas utiliser ShareSDK

Aller directement aux marchandises sèches : pas besoin de référencer d'autres bibliothèques

var u = navigator.userAgent;//判断手机类型
    //---------------------------------------安卓手机-------------------------------------------------------//
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓机
        var callbackButton = document.getElementById('btnImg'); //获取节点
        callbackButton.onclick = function (e) {
            e.preventDefault(); //阻止原本作用
            if (userId == null) { //看是否登录，如果没登录
                WebViewJavascriptBridge.callHandler('loginAction', function (response) {})//这里是h5页面调取安卓的登录方法
            } else {//已经登陆了
                WebViewJavascriptBridge.callHandler('shareAction', { //h5页面调取安卓的方法，进行分享传给android的参数，
                    "content": "你请客，我买单，呼朋唤友一起去（趣）约车", // 分享的文字
                    "pictureLinking": "http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F%E5%9B%BE.jpg", // 分享的图片Url
                    "title": "趣约车-星海广场站等你", //分享的标题
                    "pictureUrl": "http://agent.qyueche.com/sup/ShareSdk/xing.html", //分享的网址链接
                    "platform": ["2", "3"] //1新浪微博2微信好友3微信朋友圈4QQ好友5QQ空间6短信
                }, function (response) {})
            }
        }
        function connectWebViewJavascriptBridge(callback) {//这里是分享成功后
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
               
            });
            bridge.registerHandler('shareComplete', function (data, responseCallback) { //ios回调的方法，
                // alert(data)
                if (data == 1) { //若果分享成功
                    $.ajax({ //请求接口去领券
                        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) { //领取成功
                            swal(data.message);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) { //领取失败
                            swal('领取失败!');
                        }
                    })
                } else { //分享失败
                    swal('分享失败!');
                }
            })
            bridge.registerHandler('loginComplete', function (data, responseCallback) { //ios登录的方法，
                userId = data;
            })
        })
    } else if (u.indexOf('iPhone') > -1) { 
        //---------------------------------------苹果手机-------------------------------------------------------//
        // swal("苹果手机");
        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                return callback(WebViewJavascriptBridge);
            }
            if (window.WVJBCallbacks) {
                return window.WVJBCallbacks.push(callback);
            }
            window.WVJBCallbacks = [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(function (bridge) {
            bridge.registerHandler('shareComplete', function (data, responseCallback) { //ios回调的方法，
                if (data.code == 1) { //若果分享成功
                    $.ajax({ //请求接口去领券
                        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) { //领取成功
                            swal(data.message);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) { //领取失败
                            swal('领取失败!');
                        }
                    })
                } else { //分享失败
                    swal('分享失败!');
                }
            })
            bridge.registerHandler('loginComplete', function (data, responseCallback) { //ios登录的方法，
                userId = data.userId;
            })
            var callbackButton = document.getElementById('btnImg'); //获取节点
            callbackButton.onclick = function (e) { //点击事件
                e.preventDefault(); //阻止原本作用
                if (userId == null) { //看是否登录
                    bridge.callHandler('loginAction', function (response) {})
                } else {
                    bridge.callHandler('shareAction', { //传给ios的参数
                        "content": "你请客，我买单，呼朋唤友一起去（趣）约车", // 分享的文字
                        "pictureLinking": "http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F%E5%9B%BE.jpg", // 分享的图片Url
                        "title": "趣约车-星海广场站等你", //分享的标题
                        "pictureUrl": "http://agent.qyueche.com/sup/ShareSdk/xing.html", //分享的网址链接
                        "platform": ["2", "3"] //1新浪微博2微信好友3微信朋友圈4QQ好友5QQ空间6短信
                    }, function (response) {})
                }
            }
        })
    }

En général, les codes d'Android et d'iOS sont très similaires, mais le placement du code est différent. Il convient de noter que callHandler est la méthode d'appel de page iOS ou Android, RegisterHandler est la méthode d'appel de page d'iOS et d'Android.

Le nom de la méthode pour la position de la case rouge dans l'image est personnalisé par le développeur de la page h5 en consultation avec 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. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Mise en œuvre de la fonction d'enregistrement et de lecture sonore HTML5

Filtres basés sur js et HTML5 à partir des méthodes de la caméra de capturer des vidéos

HTML5 Plus réalise la fonction de prendre des photos ou de télécharger des photos de l'album via l'application mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!