前端流行的框架

流行开发框架介绍

1 移动端开发有哪些框架那？

Ionic

Html5+

AppCan

Framework7

 

Jquery Mobile

 

React Native

…….

2 Html5+

2.2.1 首先要认识Html5+联盟是什么？

HTML5中国产业联盟，简称“HTML5+联盟”，是为了更好的推进HTML5的商用、更好的为HTML5开发者服务而由产 业链主流厂商共同组成的一个联盟。

联盟致力于整合产业链资源，建立围绕HTML5开发者的生态系统，通过产业链共同为HTMLl5开发者服务。

W3C中国是联盟的指导单位。

CSDN 和 DCloud 是联盟的秘书处单位。

2.2.2 Dcloud官网

官网：http://www.dcloud.io/ 

Emmet语法:http://docs.emmet.io/cheat-sheet/

这个公司下面有四个主要的产品

HBuilder：是一款web开发工具。它能大幅提升开发效率，对程序员也设计了更人文关怀的UI，它包括最全面的语法库和浏览器兼容性数据。到现在 已经有两年的时间了，到现在大概有几十万的开发者在使用。

5+Runtime：是一个H5的增强引擎。这是一个可以去调用H5的能力和原生操作系统的产 品。

MUI框架：是高性能的前端框架，可用开发高性能App，也是目前最接近原生App效果的框架，可以有效解决HTML5原生开发中遇到的部分问题，同 时体积也小。

应用流：会让用户感觉一点开就可以用，这也是颠覆现有的应用方式的主要因素，给最终用户去使用应用有更好的体验。

2.2.3 Html5+的优点

提供了一个自定制的IDE工具，支持非常好，轻量级，甚至不需要安装直接解压缩就可以使用

开发出来的app的性能很好，用户体验很高

丰富的api支持，号称有40万+

2.2.4 Html5+的缺点

打包比较麻烦

2.3 Ionic介绍

2.3.1 官网地址

Ionic官网 http://ionicframework.com/

Ionic中文网 http://www.ionic.wang/

2.3.2 首先要认识Ionic框架？

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从 web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

2.3.3 Ionic框架构成

CSS框架 - 提供原生 App 质感的 CSS 样式模拟。 ionic 这部分的实现使用了 ionicons 图标样式库。

JavaScript框架 - 提供移动 Web 应用开发框架。ionic 基于 AngularJS 基础框架开发，遵循AngularJS 的框架约束；此外 ionic 使用 AngularJS UI Router 实现前端路由。

命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic 命令行工具使用了Cordova，依赖于平台 SDK（Android & iOS）实现将移动 Web 项目打包成原生 App。

2.3.4 Ionic特点

基于Angular语法，简单易学。

是一个轻量级框架。性能优越，运行速度快。

完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。

提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。

专注原生，让你看不出混合应用和原生的区别

提供了强大的命令行工具。

2.3.5 Ionic开发注意点有哪些？

由于 ionic 使用了 HTML5 和 CSS3 的一些新规范，所以要求 iOS7+ / Android4.1+。

在低于这些版本的手机上使用 ionic 开发的应用，有时会发生莫名其妙的问题。

2.4 React native

2.4.1 官网地址

RN官网 https://facebook.github.io/react-native/

RN中文网 http://react-native.cn/

2.4.2 React native原理图

2.4.3 React Native核心实现是什么？

React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的 JavascriptCore。

把Native code十来个最基本核心的类（RCTDeviceEventEmitter、RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等）封装成二十来个基本组件（Popover、Listview等）

实现了一套类似css的子集，用来解决样式问题，相当复杂和强大，靠这个才能将Native的核心组件组成JS层的基本组件再组成业务端的业务组件

在React Native中，写JS的工程师解决的是「将基本组件拼装成可用的React组件」的问题，写Native Code的工程师解决的是「提供核心组件，提供足够的扩展性、灵活性和性能」的问题。

2.4.4 React Native的优点有哪些？

不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题。

有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用。

可以直接使用Native原生的「牛逼」动画。

可以通过更新远端JS，直接更新app。

2.5 Jquery Mobile介绍

2.5.1 官网地址

官网地址 http://jquerymobile.com/

中文网地址 http://jquerymobile.weebly.com/jquerymobile3245220214.html

APi学习地址 http://www.w3school.com.cn/jquerymobile/index.asp

 

2.5.2 Jquery Mobile是做什么的？

jQuery Mobile 是一个为触控优化的web框架，用于创建移动 web 应用程序。

jQuery 适用于所有流行的智能手机和平板电脑

jQuery Mobile 构建于 jQuery 库之上，这使其更易学习，如果您通晓 jQuery 的话。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。

2.6 AppCan介绍

2.6.1 官网地址

官网地址 http://www.appcan.cn/

2.6.2 首先来认识AppCan是什么？

AppCan.cn开发平台是基于HTML5技术的跨平台移动应用快速开发一体化解决方案。开发者利用HTML5+CSS3+JavaScript技术可 以快速地开发与本地应用体验相媲美的移动应用。AppCan.cn平台提供了UI快速开发框架、本地功能调用API接口、应用打包系统、IDE集成开发环 境和本地应用调试模拟器，预置数百套界面模板和数十种应用插件，提供多套应用模板。完善的框架接口，人性化的开发环境，丰富的开发资源，强大的服务支持， 使开发者可以快速迈入移动开发领域。