APP在线开发
混合开发模式省心省力

使用h5进行混合app开发注意事项说明

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

## 1.前言

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

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

混合App开发,就是将Html5应用或网站包装为App可安装的形式,并在应用市场进行发布。在混合App开发中,H5页面是以WebVh5打包appiosiew的方式展现的,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,百度等。

举个栗子:

我们现在用的`windh5封装苹果app显示不兼容ow.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开发虽然整体难度大,但适用范围广,开发效率高,适合一些轻度交互和动画类的应用,可以减小视频体量,同时业务逻辑不复杂的项目。总

未经允许不得转载:易嘉科技 » 使用h5进行混合app开发注意事项说明