随着智能手机的普及
移动端应用几乎成为每个互联网产品的标配
在快速迭代的互联网战场中
高效开发、低成本上线产品
是每个应该开发团队追求的目标
目前,移动应用可以粗分为三种:
原生应用(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,让移动开发更简单