HTML5搞定App分享，让活动火爆全场

1.背景介绍

在这个移动互联网年代，越来越多的公司用H5移动端活动页来推销他们的产品和服务。为了让用户玩得更开心，也让更多人参加活动，我们要加入App分享功能。下面就来讲讲怎样利用 HTML5 和 WebviewJavascriptBridge 来搞定 App分享功能，希望能给你带来帮助！

2. HTML5调用App分享功能的重要性

现在App这么火，大家都喜欢用它们来分享信息了。所以，想要提高用户参与度还有活动效果的话，就把App分享功能加进咱们的H5移动端活动里！这样一来，用户可以直接从H5页面分享到微信啦、微信朋友圈呀、QQ之类的地方，让更多人看到我们的活动，大家也就更愿意来了。

咱们做开发时可得想想怎么处理没登录用户的分享。先让他们登录，这样才能督促他们更多地参与到咱的活动里来。而且，分享成功了还能收到优惠券之类的小礼品哩！

3.不使用ShareSDK的建议

文章告诉我们别用那个ShareSDK了，原因就是它是外部文件，容易让APP变大，难以满足个性化需求。所以，用HTML5加上WebViewJavascriptBridge这个方法来搞App分享才是更方便灵活，能够随心所欲弄自己想要的那种。

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

4.安卓和iOS代码相似度高但位置不同

我们常说，安卓跟iOS代码的处理app分享的方式差不多。不过，记住，它们放地方不太一样。想调用就是iOS或者安卓的方法的话，你得用callHandler;要是调取页面的方法，就得是用registerHandler了。所以，做项目时别忘了看看代码放在哪里这样才能顺利地完成任务。

5.方法名定制化

我们得跟做H5网页开发和iOS、安卓这两块儿的人好好讨论，确定修改名字的方式！特别是那个红色框框里的名字，咱们得搞清楚大家到底想怎么叫它，免得出错。名字规范了以后，程序员们干活就更顺手，也省下不少废话时间。

6.实践经验总结

作者亲身体验告诉我们，通过H5移动端活动页展示的App分享功能，发放优惠券啥的，绝对是吸引用户的好方法！只要让大家感兴趣，愿意帮你转发活动，再送点优惠券当作奖励，这样就能把新用户招来，留下那些已有好感的用户也不成问题，还能提高整个活动的传播度。

7.结语

看看咱们这篇文章提到的HTML5+共享app（WebviewJavascriptBridge）小技巧，了解到怎么把网页技术跟手机软件的特色结合起来，做出更炫酷的活动页面！在这个大家都拼命努力的市场里，不断尝试新东西才是关键呀。