1 flider代理

app任意打開webview加載任意一個網址，然后我們用flider代理到本地文件 在頁面加入點擊事件 條主電腦本地啟動的 server 127.0.0.1

注意 有的app 做了安全限制 webview只能加載特定的url 所以我們需要修改webpack配置文件 并設置本地host 復制代碼

• 本地host軟件 switchhost

  比如配置 127.0.0.1 kk.com 復制代碼

• webpack 配置文件修改

  ... devServer: {disableHostCheck: true ,... 復制代碼

如果不修改webpack 配置 則 用host訪問webpackdevserver啟動的server時候則會提示 Invalid Host header

2 js通信文件

h5 與 Android和ios通信主要有兩部分

• sdk-platform.js 掛在到window上的方法，入參出參 從這里傳入傳出

  /*** app推送消息監聽* @param busisessType 指定監聽的業務類型* @param callback*/onPush: function (busisessType, callback) {//8if (tools.required(this.debug, {"busisessType": busisessType,"callback": callback}, 'onPush')) {tools.on('platform', 'onPush', {busisessType: busisessType}, callback)}}}})(window, window.wallet.tools); 復制代碼

• jsBridge-1.0.0.js 入參出參傳入原生 這里ios 和Android調用方法不同需要做一下區分

android

var res= w[nativeNS].invoke(methodName, JSON.stringify(param), addCall(callback, methodName)); 復制代碼

ios

message = {'methodName':methodName,'params':JSON.stringify(param),'callback':addCall(callback, methodName)};var res = window.webkit.messageHandlers.invoke.postMessage(message); 復制代碼

其實就是Android可以直接通過Android定義的方法直接調用，而ios不可以，需要通過postmessge方法

• wraper.js 前端代理客戶端提供方法

  /*** 根據輸入的手機號獲取通訊錄列表* @param {*} obj */export function getPhonesByNumber (num) {if (!isAPP) {return false}return new Promise(reslove => {window.wallet.platform.getPhonesByNumber({inputdata: num}, data => reslove(data.data))})} 復制代碼

對客戶端的方法實現了同名的代理方法，這樣的好處是可以避免h5運行在容器報錯，同時用promise封裝原來的callback回調，外層使用可以用await語法 更加簡潔，此處還可以添加默認參數 等等

2 android實現ajax

考慮到做加密 h5無法保證cookie加密，所以ajax由原生實現。。

to be continued...

轉載于:https://juejin.im/post/5b1f6e83f265da6e1e1ae6fd

總結

以上是生活随笔為你收集整理的hybrid开发调试记录的全部內容，希望文章能夠幫你解決所遇到的問題。

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