html5調(diào)用app分享功能示例（WebViewJavascriptBridge）
發(fā)布時(shí)間：2018-03-21 14:51:04 作者：代碼風(fēng) 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了html5調(diào)用app分享功能示例（WebViewJavascriptBridge）的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
小編接到領(lǐng)導(dǎo)任務(wù)，寫h5移動(dòng)端活動(dòng)頁(yè)面，點(diǎn)擊頁(yè)面內(nèi)容調(diào)取ios和Android開(kāi)發(fā)自己寫的分享功能（包括微信、微信朋友圈、QQ、QQ空間等），包括用戶未登錄，讓其登錄后才能分享，分享成功后發(fā)起請(qǐng)求給予優(yōu)惠券功能，下面是所得到的經(jīng)驗(yàn)，僅供參考。
建議不要使用ShareSDK
直接上干貨：不用引用其他庫(kù)
var u = navigator.userAgent;//判斷手機(jī)類型
//---------------------------------------安卓手機(jī)-------------------------------------------------------//
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓機(jī)
var callbackButton = document.getElementById('btnImg'); //獲取節(jié)點(diǎn)
callbackButton.onclick = function (e) {
e.preventDefault(); //阻止原本作用
if (userId == null) { //看是否登錄，如果沒(méi)登錄
WebViewJavascriptBridge.callHandler('loginAction', function (response) {})//這里是h5頁(yè)面調(diào)取安卓的登錄方法
} else {//已經(jīng)登陸了
WebViewJavascriptBridge.callHandler('shareAction', { //h5頁(yè)面調(diào)取安卓的方法，進(jìn)行分享傳給android的參數(shù)，
"content": "你請(qǐng)客，我買單，呼朋喚友一起去（趣）約車", // 分享的文字
"pictureLinking": "http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F%E5%9B%BE.jpg", // 分享的圖片Url
"title": "趣約車-星海廣場(chǎng)站等你", //分享的標(biāo)題
"pictureUrl": "http://agent.qyueche.com/sup/ShareSdk/xing.html", //分享的網(wǎng)址鏈接
"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回調(diào)的方法，
// alert(data)
if (data == 1) { //若果分享成功
$.ajax({ //請(qǐng)求接口去領(lǐng)券
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) { //領(lǐng)取成功
swal(data.message);
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //領(lǐng)取失敗
swal('領(lǐng)取失敗!');
}
})
} else { //分享失敗
swal('分享失敗!');
}
})
bridge.registerHandler('loginComplete', function (data, responseCallback) { //ios登錄的方法，
userId = data;
})
})
} else if (u.indexOf('iPhone') > -1) {
//---------------------------------------蘋果手機(jī)-------------------------------------------------------//
// swal("蘋果手機(jī)");
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回調(diào)的方法，
if (data.code == 1) { //若果分享成功
$.ajax({ //請(qǐng)求接口去領(lǐng)券
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) { //領(lǐng)取成功
swal(data.message);
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //領(lǐng)取失敗
swal('領(lǐng)取失敗!');
}
})
} else { //分享失敗
swal('分享失敗!');
}
})
bridge.registerHandler('loginComplete', function (data, responseCallback) { //ios登錄的方法，
userId = data.userId;
})
var callbackButton = document.getElementById('btnImg'); //獲取節(jié)點(diǎn)
callbackButton.onclick = function (e) { //點(diǎn)擊事件
e.preventDefault(); //阻止原本作用
if (userId == null) { //看是否登錄
bridge.callHandler('loginAction', function (response) {})
} else {
bridge.callHandler('shareAction', { //傳給ios的參數(shù)
"content": "你請(qǐng)客，我買單，呼朋喚友一起去（趣）約車", // 分享的文字
"pictureLinking": "http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F%E5%9B%BE.jpg", // 分享的圖片Url
"title": "趣約車-星海廣場(chǎng)站等你", //分享的標(biāo)題
"pictureUrl": "http://agent.qyueche.com/sup/ShareSdk/xing.html", //分享的網(wǎng)址鏈接
"platform": ["2", "3"] //1新浪微博2微信好友3微信朋友圈4QQ好友5QQ空間6短信
}, function (response) {})
}
}
})
}
總的來(lái)說(shuō)，安卓和ios的代碼相似度很高，但是代碼碼放的位置不一樣，這點(diǎn)要注意，callHandler是頁(yè)面調(diào)取ios或安卓的方法，registerHandler是ios和安卓調(diào)取頁(yè)面的方法
圖片中紅框的位置的方法名由h5頁(yè)面開(kāi)發(fā)者與ios和安卓人員商量定制。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了微信端html5頁(yè)面調(diào)用分享接口示例的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-14
HTML5實(shí)現(xiàn)分享到微信好友朋友圈QQ好友QQ空間微博二維碼功能
這篇文章主要介紹了HTML5實(shí)現(xiàn)分享到微信好友朋友圈QQ好友QQ空間微博二維碼功能的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-03
這篇文章主要介紹了Html5頁(yè)面二次分享的實(shí)現(xiàn)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-30
