当前位置: 移动技术网 > IT编程>网页制作>Html5 > html5调用app分享功能示例(WebViewJavascriptBridge)

html5调用app分享功能示例(WebViewJavascriptBridge)

2019年07月25日  | 移动技术网IT编程  | 我要评论
这篇文章主要介绍了html5调用app分享功能示例(WebViewJavascriptBridge)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-03-21

小编接到领导任务,写h5移动端活动页面,点击页面内容调取ios和android开发自己写的分享功能(包括微信、微信朋友圈、qq、qq空间等),包括用户未登录,让其登录后才能分享,分享成功后发起请求给予优惠券功能,下面是所得到的经验,仅供参考。

建议不要使用sharesdk

直接上干货:不用引用其他库

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) {})
                }
            }
        })
    }

总的来说,安卓和ios的代码相似度很高,但是代码码放的位置不一样,这点要注意,callhandler是页面调取ios或安卓的方法,registerhandler是ios和安卓调取页面的方法

图片中红框的位置的方法名由h5页面开发者与ios和安卓人员商量定制。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网