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实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
2009/08/04 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
JS常用算法实现代码
2016/11/14 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
vue实现简单图片上传
2020/06/30 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
在Python中处理XML的教程
2015/04/29 Python
python 上下文管理器使用方法小结
2017/10/10 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
个人对照检查材料
2014/02/12 职场文书
教师节活动主持词
2014/04/02 职场文书
主要领导对照检查材料
2014/08/26 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
Nginx利用Logrotate实现日志分割
2022/05/20 Servers