视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
html5调用app分享功能的介绍
2020-11-27 15:05:01 责编:小采
文档
 这篇文章主要介绍了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和安卓人员商量定制。

下载本文
显示全文
专题