2019獨角獸企業重金招聘Python工程師標準>>>

h5和app之間的webview交互

• 這是常用的交互方法之一，iOS可以使用WKWebView,安卓可以使用JsBridge,完成常見的交互效果。

function webViewHandler(iosCallback, adrCallback) {if (getMobileOperatingSystem() === 'iOS') {setupWebViewJavascriptBridge(iosCallback);} else if (getMobileOperatingSystem() === 'Android') {connectWebViewJavascriptBridge(adrCallback);}/*獲取移動終端的操作系統,mobile*/function getMobileOperatingSystem() {var userAgent = navigator.userAgent || navigator.vendor || window.opera;if (/windows phone/i.test(userAgent)) {return "Windows Phone";}if (/android/i.test(userAgent)) {return "Android";}if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {return "iOS";}return "unknown";}/*設置頁面js橋,mobile*/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 = 'wvjbscheme://__BRIDGE_LOADED__';document.documentElement.appendChild(WVJBIframe);setTimeout(function () {document.documentElement.removeChild(WVJBIframe)}, 0)}/*連接頁面js橋,mobile*/function connectWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) {callback(WebViewJavascriptBridge)} else {document.addEventListener('WebViewJavascriptBridgeReady', function () {callback(WebViewJavascriptBridge)},false);}} };

• 調用方式如下：

webViewHandler(function (bridge) {//JsCallAppFuncName是js調用客戶端iOS的方法名，params則是h5傳給客戶端app的參數,appCallbackHander是調用成功后js收到的回調。bridge.callHandler('JsCallAppFuncName', {"params": true},callbackAppHander);// AppCallJsFuncName是js注冊的方法，供客戶端iOS調用，callbackJsFunc是調用后js執行的回調bridge.registerHandler('AppCallJsFuncName', callbackJsFunc); }, function (bridge) {// 初始化bridge.init(function (message, responseCallback) {responseCallback({'Javascript Responds': 'Wee!'});});// 方法參數和ios是一樣的，只是Android必須要有初始化過程window.WebViewJavascriptBridge.callHandler('JsCallAppFuncName', {'params': true}, function (responseData) {console.log(responseData)});bridge.registerHandler('AppCallJsFuncName', callbackJsFunc); })

獲取設備的基本信息和環境

function getMobileInfo() {var info = {screen: {},device: {deviceType: 0,deviceVal: ''},env: {type: 0,value: ''}};// 屏幕大小info.screen.width = window.screen.height;info.screen.height = window.screen.width;// 設備終端var sUserAgent = navigator.userAgent.toLowerCase(),bIsiOs = (/iPad|iPhone|iPod/.test(sUserAgent) && !window.MSStream),bIsAndroid = sUserAgent.match(/android/i) == "android",bIsMidp = sUserAgent.match(/midp/i) == "midp",bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",bIsUc = sUserAgent.match(/ucweb/i) == "ucweb",bIsCE = sUserAgent.match(/windows ce/i) == "windows ce",bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile",isWeixin = sUserAgent.match(/MicroMessenger/i) == "micromessenger",isWeiBo = sUserAgent.match(/WeiBo/i) == "weibo",isQQ = sUserAgent.match(/QQ/i) == "qq";if (bIsiOs) {info.device.deviceType = 1;info.device.deviceVal = 'iOS';} else if (bIsAndroid) {info.device.deviceType = 2;info.device.deviceVal = 'Android';}else if (bIsWM) {info.device.deviceType = 3;info.device.deviceVal = 'Windows mobile';} else {info.device.deviceType = 0;info.device.deviceVal = 'pc';}// 第三方環境if (isWeixin) {info.env.type = 1;info.env.value = 'weixin';} else if (isWeiBo) {info.env.type = 2;info.env.value = 'weibo';} else if (isQQ) {info.env.type = 3;info.env.value = 'qq';} else {info.env.type = 0;info.env.value = '其他';}return info;}

• 返回的是設備屏幕大小，終端類型，以及所處環境(微信，微博，qq)

轉載于:https://my.oschina.net/chinahufei/blog/1578106

總結

以上是生活随笔為你收集整理的H5开发中常用的js方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。