html5调用app分享功能示例（WebViewJavascriptBridge）
程序员文章站
2022-06-14 17:21:59
这篇文章主要介绍了html5调用app分享功能示例（WebViewJavascriptBridge）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-03-21...
小编接到领导任务，写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和安卓人员商量定制。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。