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


Posted in HTML / CSS onMarch 21, 2018

小编接到领导任务,写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和安卓调取页面的方法

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 #HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 #HTML / CSS
HTML5 新表单类型示例代码
Mar 20 #HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 #HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 #HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 #HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 #HTML / CSS
You might like
PHP新手上路(八)
2006/10/09 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Python偏函数实现原理及应用
2020/11/20 Python
如何利用python 读取配置文件
2021/01/06 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
毕业自我评价范文
2013/11/17 职场文书
员工2014年度工作总结
2014/12/09 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技