【干货】Hybrid App，让移动开发更简单

随着智能手机的普及

移动端应用几乎成为每个互联网产品的标配

在快速迭代的互联网战场中

高效开发、低成本上线产品

是每个应该开发团队追求的目标

目前，移动应用可以粗分为三种：

原生应用（Native App）

网页应用（Web App，或者HTML5 App）

以及它们的混血儿——混合模式移动应用（Hybrid App）

今天的分享

就由重和科技的前端工程开发师纪锐淳（jrc）

带我们去了解一下近年来蓬勃发展的Hybrid App

01

– Hybrid App –

CHONG HOT

Hybrid App又称混合模式移动应用

是介于Wed App、Native App这两者之间的一类App

它与Web App一样使用HTML5技术

但不同之处在于一个运行浏览器

一个运行客户端

优点在于Hybrid App可以调用系统功能

并且运行于本地，速度更快

对比Native App又具有跨平台的优点

02

– 5 + App –

CHONG HOT

什么是5+App？

5+App是一种使用Dcloud提供的MUI和HTML5+等技术产品

并用Hbuilder将HTML5打包而成的App

是Hybrid App的一种

其他还有诸如React Native、Ionic+Angular、Vue+Wexx等技术组合

03

– HBuilder之MUI –

CHONG HOT

MUI提供了前端技术模拟的接近iOS平台UI的UI控件库

以及部分安卓独有的UI控件库

给开发者带来很大便利

其中部分UI控件引入了原生加速

如侧滑导航，新窗口滑动等

提高了操作体验

04

– HBuilder之HTML5+ –

CHONG HOT

05

– App的基本结构 –

CHONG HOT

在App开发过程中

经常遇到卡头卡尾的页面

此时若使用局部滚动

在android手机上会出现滚动不流畅的问题

mui的解决思路是：

将需要滚动的区域通过单独的webview实现

完全使用原生滚动

具体做法则是：

将目标页面分解为主页面和内容页面

主页面显示顶部导航、底部选项卡等

内容页面显示具体需要滚动的内容

06

– Webview –

CHONG HOT

在5+ App中

最基本的组成单位是webview

每个webview都是一个独立的HTML容器

每个App页面都是由一个或多个webview组合嵌套而成的

根据其实现内容可分为两大类：子页面和新窗口

子页面是嵌在webview内部的

主要用于内容的分区展示

新窗口是带有返回键的

后进层级高并可重叠的webview组

07

– Hbuilder的优势 –

CHONG HOT

（1）

不依赖特定的某个类库或前端框架

使用原生的HTML+CSS+JS即可快速打包为App

当然使用MUI和HTML5+效果更好

（2）

HTML5强化引擎

接近原生的性能

部分UI组件支持原生加速，体验更好

（3）

高度封装的原生API

可以方便且跨平台地调用原生功能

08

– 分享者 –

重和科技前端开发工程师：纪锐淳（jrc）

– END –

你亦可选择在官网上查看更多关于我们的信息

官网地址：http://www.chonghot.com/

商务电话：13510734723 / 0755 8656 2180

商务信箱：bd@chonghot.com

未经允许不得转载：重和科技的博客 » 【干货】Hybrid App，让移动开发更简单