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

38V2}FCZUCXRXKTV0MYOC[0

随着智能手机的普及

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

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

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

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

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

原生应用(Native App)

网页应用(Web App,或者HTML5 App)

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

1502261624(1)

今天的分享

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

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

NCM8B[SK3F%K~]0Y[JRDGJD

01

– Hybrid App –

CHONG HOT

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

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

它与Web App一样使用HTML5技术

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

一个运行客户端

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

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

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

L3DKDV69P2~0294$GE%]ZCS

02

– 5 + App –

CHONG HOT

什么是5+App?

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

并用Hbuilder将HTML5打包而成的App

是Hybrid App的一种

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

VY63{OE)~0S3RIP}CWYO4%W

03

– HBuilder之MUI –

CHONG HOT

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

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

给开发者带来很大便利

%ZT{S[QNLIL$V3CO84Z`J~W

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

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

提高了操作体验

RW6`1D3KJJ7OQFJ_2LORH1I~K9O@(96N7Z5S27YPQA1CA1

04

– HBuilder之HTML5+ –

CHONG HOT

7)J2VBZMWNPEM9AQO{0IL38

05

– App的基本结构 –

CHONG HOT

在App开发过程中

经常遇到卡头卡尾的页面

此时若使用局部滚动

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

mui的解决思路是:

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

完全使用原生滚动

具体做法则是:

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

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

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

T6H4IV13}O{H43J%K[C5L58

06

– Webview –

CHONG HOT

在5+ App中

最基本的组成单位是webview

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

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

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

子页面是嵌在webview内部的

主要用于内容的分区展示

2ZA11BQR6G``IVMBF%2UCTG

新窗口是带有返回键的

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

C7SMKZ%E)E4622IJUI6I%1Q

07

– Hbuilder的优势 –

CHONG HOT

(1)

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

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

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

(2)

HTML5强化引擎

接近原生的性能

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

(3)

高度封装的原生API

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

08

– 分享者 –

重和科技前端开发工程师:纪锐淳(jrc)

– END –

JLECG5(QYP7@MB9`ES$)C2A

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

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

商务电话:13510734723 / 0755 8656 2180

商务信箱:bd@chonghot.com

}I0YI07@5G8(DH57C[]KEVD

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

赞 (0)
分享到:更多 ()