最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

html5调用app分享功能的介绍

来源:懂视网 责编:小采 时间:2020-11-27 15:05:01
文档

html5调用app分享功能的介绍

html5调用app分享功能的介绍:这篇文章主要介绍了html5调用app分享功能示例(WebViewJavascriptBridge)的相关资料,内容挺不错的,现在分享给大家,也给大家做个参考。接到领导任务,写h5移动端活动页面,点击页面内容调取ios和Android开发自己写的分享功能(包括微信、微信朋友圈、QQ、
推荐度:
导读html5调用app分享功能的介绍:这篇文章主要介绍了html5调用app分享功能示例(WebViewJavascriptBridge)的相关资料,内容挺不错的,现在分享给大家,也给大家做个参考。接到领导任务,写h5移动端活动页面,点击页面内容调取ios和Android开发自己写的分享功能(包括微信、微信朋友圈、QQ、
这篇文章主要介绍了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和安卓人员商量定制。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

html5调用app分享功能的介绍

html5调用app分享功能的介绍:这篇文章主要介绍了html5调用app分享功能示例(WebViewJavascriptBridge)的相关资料,内容挺不错的,现在分享给大家,也给大家做个参考。接到领导任务,写h5移动端活动页面,点击页面内容调取ios和Android开发自己写的分享功能(包括微信、微信朋友圈、QQ、
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top