html5调用app分享功能的介绍

这篇文章主要介绍了html5调用app分享功能示例（WebViewJavascriptBridge）的相关资料,内容挺不错的，现在分享给大家，也给大家做个参考。

接到领导任务，写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和安卓人员商量定制。

html5调用app分享功能的介绍

相关推荐