使用h5进行混合app开发

H5（HTML5）是HTML最新的版本，它加强了在移动端的支援，有更好的体验、优化更适合移动端的Web应用程序。混合开发指的是在一个native的应用容器中，通过嵌入webview，将H5页面作为应用的一部分或者是全部，达到类似native应用的体验。下面为大家详细介绍H5进行混合app开发的原理。

## 1.前言

移动端开发中，App应用成为主流，而对于不依赖于硬件和系统融合的应用（如：社交、新闻、直播等），代码形式非常类似的WebView内嵌页面也成为了越来越多的选项。此时使用H5进行混合开发可以发挥特别的优势。

## 2. H5进行混合app开发原理

混合App开发，就是将Html5应用或网站包装为App可安装的形式，并在应用市场进行发布。在混合App开发中，H5页面是以WebView的方式展现的，WebView是Android系统提供的一个可直接嵌入页面的组件。WebView的好处是，可以通过非常简单的方式将H5页面嵌入到移动应用中并展现给用户，多数情况下实现的是集成HTML+CSS+JS三项技术的功能的包装。在WebView中，可以通过WebChromeClient与Js通信，完成页面功能的事件处理。

三项技术：

- Html5：HyperText Markup Language，也就是大家常听到的HTML。

- CSS：Cascading Style Sheets，是一种用于描述HTML等文档元素外观的语言。

- JS：JavaScript是一种面向对象的、动态的解释型计算机语言。

## 3.实现步骤

### 3.1 构建app内框架

针对Hyrbid App，则需要在Native应用（如IOS）上嵌入一个浏览器界面以调出具备业务逻辑运算能力的Webview。具体如何呷成需要用app框架方案，比如ReactNative，Ionic等。

### 3.2 页面管理

无论使用ReactNative还是其他框架，可以考虑采用单页面的方式进行页面之间的切换。前端也可以自主维护一套类似于路由的方案。

### 3.3 Native API调用

H5需要在Native App内调用某些原生的功能，这就存在一些安全性和可行性的问题。有专门的插件方案和原生桥接库的解决方法。常见的如Phonegap、Cordova、JPush Phonegap plugins，百度等。

举个栗子：

我们现在用的`window.location.replace`是属于JS里面的内部方法，它负责内部的页面跳转，但如果我们要访问到内部的native能力，就需要调用额外定义的API，比如第三方分享调用、拍照上传和调用原生地图等，这就需要调用到原生的能力了。很多案例使用JS将这些API封装到桥接库里面，这样调用的时候只需要执行如下代码：

```js

window.hackUtilsAPI.share({});

```

或者实际项目当中一些各种原生业务 JS 的业务复杂和难度就会大大降低。实现通信连接的方案有很多，主流的有：

1. Cocos2d-x自带的jsb库

2. WebView与native的的通讯方案

3. Phonegap的相关插件：PhoneGap在Javascript API与原生 API之间提供了一个桥接层，让HTML/CSS/JavaScript的应用程序能够访问手机的一些硬件设备和其他原生API的能力，如：Camera、Network、Acceleromete。

### 3.4 总体架构

H5与壳程序，以WebView应用为桥，两端通过协商好的方法进行数据交互，并得到原来的显著跨平台的能力。

## 4. 混合App优缺点

### 4.1 优点

- 跨平台：H5页面只需要编写一次，重新进行封装移植后即可同步在各个平台上面运行。

- 开发效率高：采用简单的html+js开发，不用像原生开发那样熟练掌握各种语言，所以开发效率提高很多。

- 更新方便：H5页面可以分离出去，单独发布，方便修改和发布，节省了重复编译和重新发布整个App的时间和流程。而原生更新完需要等待市场审核，并上线更新。

- 用户变现：使用H5页面进行混合开发时，可以通过增加广告或与项目的合作赚钱，发挥H5页面自身变现的优势。

- 兼容性较好：HTML5 的语法编写很多兼容性的方便处理，而且浏览器普及度也非常的高，可兼容性一般不会有问题。

### 4.2 缺点

- 用户体验和性能不如原生：H5页面在WebView内进行展示，与native程序进行比较出现各种问题，比如滑动卡顿，CPU占用率高，启动速度慢等。

- 编写难度较大：相比原生来说编写难度较大，前期难度很大。

- 安全性差：H5页面的开源和发布过程导致安全性差。

- 打包时开销增加：混合app需要在原生语言的基础上嵌入一些其他库以供使用，造成app包体积增大。

## 5. 总结

H5进行混合app开发，相比原生开发具有一系列的优势和劣势。在实际操作中，我们需要对当前项目需求做出完善的分析和需求，来选择最优的开发方式和工具。H5进行混合app开发虽然整体难度大，但适用范围广，开发效率高，适合一些轻度交互和动画类的应用，可以减小视频体量，同时业务逻辑不复杂的项目。总