JS和原生APP交互(H5和原生Android、IOS交互)_js与原生app交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42398301/article/details/106543574

本文详细介绍了H5页面嵌入原生APP后的交互方法，包括原生调用H5方法及传参，以及H5向原生APP传值的具体实现。针对iOS和Android平台，提供了不同调用方式的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

h5页面嵌入到了原生app内，所以需要接收原生app的方法和参数，以及向原生app传值

解决办法

1.原生app调用h5的方法，以及向h5传参
showSearch是h5代码中控制是否显示popup层的方法名，res是原生app传过来的参数，h5代码：

//js与原生app交互
    window.showSearch = (res) => {
      this.popupShow = !this.popupShow
      console.log(res)//res就是原生app传过来的参数
    }

2.js向原生app传值
AppData这个JSON对象是我们要向app传的所有参数，decision是h5开发人员和app开发人员约定好的方法，

     var AppData = Object.assign(
        {params:data}
      );
      var u = navigator.userAgent,
        app = navigator.appVersion;
      //android终端或者uc浏览器
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      //ios终端
      var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X)/);
      
      if(isiOS){
        window.webkit.messageHandlers.decision.postMessage(AppData);
      }else if(isAndroid){
        android.decision(JSON.stringify(AppData));
      }

js调用原生Android有两种写法：

//第一种
JavaScript:android.原生方法名(params);
//第二种
window.android.原生方法名(params);