Hybird App中JsBridge的非同步不執行的處理
阿新 • • 發佈:2018-11-02
H5內嵌APP,前端用vue,APP之間的互動處理,適配安卓ios, 為了降低開發成本,減少前端適配工作量,三端統一使用 WebViewJavascriptBridge
在進行後端介面請求的時候統一先把引數返給APP端,APP端進行加密之後,再返回給前端,前端再進行非同步請求
由於這裡涉及到非同步操作,直接寫的話直接不顯示,要一步一步的操作,上一步成功之後進行下一步操作,所以最終利用promise把APP,H5和後端之間的互動進行處理,
一步一步進行互動操作,最終成功
1. 先寫web端的bridge.js
var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 // alert('是否是Android:'+isAndroid); // alert('是否是iOS:'+isiOS); function setupWebViewJavascriptBridge(callback) { if(isAndroid){ if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) }else { document.addEventListener('WebViewJavascriptBridgeReady', function (event) { if(window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge); callback(WebViewJavascriptBridge) }, false) } }if(isiOS){ 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) } } export default { callhandler (name, data, callback) { setupWebViewJavascriptBridge(function(bridge) { bridge.callHandler(name, data, callback) }) }, registerhandler (name, callback) { setupWebViewJavascriptBridge(function (bridge) { bridge.registerHandler(name, function (data, responseCallback) { callback(data, responseCallback) }) }) } }
2. 封裝和APP互動的方法 callBridge.js
export default { methods:{ callBridgefn(json){ // 呼叫app加密方法 let p = new Promise((resolve, reject)=>{ this.$bridge.callhandler('encryptParams', JSON.stringify(json),(data) =>{ //encryptParams是APP端規定的方法名
resolve(data) })
}) return p;
},
goBack(){ // 呼叫APP的返回
this.$bridge.callhandler('goBack', (data) =>{ // goBack是APP端規定的方法名
})
}
}
}
3. 利用promise重寫axios非同步請求方法 promise.js
import axios from 'axios' export default{ methods:{ sendServer(param) { return new Promise((resolve,reject)=>{ axios.post(url ,param).then(res=>{ // url為請求地址 resolve(res.data) }).catch(err=>{ reject(err) }) }) }, } }
4. 頁面中請求介面的方法
_sendServer(param){
this.callBridgefn(param).then(data=>{
this.sendServer(JSON.parse(data))
.then(res=>{
// 這裡寫要對後端返回的資料進行的操作 }) })
}
5. 在頁面初始化的時候呼叫
created(){ this._sendServer(param) //param是要傳遞給APP進行加密的引數 }