h5页面和app进行交互

  • Post author:
  • Post category:其他


一、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直接调用



版权声明:本文为qq_40591925原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。