h5页面和app进行交互

一、react native开发的

1.h5向app发送消息，app 接收并操作

//同通过 window.postMessage 向 app 发送消息
window.postMessage(
      JSON.stringify({
          action: "login",//和app协商的时间方法
      })
);

2.app操作完成，向h5 返回消息，h5监听并处理 

// 获取app 返回的 值
/* ios交互 */
window.addEventListener("message", function (res) {
    try {
        if (JSON.parse(res.data).token) {
          
        }
    } catch (e) { console.log(e) }
});
/* 安卓交互 */
document.addEventListener("message", function (res) {
    try {
        if (JSON.parse(res.data).token) {
           
        }
    } catch (e) { console.log(e) }
});

 二、原生app

1.h5使用app方法：

 if (ios的) {
     window.webkit.messageHandlers.fn.postMessage({a:'xxx'})
  } else {
     window.android.fn({a:'xxx'})
 }

2.app使用h5方法

window['fn'] = function(){console.log('aaa')}
//h5将方法挂载到window，app直接调用