hybrid 调试问题记录

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) {//8
              if (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...