Hybird app 开发入门之 Native 和 H5 页面交互原理

移动端主流的应用程序可分为 3 大类

Native App

原生应用，其页面资源文件都存放于本地

Web App

受限制与 UIwebview，页面存放于服务器

Hybird App

介于二者之间的混合应用

Hybird App 又叫混合应用，看上去像一个 native App，但实际只有一个 webview，里面是一个 web APP，它可兼具“native APP 良好的用户交互体验”和“web APP 跨平台开发”的优势。它可以使得开发者可以几乎零成本转型移动应用开发者，并且相同的代码只需针对不同平台进行编译就能实现多个平台上的应用，相较于 web APP 开发者还可以通过包装好的接口，调用大部分常用的系统 API。

本篇文章主要介绍 Hybird App 中原生页面和 H5 页面如何交互。

native 调用 js

创建一个 webview 对象，并绑定 webview 控件

①调用不带参数无返回值的 js 方法

②调用不带参数有返回值的 js 方法

③调用带参数无返回值的 js 方法

注意事项

4.4 以前仅仅可用 loadUrl 调用 js 方法，4.4 以后才可通过 evaluateJavaScript 调用 js 获取到返回值；

webView 是 UI 控件，调用的 js 函数若耗时太长，需在非 UI 线程的子线程中运行，以免造成 anr；

js 调用 native

①需要开启 javascript 调用 native 的开关, 如下

②设置 Native 与 JS 交互的全局桥对象

③在全局桥对象中（这里是 MainActivity 中）声明 js 要调用的方法，并加上注解 @JavascriptInterface，例如：

④在 HTML 中 js 调用原生的代码：

不带参数的方法：window.name.noParaFunc()

不带参数的方法：window.name.ParaFunc(‘test’)

注: 在 api17 之前 addJavascriptInterface 有风险，hacker 可以反编译获取 Native 注册的 Js 对象，然后在页面通过反射 java 的内置静态类，获取敏感信息实施破坏。

遇到的坑

如果 APP 中需要跳转到 http 页面，需要声明：

并且在 application 中的属性中添加

否则会出现以下错误(这是由于从 Android 9.0（API 级别 28）开始，默认情况下限制了明文流量的网络请求，对未加密流量不再信任，直接放弃请求，因此 http 的 url 均无法在 webview 中加载，https 不受影响)：

更多学习资料戳下方

https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=CSDN&timestamp=1662711257&author=xueqi