比较Web App、Hybrid App与Native App的设计差异
跨平台开发框架解析
跨平台开发框架解析跨平台开发框架是一种技术工具，用于简化应用程序的开发过程，并使其能够在不同的操作系统和设备上运行。
随着移动互联网的快速发展，跨平台开发框架越来越受到开发者的关注和使用。
本文将对几种常见的跨平台开发框架进行解析和比较，以帮助读者选择最适合自己项目需求的框架。
一、Ionic框架Ionic是一个基于HTML5的移动应用开发框架，它通过使用Web技术栈来创建跨平台应用程序。
该框架结合了Angular.js、CSS和HTML，使开发者能够快速构建具有原生应用体验的移动应用。
1. 特点：- 强大的用户界面组件库：Ionic提供了丰富的用户界面组件库，如按钮、菜单、列表等，使开发者能够轻松构建出美观且功能强大的应用界面。
- 完整的开发生态系统：Ionic框架不仅提供了开发UI的工具，还包括了一系列的开发工具和服务，如命令行工具、打包发布等，为开发者提供了全方位的支持。
- 轻松适配多个平台：Ionic使用CSS样式和JavaScript脚本，能够自动适配不同平台的UI和布局，从而实现一次编写，多平台运行。
2. 使用案例：- Untappd：一款基于Ionic框架开发的用于探索和分享啤酒的移动应用，它在iOS和Android平台上运行良好，用户界面清新简洁。
二、React Native框架React Native是由Facebook开发的跨平台开发框架，它使用JavaScript和React库来构建原生应用。
与传统的跨平台开发框架相比，React Native采用了独特的方式，通过在原生组件上渲染React组件，从而实现性能更好的跨平台开发。
1. 特点：- 高性能：React Native使用原生组件来渲染UI，相比传统的Hybrid App或者Web App，它能够提供更快的应用性能和更好的用户体验。
- 热更新：React Native支持热更新，开发者可以在不重新编译应用的情况下更新应用的JavaScript代码，从而提高开发效率。
什么是webApp？与原生APP的区别
什么是webApp？与原⽣APP的区别
1、webApp指：
使⽤html5开发的移动web应⽤，是基于浏览器运⾏的,⼏乎可以不加修改的运⾏在PC/Android/IOS等
优势：⼀套代码多处运⾏
劣势：某些底层功能缺失，运⾏速度不如原⽣App
2、原⽣App指：
iOS: Object-C 或者 swift
Android: java
Windows Mobile：Visual C++
3、webApp与原⽣APP的区别
（1）地位不同：
web是⼀种技术，⽽webapp是根据这⼀技术开发成的应⽤，web是源头，webapp是⽀流
（2）功能不同
WebApp跨平台开发，不需要去卖场来下载安装App，任何时候都可以发布App，不需要官⽅卖场的审核。
原⽣App以独⽴的应⽤程序运⾏(并不需要浏览器)，⽤户必须⼿动下载并安装，需要卖场审核发布
（3）版本控制的区别
WebApp所有的⽤户都是⽤同样的版本。
原⽣app⽤户可以⾃由地选择是否更新软件版本，所以会出现不同⽤户同时使⽤不同版本的情况。
前端开发中常见的跨端开发技术介绍
前端开发中常见的跨端开发技术介绍随着移动设备的普及和多样化，前端开发中常常面临跨平台、跨终端的需求。
为了提高效率和降低开发成本，开发者们一直在不断探索和尝试跨端开发技术。
本文将介绍几种常见的跨端开发技术，包括响应式设计、Hybrid App开发和PWA。
1. 响应式设计响应式设计是一种基于CSS3媒体查询的开发方法，通过设置不同的样式规则和布局来适应不同屏幕大小的设备。
这种方法可以使网页在不同的终端上提供一致的用户体验，而无需为不同平台编写不同的代码。
通过使用flexbox、grid和百分比单位等技术，开发者可以轻松实现响应式设计。
2. Hybrid App开发Hybrid App开发是一种同时利用Web技术和Native技术的开发方式。
通常采用HTML、CSS和JavaScript开发应用框架，然后使用WebView在移动设备上运行。
Hybrid App可以充分利用Web技术的优势，同时也可以访问设备的原生功能，如相机、地理位置等。
开发者可以使用框架如Ionic、React Native等来构建Hybrid App。
3. PWA（Progressive Web App）PWA是一种利用Web技术开发具有原生应用体验的应用。
它基于Web标准，使用Service Worker可以在离线状态下继续访问应用。
PWA可以通过添加到主屏幕、推送通知等功能，实现和原生应用类似的用户体验。
开发者可以使用PWA的框架和工具，如Workbox、PWA Starter等来快速搭建PWA应用。
4. FlutterFlutter是一种跨平台的UI开发框架，可以同时在iOS和Android上运行。
它使用Dart语言，通过自己的渲染引擎绘制用户界面，实现原生级别的性能和体验。
Flutter的热重载功能使开发者能够快速预览和调整UI的变化。
Flutter在跨端开发中被广泛使用，如开发移动应用、桌面应用等。
5. 微信小程序微信小程序是一种运行在微信客户端上的应用，具有与原生应用类似的用户体验。
app类型划分
app类型划分
app类型分为native类型，web类型，hybrid类型
⼀.native类型
1.优点：直接依托于操作系统，交互性最强，性能最好，功能最为强⼤
2.缺点：开发成本⾼，⽆法跨平台，更新缓慢，审核周期慢，维护成本⾼
3.native类型是app的原⽣页⾯，做⾃动化⾛uiautomator
⼆.web类型
1.优点：开发成本低、可以跨平台调试⽅便、更新⽆需通知⽤户，不需要⼿动升级，⽆需安装App，不会占⽤⼿机存储空间
2.缺点：⽆法获取系统级别的通知，提醒，动效等等，⽤户留存率低，体验较差设计受限制诸多
3.web类型⼀般是浏览器app，⾃动化⾛的是chromedriver
三.hybrid类型
1.开发成本较低,可以跨平台,调试⽅便维护成本低,功能可复⽤、性能和体验要⽐web app好更新较为⾃由
2.相⽐原⽣、性能仍然有较⼤损耗、不适⽤于交互性较强的app
3.hybrid是native结合web，⼤多数app是这种类型。
是h5嵌⼊native的形式。
4.native原⽣页⾯和h5的区别：
（1）原⽣APP修改页⾯要重新发布，等待审核。
H5页⾯的修改可以随时上线，不⽤等待审核；
（2）H5跨平台，iOS和android需要各⾃开发。
相对原⽣，H5开发成本低；
（3）原⽣APP能很好的使⽤设备底层功能，如摄像头、⽅向传感器、重⼒传感器等。
H5有所限制；
（4）下拉刷新的时候H5会有⼀个明显的刷新现象，⽐如闪现、导航栏标题消失等；
（5）h5页⾯打开⼀个页⾯顶部可能有个加载进度条；
（6）页⾯的底部导航在上拉的时候如果跟着⼀起滚动，就是H5页⾯。
移动端混合开发框架分析
移动端架构分析目录移动端架构分析 (1)1移动端常见开发模式 (5)1.1纯N ATIVE A PP (5)1.1.1主流框架 (5)1.1.2优势 (6)1.1.3劣势 (6)1.1.4主流应用 (6)1.2H YBRID A PP (6)1.2.1多View混合型 (7)1.2.1.1主流框架 (7)1.2.1.2优势 (7)1.2.1.3劣势 (7)1.2.1.4主流应用 (7)1.2.1.5发展趋势 (7)1.2.2Web主体型 (8)1.2.2.1主流框架平台 (8)1.2.2.2优势 (9)1.2.2.3劣势 (9)1.2.2.5发展趋势 (10)1.2.3单View混合型 (10)1.2.3.1主流框架 (10)1.2.3.2优势 (10)1.2.3.3劣势 (10)1.2.3.4主流应用 (10)1.3W EB A PP (10)1.3.1主流框架 (11)1.3.2优势 (11)1.3.3劣势 (11)1.3.4主流应用 (11)1.4四种主要开发模式对比 (11)2移动前端主流框架分析 (12)2.1W EB和N ATIVE混合 (12)2.1.1WindVane+Hybrid+Native (12)2.1.1.1简介 (12)2.1.1.2框架实现 (12)2.1.1.3架构图 (13)2.1.2AppCan (13)2.1.2.1简介 (13)2.1.2.2框架实现 (13)2.2跨平台原生应用 (15)2.2.1BeeFramework (15)2.2.1.1简介 (15)2.2.1.2框架实现 (15)2.2.1.3架构图 (16)2.2.2Native Script (17)2.2.2.1简介 (17)2.2.2.2框架实现 (17)2.2.2.3结构图 (18)2.2.3React Native (18)2.2.3.1简介 (18)2.2.3.2框架实现 (18)2.2.3.3架构图 (20)3数梦移动端开发框架选择...................................... 错误!未定义书签。
手机应用开发的原生app,WEBAPP,混合app的认识
⼿机应⽤开发的原⽣app,WEBAPP,混合app的认识原⽣应⽤、Web应⽤、混合应⽤优缺点分析原⽣App vs 移动Web App ：定义什么叫做原⽣App?原⽣App是专门针对某⼀类移动设备⽽⽣的，它们都是被直接安装到设备⾥，⽽⽤户⼀般也是通过⽹络商店或者卖场来获取例如与 .随便说⼏个原⽣App的例⼦，⽐如iOS 的以及Android 的什么叫做移动Web App?⼀般说来，移动Web App都是都是需要⽤到⽹络的，它们利⽤设备上的浏览器(⽐如iPhone的Safari)来运⾏，⽽且它们不需要在设备上下载后安装。
什么是混合app?Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是⼀个Native App，但只有⼀个UI WebView，⾥⾯访问的是⼀个Web App，⽐如街旁⽹最开始的应⽤就是包了个客户端的壳，其实⾥⾯是HTML5的⽹页，后来才推出真正的原⽣应⽤。
再彻底⼀点的，如掌上百度和淘宝客户端 Android版，⾛的也是Hybrid App的路线，不过掌上百度⾥⾯封装的不是WebView，⽽是⾃⼰的浏览内核，所以体验上更像客户端，更⾼效。
汽车有混合动⼒Hybrid，移动应⽤同样也有混合模式。
Hybrid App（混合模式移动应⽤）兼具“Native App良好⽤户交互体验的优势”和“Web App跨平台开发的优势”。
很多⼈不知道市场上⼀些主流移动应⽤都是基于Hybrid App的⽅式开发，⽐如国外有Facebook、国内有百度搜索等。
综合⼀下就是：“Hybrid App同时使⽤⽹页语⾔与程序语⾔开发，通过应⽤商店区分移动操作系统分发，⽤户需要安装使⽤的移动应⽤”。
总体特性更接近Native App但是和Web App区别较⼤。
只是因为同时使⽤了⽹页，所以开发成本和难度⽐Native App要⼩很多。
因此说，Hybrid App兼具了Native App的所有优势，也兼具了Web App使⽤HTML5跨平台开发低成本的优势---------------------------------------------------------------------------------------------------------------------最近原⽣应⽤、Web应⽤、混合应⽤的名字让我们听得⽐较熟悉了，现在我们就通过评析各种应⽤的优缺点来更进⼀步看看这三者的区别。
Web前端的跨平台解决方案
Web前端的跨平台解决方案随着互联网技术的发展，Web前端的跨平台解决方案越来越得到重视。
在不同的平台上展示相同的Web应用程序，对于用户体验和开发效率都至关重要。
本文将介绍几种常见的Web前端跨平台解决方案，并分析它们的优缺点。
一、响应式设计响应式设计是一种流行的Web前端跨平台解决方案。
它通过使用媒体查询和弹性网格布局等技术，使网页能够在不同设备上自适应地展示。
无论是在大屏幕电脑上还是在手机或平板上，网页都能够以最佳的布局和交互方式呈现给用户。
响应式设计的优点是兼容性好，维护成本低，但在性能方面可能有一定的问题。
二、多端统一开发框架多端统一开发框架是另一种常见的Web前端跨平台解决方案。
例如，React Native和Flutter等框架允许开发者使用相同的代码base来构建iOS、Android和Web应用程序。
这些框架通过将Web技术（如HTML、CSS和JavaScript）转化为原生UI组件，从而实现跨平台的开发。
多端统一开发框架的优点是开发效率高，用户体验接近原生应用，但也存在一些性能和兼容性的挑战。
三、PWA技术PWA（Progressive Web App）技术是一种结合Web和原生应用特点的跨平台解决方案。
PWA应用可以像普通的Web应用一样在浏览器中运行，也可以在离线状态下提供某些功能，同时能够通过添加到主屏幕等方式，与原生应用类似地提供给用户。
PWA技术的优点是可以适应不同平台和网络环境，并提供接近原生应用的用户体验。
但在某些功能和性能方面可能有限制。
四、Hybrid混合开发Hybrid混合开发是将Web技术与原生技术结合，开发跨平台应用的一种方式。
通过使用框架如Ionic和Cordova等，开发者可以使用Web技术构建应用，然后使用原生容器将应用打包成原生应用。
Hybrid混合开发的优点是开发效率高，能够快速在多个平台上发布应用，但在性能和用户体验方面可能存在一些问题。
HybridApp解决方案
HybridApp解决方案_No1_混合模式(Hybrid)App开发概述1.1. APP三种开发模式智能手机之普及不用多说，手机APP渗投到各个行业：电商（淘宝、京东等）、金融（各手机行业、P2P借贷等）、医疗（智慧医疗）、交通（滴滴、Uber等）、教育（慕课网等）、餐饮（饿了吗、美团等）……反正只要是个企业，无论规模大小，都已经订制或将要订制自己的APP。
这么多APP无外乎就三种模式：Native App、Web App、Hybrid App。
Native App，原生APP，使用原生（即Android或iOS）开发的APP。
两年多以前这非常流行，到现在为止，原生开发人员数量众多，一抓一大票，技术成熟，好多培训机构都抱着老掉牙的API翻来覆去的讲——尤其是Android。
Sorry，说错话了……使用原生开发有其优势：应用的性能好，适配起来相对容易。
学习成本要看人，个人觉得技术点不多，门槛相对稍高，但入门后学习起来就很轻松——网络资料实在是太多了。
但原生APP最头疼的有三个问题：1、无法跨平台：Android和iOS都需要开发各自平台的版本——开发成本高；2、升级麻烦：每次升级都要下载安装包，Android还好，反正不需要审核，下载就下载吧，但iOS就麻烦了，发布每个版本还得经过App Store的审核，这导致第三个问题；3、Android和iOS很难同步发布。
所谓的Web App，就是把手机当做一个浏览器（Android使用WebView，iOS使用UIWebView），做几个页面挂在服务器端，类似于一个小网站。
这样说虽然不太贴切，但实际上给人的感觉就是这样的。
虽然开发成本大大降低，但页面访问速度慢、操作体验差。
于是第三种模式诞生了。
乍一看和Web App没啥差别，但涉及到的技术成本、开发成本、学习成本比Web App高，它综合了Web App的开发速度和Native App的高性能体验。
之所以说学习成本高，是因1.2. Hybrid App所需技术Hybrid App由于需要保证运行性能与开发速度，需要如下技术支持，本系列博文均会按照Demo的开发顺序依次描述本人的开发心得和教训，希望能起到一个抛砖引玉的作用。
hybridapp(混合模式移动应用)
Hybrid App（混合模式移动应用）Native App：原生应用，基于本地（操作系统）运行的应用。
Web App：基于浏览器运行的应用。
Hybrid App：介于Native App和Web App两者之间的App。
看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，体验上像客户端，更高效。
比如：掌上百度和淘宝客户端Android版，走的也是Hybrid App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核。
Hybrid App（混合模式移动应用）兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
用HTML5开发Hybrid App既能够发挥HTML5强大的界面表现力、跨平台的特性又能够弥补纯HTML5 Web App体验差的问题。
“开发HTML5的Web App”和“用HTML5开发Hybrid App”是完全两个不同的概念。
开发HTML5移动应用通常是指“运行在浏览器上的Web App”。
而“用HTML5开发Hybrid App”则只是把HTML5当成手段和工具，开发具有Native特质的Hybrid App才是目的。
基于HTML5开发的Hybrid App使用HTML5、CSS3进行应用界面的布局。
通过Javascript调用系统能力，如摄像头、传感器、数据传输、文件读写等。
Javascript可以调用的系统能力不仅仅局限于功能层面，市场上也出现了支持UE交互完全使用原生实现的移动中间件如AppCan等。
通过JS调用API的方式，基于HTML5的Hybrid App不但可以实现系统功能的调用，各种的原生UE交互也得以实现。
这极大的弥补了HTML5性能和体验不足的弱势，又充分发挥了HTML5页面构建灵活、跨平台、低成本的优势。
继而成为企业移动化的最佳选择。
随着终端性能的不断加强，最终企业可以选择完全使用HTML5来达成移动战略，回归灵活的B/S架构，重走类似于PC时代从Client到Browser的路径。
移动端学习之理解WEBAPP、NativeAPP、HybridAPP以及ReactNati。。。
移动端学习之理解WEBAPP、NativeAPP、HybridAPP以及ReactNati。
因为⼯作需要，需要进⼀步了解移动端的开发，遂返回复习移动端的知识点，在开始学习之前，产⽣了疑惑WEB APP 、Native APP 、Hybrid APP、React Native、Uniapp、H5这些东西到底是什么？感觉是那么熟悉，单词拆分开每⼀个都认识，但是合在⼀起就完全不知道什么意思了，遂⾃⾏百度查询，⾃⼰解⾃⼰的惑吧。
个⼈博客，理解不具权威性。
⼀.WEB APP 通俗的理解，WEB APP 即为使⽤HTML、CSS、JS三⼤前端基础进⾏开发的WEB APP，是基于浏览器进⾏运⾏使⽤的；使⽤HTML、CSS、JS可以在浏览器上怎么开发⽹页，那么WEB APP也是⼀样，只是浏览器的使⽤场景放在了⼿机等移动端设备上。
那么产品转移到了移动端上，跟电脑端有⼏点不同和需要注意： ①适配，⼿机的屏幕尺⼨是⽐电脑⼩很多的，因此不能⽤传统的电脑端去衡量⼀个⼿机端的屏幕显⽰，在开发的时候可在CSS头部加上@media屏幕⼤⼩判断（可选择REM取代PX来进⾏⼤⼩适配），也可使⽤JS提供的navigator对象获取客户使⽤的设备，根据设备来相应的显⽰，这与在CSS中配置@media是⼀样的道理。
②交互，电脑端的交互就是⿏标点点点，然后键盘可以敲敲敲，但是⼿机端不⼀样，⼿机端其实交互很单⼀，现在都是⼤屏⼿机，基本上⼤家也就是点点、滑滑然后再输⼊，所以在使⽤移动端开发WEB APP的时候，要注意客户的使⽤场景，WEB APP⽐电脑端操作少很多，也功能简单了很多。
③性能与速度，⼿机端不⽐电脑端，电脑端的⽹络都是⽐较稳定的，要么是光缆，就算是wifi也是信号很强的，但是⼿机端是不⼀定的，2G、3G、4G都有可能，⽤户的⽹络有不稳定的因素，所以在开发WEB APP时应该注意不能使⽤较⼤的资源，⽐如引⼊⾮常⼤的js⽂件，花费客户⼤量的时间去请求，且因为是运⾏在⼿机浏览器上，不同移动设备的浏览器也是参差不齐的，⽤户容易出现页⾯根本加载不出来，或者运⾏及其缓慢的现象。
webapp1
webapp1⼀、HyBrid App概述HyBrid App与Web App以及Native App的区别① Web App开发WebApp开发，严格来说并不是⼀个APP软件，只是⼀个Web型的微⽹站。
优点：开发时间短、兼容性强、⽅便系统移植。
缺点：必须有⽹络的⽀持，⽤户体验度相对较差,不能调⽤⼿机中例如摄像头,⼆维码扫描仪的模块。
在国内主要应⽤在:微信的公众号开发层⾯② Native App开发Native App开发，就是⼀个原⽣的APP软件，其主要是通过Java或Object-C来实现原⽣的⼿机APP软件。
优点：原⽣APP、⽤户体验度⾮常好、可以调⽤⼿机的底层组件。
缺点：开发时间长、兼容性差、必须要掌握Java或Object-C等编程语⾔。
③ Hybrid App开发介于WebApp、Native这两者之间的APP，开发时间短、成本低，⽤户体验度好，可以调⽤⼿机的底层组件，⽅便移植，是⽬前以及未来APP开发的流程趋势,为app应⽤⽽⽣,不为app的底层⽽⽣。
这种开发的缺点:⽆法调⽤系统的底层,例如:控制系统的内存.所以如果你开发⼀款游戏那么这种开发模式是⽆法帮你实现的.⼆、HyBrid App开发前期准备1、注册APICloud平台2、注册完毕后登录，进⼊开发控制台3.创建应⽤(粉椒⼴场)创建完后,其实apiCloud官⽅会默认给我们⼀些学习的⽰例代码,我们需要⽤svn把代码进⾏获取4.使⽤svn获取粉椒⼴场舞的app⽰例代码第1步:点击代码导航条进⼊代码获取模块第2步:分别svn的地址,账号和密码第3步:找1个app的开发⽬录,然后检出⽰例代码如果第⼀次检出需要输⼊⽤户名和密码,输⼊过后,以后都可以省略这个步骤5.使⽤apiCloud的官⽅云编译编译粉椒⼴场舞的app⽰例代码⽣成apk安装软件第1步:选择编译的平台为android第2步:编译完成后,就会出现⼆维码下载扫描和点击浏览下载链接6.海马玩模拟器的地址安装海马玩只需下⼀步下⼀步就可以完成安装,打开海马玩模拟器,点击点击apk安装选择我们要安装的⽰例app,选择打开就可以完成app的安装如果希望知道以上的效果是如何实现的,我们就需要分析和学习⽰例代码,然后才能实现我们⾃⼰的⾃定义开发三、配置开发⼯具与模拟器1、Sublime text32、绑定APICloud插件选择下载Windows版本，下载后，如下图所⽰：解压插件包，如下图所⽰：3、配置Sublime Text3第1步:选择sublime的插件安装⽬录，如下所⽰:第2步：把apicloud的插件复制的sublime text3的插件⽬录当中第3步：选择app的实例代码⽬录作为app项⽬第4步：检查插件是否可以被apiCloud的插件进⾏使⽤四．分析⼴场舞核⼼(从index.html⼊⼿)1.meta的分析这是开发app必须设置的meta标签，该标签⽤于定义html的响应式布局模式，如果这个meta标签没有编写这app的ui界⾯⽆法实现响应式布局关闭⼿机的⾃动识别功能，关闭⾃动识别电话号码(telephone),email,⽇期(date),地址识别(address),把他们全部设置为on,原因是有⼀些android⼿机（例如:三星和oppo）会认为如果你没有关闭⾃动识别的功能属于侵犯⽤户的⼿机隐私，因此⽆法在这些⼿机通过安装流程，但是如果只针对⼩⽶⼿机进⾏开发那么可以直接把这些识别设置yes2.必须引导css⽂件和js⽂件因为apiCloud的开发者是通过js来控制编译，在编译的过程中apiCloud官⽅会加载元素进去所以必须引导api.css的⽂件和api.js的⽂件,必须引⼊，否则⽆法通过编译3.index.html的html结构4.index.html的js代码详解①apiready代码如下:由于app的开发跟⽹页的开发是不⼀样的，因为app是在⼿机中运⾏，⽽⽹页是在浏览器中运⾏，因此⼿机的初始化不能使⽤window.load(),apicloud为了⽅便开发者做⼿机的初始化，所以他们建议做⼿机的初始化把初始化代码放在apiread的事件当中完成，所以apiread就相当于⽹页中windown.load②$api对象apiCloud官⽅要求引⼊api.js默认的情况下会有⼀个全局的对象叫$api对象，这个对象控制着app开发html所有的元素，如果要获取某⼀个元素作为对象可以使⽤以下的⽅法:byId⽅法就相当于document.getElementById，但是由于我们开发app⽤apicloud所以不建议使⽤document.getElementById⽽建议使⽤$api.byId③让app实现沉浸效果沉浸效果必须在ios7的版本或者android4.4以上的版本才能实现这段代码会⾃动判断是否可以让app的头部实现沉浸，如果开启这代码就会⾃动兼容实现，如果没有开启，那么所有app都不会实现沉浸效果④app的通⽤开发架构模型app的模型架构原理图:使⽤$api.offset()获取头部对象的位置，其中h表⽰当前位置⾼度，w表⽰当前位置的宽度获取了frame（头部）的⾼度，然后定义式尾部的⾼度为30px于是通过api的窗体⾼度（winHeight）减去头部的⾼度和尾部的⾼度得到主体的⾼度获取完成主体的⾼度后，使⽤openFrame打开主体的页⾯放在<div id=main>的元素当中openFrame中的参数name是代表打开的frame的名称，url是frame页⾯的位置，bounces表⽰是否可以启动弹动功能（如果设为true代表可以弹动，如果设为flase代表不可以弹动）rect⽤于控制main的位置，⼀般不做修改动态获取年份然后通过innerHTML把年分放到<span id=year>元素当中5.html/main.html⽂件的详解假设现在我们在html/main.html中修改Hello App的⽂字为粉椒⼴场舞app那么，app的页⾯（frame main）是否会发⽣改变呢?app开发的特点在于，⽹页是实时更新，⽽app必须更新⼀次就编译⼀次，那么如果我们希望在开发的时候，开到修改的效果，那么我们就需要使⽤apiCloud官⽅appLoader软件实现真机同步的测试功能。
HybridApp—HybridApp开发模式介绍和各种开发模式对比
HybridApp—HybridApp开发模式介绍和各种开发模式对⽐什么是Hybrid App最开的App开发只有原⽣开发这个概念,但⾃从H5⼴泛流⾏后,⼀种效率更⾼的开发模式Hybrid应运⽽⽣,它就是"Hybrid模式"。
Hybrid APP是⽬前⼴泛流⾏的⼀种APP开发模式H5渗⼊APP开发我们都知道,原⽣APP开发中有⼀个webview的组件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),这个组件可以加载Html⽂件。
在Html5没有兴盛之前,加载的Html往往只能⽤来做⼀些简单的静态资源显⽰,但是H5⼤⾏其道以后,Html5中有很多新增的功能,炫酷的效果,特别是iOS中H5⽀持⼀直都很良好,Android 4.4以上⽀持也⾜够所以这时候发现可以将⼀些主要的逻辑都⽤H5页⾯来编写,然后原⽣直接⽤webview加载显⽰,这样⼤⼤提⾼了开发效率,⽽且体验也很不错Hybrid的兴盛所谓Hybrid,即混合开发,意味着半原⽣半Web,其实在H5兴盛之前,Hybrid模式就已经⽐较成熟了,但是⼀直不愠不⽕(因为系统的⼀些现在以及html本⾝功能的限制)但是⾃从H5兴盛之后,⼤家发现原来很多功能都可以⽤web来实现,然后原⽣作为容器显⽰所以为了提⾼开发效率,越来越多的⼈使⽤Hybrid模式进⾏开发,越来越多的Hybrid开发框架,越来越多的前端专职成为Hybrid开发，也就是说Hybrid也随之兴盛起来了Hybrid定义前⾯有提到Hybrid这种模式,那么它是怎么样定义的呢？怎么样的开发模式才算是Hybrid模式呢?Hybrid是半Native半web开发模式Hybrid模式中,底层功能API均由原⽣容器通过某种⽅式提供,然后业务逻辑由H5页⾯完成,最终原⽣容器加载H5页⾯,完成整个App成熟的Hybrid模式意味着业务逻辑均由H5实现⼀款成熟的Hybrid框架,意味着各种类型的api都很完善,那么这时候⼏乎所有与业务相关的逻辑都是放在H5页⾯中的,原⽣只作为容器存在成熟的Hybrid模式可复⽤性⾮常⾼,可以跨平台开发成熟的Hybrid框架,那么原⽣只会提供底层API,也就是说所有的业务是H5完成,不管是什么项⽬,业务只由H5实现这时候就可以发现,业务代码是可以跨平台的,也就是说,开发⼀次,就可以和各⾃原⽣容器结合,组成两种原⽣安装包了,达到了跨平台开发效果Hybrid App的类型划分上⾯提到过Hybrid的定义,但实际上,根据Native和web的混合程度,Hybrid也可以再次细分为多种类型多View混合型这种模式主要特点是将webview作为Native中的⼀个view组件,当需要的时候在独⽴运⾏显⽰,也就是说主体是Native,web技术只是起来⼀些补充作⽤这种模式⼏乎就是原⽣开发,没有降低什么难度,到了16年⼏乎已经没⼈使⽤了单View混合型这种模式是在同⼀个view内,同时包括Native view和webview(互相之间是层叠的关系),⽐如⼀些应⽤会⽤H5来加载百度地图作为整个页⾯的主体内容,然后再webview之上覆盖⼀些原⽣的view,⽐如搜索什么的这种模式开发完成后体验较好,但是开发成本较⼤,⼀般适合⼀些原⽣⼈员使⽤Web主体型这种模式算是传统意义上的Hybrid开发,很多Hybrid框架都是基于这种模式的,⽐如PhoneGap,AppCan,Html5+等这种模式的⼀个最⼤特点是,Hybrid框架已经提供各种api,打包⼯具,调试⼯具,然后实际开发时不会使⽤到任何原⽣技术,实际上只会使⽤H5和js来编写,然后js可以调⽤原⽣提供的api来实现⼀些拓展功能往往程序从⼊⼝页⾯,到每⼀个功能都是h5和js完成的。
Native原生模式 VS Hybrid混合模式
Native原生模式VS Hybrid混合模式对比原生APP（Native APP）混合式APP（Hybrid APP）
运行效率速度更快
直接调用GPU加速、使用多线程慢
掺杂了大量Web特性，运行速度慢
开发语言使用强壮的程序语言（Java, Objective
C, C++）。
适合写复杂程序，经过历史
验证，API丰富。
HTML+js
适配机型简单
用户体验极佳
完美用户体验，性能稳定，操作速度快，
上手流程，访问本地资源，出色的动效、
转场一般
受限于技术，网速等等很多因素。
尚不完美
网络要求支持离线
可节省带宽成本
依赖网络
适用群体主流知名电商代表：微信、淘宝、京东、
一号店、当当、聚美优品、天猫、苏宁
易购等APP采用原生开发模式混合式主要应用于企业宣传、组织内部或金融工具，代表：万科、中国扶贫基金会、金融工厂等
收费略贵
品质决定高度，功能强大，物超所值便宜
成本低，技术不成熟，功能不全。
移动应用设计入门(开篇)
随着智能手机、平板电脑的快速普及，越来越多的企业意识到建立自己的APP应用和移动网站，也有越来越多设计师开始转战移动平台。
本篇主要介绍移动平台的一些入门知识和各平台的设计要求。
一. 移动产品的实现方式移动产品的实现方式主要有三种：①Native App;②Web App;③Hybrid App① Native App指的是本地化应用，就是我们从应用商店下载安装的独立应用，类似于PC 平台上的客户端，Native App的主要优势有：最佳的用户体验，最华丽的交互，操作流畅可节省带宽成本能够轻松调用图片相机，各类传感器，麦克风，电话….可以使用PUSH推送Native App有着非常明显的优势，也是用户接受程度最高的呈现方式，但开发原生应用的成本比较高，而且维护更新滞后，访问路径封闭;如果不是用户常用的应用，很难长时间存活在用户手机里。
②Web App 通常是指触屏站，就是我们通过手机浏览器访问的Html5网站，Html5支持一些新标签和脚本，可以做出类原生应用的效果和动画，Web App的主要优势有：实时更新不需要针对各平台开发不同的版本，开发成本低输入网址即可访问，不需要下载安装更新。
但Web App的缺点也比较明显：部分浏览器无法调用相册, 硬件资源和传感器无法使用推送功能性能较差浏览器适配容易出问题缓存小，以iPhone为标准，所有的图片和脚本都要小于25KB目前只兼容webkit内核的手机浏览器, WP,Symbian等平台的浏览器无法正常访问。
Web App主要服务于产品的轻度用户，或作为Native App宣传下载的中转站。
③ Hybrid App 是指混合模式应用，同时使用网页语言与程序语言编写，包含原生视图和Web视图两种方式，使用方式和Native App一致，而又继承了Web App实时更新开发成本低等优点。
Hybrid App通常分为三种类型：多View混合型，单View混合型，Web主体型。
Hybrid App与Native App的优缺点分析及选择指南
Hybrid App与Native App的优缺点分析及选择指南移动应用程序的需求日益增长，而选择开发应用程序的技术也变得越来越重要。
在移动应用开发中，Hybrid App和Native App是两种常见的选择。
本文将分析这两种应用程序开发技术的优缺点，并提供一些选择指南，以帮助开发者做出明智的决策。
一、Hybrid App的优缺点分析Hybrid App是一种结合了Web技术和Native技术的应用程序。
它使用Web技术（如HTML、CSS和JavaScript）来构建应用程序的用户界面，同时使用Native技术来访问设备的功能和特性。
1. 优点：a. 跨平台兼容性：Hybrid App可以在多个平台上运行，如iOS、Android和Windows。
这意味着开发者只需编写一次代码，就可以在不同的平台上发布应用程序，节省了开发时间和成本。
b. 离线访问：Hybrid App可以缓存数据，使用户在离线状态下仍然可以访问应用程序的内容。
这对于需要频繁访问数据的应用程序非常有用，如新闻阅读器和电子邮件客户端。
c. 简化开发过程：Hybrid App使用Web技术来构建用户界面，这使得开发过程更加简单和灵活。
开发者可以使用熟悉的Web开发工具和技术，如HTML、CSS和JavaScript。
2. 缺点：a. 性能问题：由于Hybrid App需要通过WebView来加载和执行Web内容，因此性能可能不如Native App。
特别是在处理图形密集型任务和访问设备功能时，Hybrid App可能会遇到性能瓶颈。
b. 功能限制：Hybrid App依赖于设备的WebView来运行Web内容，因此可能无法完全访问设备的所有功能和特性。
这可能会限制应用程序的功能和用户体验。
c. 更新依赖：Hybrid App的更新依赖于Web内容的更新，而不是应用程序本身。
这意味着开发者需要确保Web内容的及时更新，以保持应用程序的最新状态。
移动应用开发中的Hybrid技术
移动应用开发中的Hybrid技术随着移动设备的飞速发展，人们对于移动应用的需求也越来越高。
在这个背景下，移动应用开发成为了一个热门的行业，众多开发者都在研究如何开发更好的移动应用。
其中，Hybrid技术是一种备受关注的开发方式，下面将为您介绍Hybrid技术。
一、Hybrid技术的定义和特点Hybrid技术又称混合开发技术，是一种同时使用Web技术和Native技术进行开发的方式。
具体来说，Hybrid技术会将应用的部分功能使用Native技术进行开发，而其他功能则使用Web技术进行开发，并且通过Webview等工具将这些功能融合在一起。
Hybrid技术的特点如下：1. 可以同时使用Web技术和Native技术，可以很好地结合两种技术的优点。
2. 可以利用Web技术进行跨平台开发，比如可以开发同时支持iOS和Android的应用。
3. 可以实现快速迭代，在应用上线后可以通过Web技术进行改进，极大地提高了开发效率。
4. 可以通过Web技术实现部分功能的开发，比如H5游戏，极大地降低了开发难度和成本。
二、Hybrid技术的应用场景Hybrid技术在移动应用开发中有着广泛的应用场景，以下是一些常见的应用场景：1. 同时支持多平台的应用：由于Hybrid技术可以利用Web技术进行跨平台开发，所以它非常适合开发同时支持多平台的应用，比如微信、支付宝等。
2. 轻量级应用：由于Hybrid技术可以通过Web技术实现部分功能的开发，所以它非常适合开发一些轻量级应用，比如H5游戏、新闻资讯等。
3. 快速迭代的应用：由于Hybrid技术可以通过Web技术进行改进，所以它非常适合开发一些需要快速迭代的应用，比如社交、电商等。
三、Hybrid技术的优点和缺点Hybrid技术在移动应用开发中有着一些优点和缺点，下面将为您介绍。
1. 优点：（1）跨平台：Hybrid技术可以利用Web技术进行跨平台开发，可以开发同时支持iOS和Android的应用。
轻应用、WebApp、NativeApp三者有什么区别？
轻应用、WebApp、NativeApp三者有什么区别？首先，先说说我们现在正在使用，大家都了解的Native App。
一、什么是Native appNative App是一种基于智能手机本地操作系统如IOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。
Native App因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。
其实也就是我们现在使用的基于本地（Andriod\IOS\Metro）运行的APP。
Native App的优势：1.提供最佳的用户体验，最优质的用户界面，最华丽的交互2.针对不同平台提供不同体验3.可节省带宽成本4.可访问本地资源5.盈利模式明朗Native App的劣势：1.移植到不同平台上比较麻烦2.维持多个版本的成本比较高3.需要通过store或market的确认4.盈利需要与第三方分成其实，只要现在从事移动互联网的CP们，能深深体会到目前原生应用遇到的三大困境：1、虽然用户手机里的Native APP数量在增多，但日均启动个数却在减少；2、用户的使用时长不断向高频NativeAPP集中，加剧了头部效应；3、对于低频和不知名的Native App，则面临着更严峻的“分发”和“使用”长尾困境。
这三大困境对开发者形成了较大的挑战。
其中，大部分低频和不知名Native App在应用商店少人问津，无法到达用户手机。
二、什么是Web appWeb无需安装，对设备碎片化的适应能力优于App，它只需要通过XHTML、CSS和JavaScript就可以在任意移动浏览器中执行。
随着iPhone带来的WebKit浏览体验升级，使得专为iPhone等有WebKit 浏览内核的移动设备开发的Web应用，也有了如App一般流畅的用户体验。
（就是一种基于浏览的应用，技术咱就不管了）。
Web App的优势：1.开发成本低2.适配多种移动设备成本低3.跨平台和终端4.迭代更新容易5.无需安装成本Web App的劣势：1、Web App自身能力不全面2、无法调用语音、摄像头、定位等能力，体验比较差；3、用户很难沉淀下来，建立较为稳固的联系。
Hybrid App与Native App的优缺点比较
Hybrid App与Native App的优缺点比较近年来，移动应用的发展迅猛，用户对于更加智能、便捷的手机应用的需求不断增加。
面对不断增长的用户需求，开发者们也推出了一系列解决方案，其中Hybrid App和Native App成为了最为流行和常见的两种开发方式。
本文将探讨Hybrid App和Native App的优缺点，并对其进行比较。
首先，我们来了解一下Hybrid App和Native App的概念。
Hybrid App是一种介于Web和Native App之间的应用，它可以通过Web技术（如HTML、CSS和JavaScript）进行开发，并且可以在多个平台上运行。
与之相比，Native App是专门为特定平台（如iOS、Android）开发的应用，它使用平台特定的语言和工具进行开发。
在开发成本方面，Hybrid App相对于Native App的成本更低。
由于Hybrid App 使用Web技术进行开发，开发人员可以使用一套代码来构建应用，无需为不同平台重复编写代码。
这样一来，开发时间和成本都可以被大大减少。
而Native App的开发则需要专门针对不同平台进行编写，这增加了开发人员的工作量和时间成本。
然而，在性能方面，Native App更胜一筹。
Native App是使用平台特定的语言和工具进行开发的，因此能够充分利用平台的资源和功能，表现出更高的性能。
相比之下，Hybrid App需要通过WebView来加载和渲染页面，性能上存在一些局限性。
尤其是对于复杂的图形处理和大数据量的处理，Native App的性能表现更为出色。
另外，用户体验方面，Native App也具有优势。
由于Native App是专门为特定平台进行开发的，它能够充分利用平台提供的接口和功能，提供更加流畅和自然的用户体验。
而Hybrid App在加载页面和响应用户操作时可能存在一些延迟和不流畅的情况，这会影响用户的使用体验。
移动端混合开发模式
移动端混合开发模式移动应⽤开发的⽅式，⽬前主要有三种：Native App：本地应⽤程序（原⽣App）Web App：⽹页应⽤程序（移动web）Hybrid App：混合应⽤程序（混合App）原⽣APP开发及Web APP开发模式的区别 Web APP需开发“html5云⽹站”和“APP客户端”，特点： （1）每次打开APP，都要通过APP框架向云⽹站取UI及数据； （2）⼿机⽤户⽆法上⽹则⽆法访问APP应⽤中的数据。
（3）框架型的APP⽆法调⽤⼿机终端的硬件设备（语⾳、摄像头、短信、GPS、蓝⽛、重⼒感应等） （4）框架型APP的访问速度受⼿机终端上⽹的限制，每次使⽤均会消耗⼀定的⼿机上⽹流量； （5）框架型APP应⽤的安装包⼩巧，只包含框架⽂件，⽽⼤量的UI元素、数据内容刚存放在云端； （6）APP⽤户每次都可以访问到实时的最新的云端数据； （7）APP⽤户⽆须频繁更新APP应⽤，与云端实现的是实时数据交互； 适⽤企业：电⼦商务、⾦融、新闻资讯、企业集团需经常更新内容的APP应⽤。
Native App（原⽣型APP）需要开发“云服务器数据中⼼”和“APP客户端”，特点： （1）每次获取最新的APP功能，需要升级APP应⽤； （2）原⽣型APP应⽤的安装包相对较⼤，包含UI元素、数据内容、逻辑框架； （3）⼿机⽤户⽆法上⽹也可访问APP应⽤中以前下载的数据。
（4）原⽣型的APP可以调⽤⼿机终端的硬件设备（语⾳、摄像头、短信、GPS、蓝⽛、重⼒感应等） （5）APP应⽤更新新功能，涉及到每次要向各个应⽤商店进⾏提交审核。
适⽤企业：游戏、电⼦杂志、管理应⽤、物联⽹等⽆需经常更新程序框架的APP应⽤。
参考 。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
比较Web App、Hybrid App与Native App的设计差异
这3类主流应用你都了解吗？设计师除了要有视觉功夫，对不同形式的APP也应当了然于胸，今天收集了一篇非常全面的总结，帮你迅速搞定3类主流APP 的设计方法，附带一大波避雷针，带你巧妙跳过APP设计的雷区，涨姿势是分分钟刻不容缓的事咯！
目前主流应用程序大体分为三类：Web App、Hybrid App、Native App。
一、Web App、Hybrid App、Native App 纵向对比
首先，我们来看看什么是Web App、Hybrid App、Native App。
1. Web APP
Web App 指采用Html5语言写出的App，不需要下载安装。
类似于现在所说的轻应用。
生存在浏览器中的应用，基本上可以说是触屏版的网页应用。
优点
（1）开发成本低，
（2）更新快，
（3）更新无需通知用户，不需要手动升级，
（4）能够跨多个平台和终端。
缺点：
（1）临时性的入口
（2）无法获取系统级别的通知，提醒，动效等等
（3）用户留存率低
（4）设计受限制诸多
（5）体验较差
2. Hybrid App
Hybrid APP指的是半原生半Web的混合类App。
需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是Web 。
例如Store里的新闻类APP，视频类APP普遍采取的是Native的框架，Web的内容。
Hybrid App 极力去打造类似于Native App 的体验，但仍受限于技术，网速，等等很多因素。
尚不完美。
3. Native App
Native APP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。
需要用户下载安装使用。
优点：
（1）打造完美的用户体验
（2）性能稳定
（3）操作速度快，上手流畅
（4）访问本地资源（通讯录，相册）
（5）设计出色的动效，转场，
（6）拥有系统级别的贴心通知或提醒
（7）用户留存率高
缺点：
（1）分发成本高（不同平台有不同的开发语言和界面适配）
（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2，V3，V4版本，需要更多的开发人员维护之前的版本）
（3）更新缓慢，根据不同平台，提交–审核–上线等等不同的流程，需要经过的流程较复杂
二、Web App、Hybrid App、Native App 技术特性
由上图可见，Web APP 的开发基于Html5语言。
而Html5语言本身又有着不可避免的局限性。
正是这些局限性的存在，使得Web App在体验中要逊于Native App。
三、Web App受限制因素及设计要点
相比Native App，Web App体验中受限于以上5个因素：网络环境，渲染性能，平台特性，受限于浏览器，系统限制。
1. 网络环境，渲染性能
Web APP对网络环境的依赖性较大，因为Web APP中的H5页面，当用户使用时，去服务器请求显示页面。
如果此时用户恰巧遇到网速慢，网络不稳定等其他环境时，用户请求页面的效率大打折扣，在用户使用中会出现不流畅，断断续续的不良感受。
同时，H5技术自身渲染性能较弱：对复杂的图形样式，多样的动效，自定义字体等的支持性不强。
因此，基于网络环境和渲染性能的影响，在设计H5页面时，应注意以下几点：
∙简化不重要的动画/动效
∙简化复杂的图形文字样式
∙减少页面渲染的频率和次数
从下图移动Web版jing.fm和Native版jing对比后可以看出：Web APP首页去除冗余的功能，回溯本源，只给用户提供了jing.fm最初的本质需求——电台。
既符合H5精简功能又达到了突出核心功能的设计原则。
无疑给用户眼前一亮的气息。
重要的并不是我们提供的信息量有多大，而是我们能否给他们提供真正需要的信息。
用户是否真的在意准确的信息？
再如：百度最新推出的直达号，以良子健身为例：
从Native App和Web App（百度直达号）的对比中，我们可以看出Native良子以九宫格的形式展现，且属于双重导航，功能入口太多；弊端是用户不知道聚焦
在哪里，分散用户的注意力。
而Web版良子整合并减少了导航的入口，增强用户的专注度；界面清爽，整洁，很好地传达了良子本身的寓意——轻松、愉悦、休闲、舒适。
2. 受限于浏览器
通常Web App生存于浏览器里，宿主是浏览器。
不同的浏览器自身的属性不尽相同，如：浏览器自带的手势，页面切换方式，链接跳转方式，版本兼容问题等等。
例如下图：UC 浏览器和百度浏览器自身支持手势切换页面。
手指从左侧滑动页面，返回至上一级。
百度手机助手H5页面，顶部Banner支持手势左右滑动切换。
这一操作与浏览器自身手势是冲突的。
再如，基于浏览器的Web APP在打开新的模块中的页面时，大多会新开窗口来展现。
例如用户在使用购物类APP时，浏览每日精选模块时，每当打开新的商品时，默认新开一个窗口。
这样的优劣势显而易见：优势是能够记录用户浏览过的痕迹，浏览过的商品，以便后续横向对比；劣势是过多的页面容易使用户迷失在页面中。
正如Google开发手册里描述：当用户打开一个Web App的时候，他们期待这个应用就像是一个单个应用，而不是一系列网页的结合。
然而，什么情况下需要跳转页面，什么情况下在当前页面展示则需要设计师细致考量。
因此，Web App基于浏览器的特性，从设计角度应该遵循以下了两点：
少用手势，避免与浏览器手势冲突。
减少页面跳转次数，尽量在当前页面显示。
3. 系统限制，平台特性
由于Html5语言的技术特性，无法调用系统级别的权限。
例如，系统级别的弹窗，系统级别的通知，地理信息，通讯录，语音等等。
且与系统的兼容性也会存在一些问题。
以上限制通常导致APP的拓展性不强，体验相对较差。
例如百度地图：
Web版地图基于浏览器展现，因此，不能全屏显示地图，给用户的眼界带来局限感；相反，Native 版地图以全屏展现的形式，很好的拓展了用户的视野。
整个界面干净简洁，首页去除冗余功能。
在制定路线的体验中，如图：
Web 版地图耗费的流量大于Native版，且不能预先缓存离线地图。
对于地理位置的判断也是基于宿主浏览器，而非Web地图本身。
获取路线后，对于更换到达方式，相对来说是不便利的。
相反，Native 版地图，能够直接访问用户的地理位置，能够很清晰的为用户展现App规划的路线，并能轻松的查看多种路线方案，以便做出符合自己的最佳方案。
对于切换公交，走路，自驾等路线方式也是只需一键操作。
Native 版地图相对于Web版地图增加更多情感化，易用的功能，如：能够记录用户的生活轨迹，记录用户的点滴足迹，能够享受躲避拥堵方案等。
而Web版地图基于技术框架，很难实现以上功能，从用户体验角度来看，弱于Native版地图。
四、小结
综述所述，在设计Web APP时，应当遵循以下几点：
1. 简化
∙简化不重要的动画/动效
∙简化复杂的图形文字样式
2. 少用
∙少用手势，避免与浏览器手势冲突
∙少用弹窗
3. 减少
∙减少页面内容
∙减少控件数量
∙减少页面跳转次数，尽量在当前页面显示4. 增强
∙增强Loading时的趣味性
∙增强页面主次关系
∙增强控件复用性。