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 不受影响)：

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

（转载）H5 手机 App 开发入门：概念篇
H5 手机 App 开发入门:概念篇一.H5 的含义二.原生应用 2.1 概念 2.2 优点 2.3 缺点三.Web 应用 3.1 概念 3.2 优点和缺点 3.3 Web APP 的劣势 3. ...
（转载）H5 手机 App 开发入门：技术篇
H5 手机 App 开发入门:技术篇一.手机 APP 的技术栈二.WebView 控件三.原生技术栈 3.1 Xcode 3.3 Android Studio 四.混合技术栈 4.1 框架种类 ...
H5 手机 App 开发入门：技术篇
新人学习手机 App 开发,一开始总要选择一条学习路径. 如果你熟悉 Java 语言,可以学习安卓开发:如果熟悉脚本语言(比如 Python 或 Ruby),可以学习 Swift 语言,进行 iOS ...
HTML5plus 移动 App开发入门
咳咳,图片复制不到文章里面来,大家去我的资源里下载吧,PDF版的. HTML5plus 移动 App开发入门更新时间:2014年 4月 17日 HTML5 Plus 应用概述 HTML5 Plus ...
python手机app开发_H5 手机 App 开发入门：技术篇
新人学习手机 App 开发,一开始总要选择一条学习路径. 如果你熟悉 Java 语言,可以学习安卓开发:如果熟悉脚本语言(比如 Python 或 Ruby),可以学习 Swift 语言,进行 iOS ...
5G 时代的 Android App 开发入门与项目实战
随着移动互联网的持续发展,Android系统从智能手机逐步拓展到平板电脑.智能电视.车载大屏.智能家居.智能手表等诸多设备,Android开发依然是前景可期的IT岗位. 当然,整个社会正在迈向5G时代 ...
android开发入门与实践_我的新书《Android App开发入门与实战》已经出版
前言工作之余喜欢在CSDN平台上写一些技术文章,算下时间也有两三年了.写文章的目的一方面是自己对技术的总结,另一方面也是将平时遇到的问题和解决方案与大家分享,还有就是在这个平台上能和大家共同交流. ...
Android APP开发入门
Android APP开发入门目录 android_studio很好用的一个就是debug 1 1导入demo编译出错 1 4使用as运行安装不了apk安装adb 2 5SeekBar组件使用 2 ...
HTML5 Plus 移动 App开发入门
HTML5 Plus 移动 App开发入门 HTML5+扩展了 JavaScript 对象 plus,使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等, ...
傻瓜式Android APP开发入门教程
这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤一一讲解,非常简明的一个Android APP开发入门教程,android各种机子和rom的 ...

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

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

最新文章

热门文章