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(WebJava ) { 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(s). 'none'; WVJBIframe.src = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0) } setupbridgeJava (WVJBIframe) }, 0) } setupbridgeJavascriptscript. ('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: juncson, success: juncson, success: juncson, 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和安卓人員商量客製化。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。