html5启用app共享作用示例(WebViewJavascriptBridge)

日期:2020-10-10 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

网编接到领导每日任务,写h5挪动端主题活动网页页面,点一下网页页面內容调取ios和Android开发设计自身写的共享作用(包含手机微信、手机微信盆友圈、QQ、QQ室内空间等),包含客户未登陆,让其登陆后才可以共享,共享取得成功后进行恳求给予优惠券作用,下面是所获得的工作经验,仅供参照。

提议不必应用ShareSDK

立即上干货:无需引入别的库

var u = navigator.userAgent;//分辨手机上种类
    //---------------------------------------安卓系统手机上-------------------------------------------------------//
    if (u.indexOf('Android') > ⑴ || u.indexOf('Linux') > ⑴) { //安卓系统机
        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": "你请客,我买单,呼朋唤友1起去(趣)约车", // 共享的文本
                    "pictureLinking": "http://yueche⑴254224848.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') > ⑴) { 
        //---------------------------------------iPhone手机上-------------------------------------------------------//
        // swal("iPhone手机上");
        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": "你请客,我买单,呼朋唤友1起去(趣)约车", // 共享的文本
                        "pictureLinking": "http://yueche⑴254224848.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) {})
                }
            }
        })
    }

总的来讲,安卓系统和ios的编码类似度很高,可是编码码放的部位不1样,这点要留意,callHandler是网页页面调取ios或安卓系统的方式,registerHandler是ios和安卓系统调取网页页面的方式

照片中红框的部位的方式名由h5网页页面开发设计者与ios和安卓系统人员商议订制。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。