h5与app通信方式

方式一：注入

h5定义调用方法

 commandHandler(notifyObj) {
      //  yourMethod为端定义的，postMessage和commonHander分别为IOS和Android的通讯调用方法；
        try {
                if (isIOS()) {
                    window.webkit.messageHandlers.yourMethod.postMessage(JSON.stringify(notifyObj));
                } else {
                    window.yourMethod.commonHandler(JSON.stringify(notifyObj));
                }
        } catch (error) {
            console.log(error);
        }
        return this;
    }

h5调用及接收native返回数据

// 定义方法
let common={
// 此为接收到的数据的初步处理函数
   interactiveHandle(data) {
        try {
          
            const _data = JSON.parse(data);

            switch (_data.type) {
         
            case 'appSetting':
                this._getAppSetting(_data.params);
                break;
            }
        } catch (e) {
            console.log(e, 'error');
        }
        return this;
    },
 _getAppSetting() {
        return true;
    },
// 调用此方法获取app配置
 getAppSetting(cb) {
        this._getAppSetting = cb;
        this.commandHandler({
            type: 'getAppSetting',
            params: {}
        });
    },

}
// 定义接收数据方法interactiveHandle native可主动调用  （此名和端协调统一定义）
window.interactiveHandle = data => {
    // data为native返回数据
    return common.interactiveHandle(data);
};

---

方式二：通过WebViewJavascriptBrige调用

h5通知android

window.WebViewJavascriptBrige.send(
      data,
      // 返回消息
      (res) => { }
)

接收安卓主动调用h5的函数

    window.WebViewJavascriptBrige.callHander(
          'changeColor', // android定义的方法名
          {}, // 参数
          (res) => {
              
          }
    )

h5通知IOS

和上面注入是一样的
window.webkit.messageHanders.xxx.postMessage()

IOS通知h5

写一个方法，接受对应的参数，此时只需要把这个方法暴露给window，IOS便可直接获取到，进行传参,h5只要在方法内接收对应参数进行操作即可

IOSmessage(data){
    // data为IOS传递过来的参数
}
window.IOSmessage=IOSmessage