- 基于h5的混合开发
这种使用 HTML + JavaScript 来作为移动应用的应用称为混合应用,它可以兼具 Web App 的跨平台及使用 Native 应用的接口。当我们手上已经有一套 UI 组件,如 Ionic,及单页面应用框架时,要开发起这样的应用更是手到擒来。诸如 Ionic 这样的框架,不仅封装了不同系统上的 UI,还提供了 ngCordova 的方案——封装第三方原生插件。
相信很多人都在项目里熟练使用各种Hybrid技术,无论是使用了知名得 WebViewJavascriptBridge 框架来做自己的Hybrid Web容器,又或是自己从头着手写了一个满足自己业务需求的bridge,从而构建起自己的Hybrid Web容器,也有的干脆直接使用了cordova 这一大型Hybrid容器框架,cordova + ionic 来进行Hybrid的开发
PhoneGap
cordova
reactNative
Weex
html
css
JavaScript
JQuery
DOM
angularJS
Vue
MUI
html5
css3
web标准
响应式布局
多浏览器兼容适配;
- webApp
- 混合app
- 移动前端框架
- Node
Node.js® 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。它的包生态系统,npm,是目前世界上最大的开源库生态系统。
- 用Android Studio 编辑 react-native
- 为啥要用react-native开发app
React Native For Android是伟大的互联网公司Facebook与2015年9月15日发布的,该可以让我们广大开发者使用JavaScript和React开发我们的应用,该提倡组件化开发,也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用,甚至我们可以相关嵌套形成新的组件。使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。现阶段Web APP的的体验还是无法达到Native APP的体验,所以这边fackbook更加强调的是learn once,write everywhere,应用前端我们使用js和React来开发不同平台的UI,下层核心模块编写复用的业务逻辑代码,提供应用开发效率。
支持JavaScript和React开发应用。
- react-native
【1】用JavaScript和React编写app
【2】是个真正的移动app,和 "mobile web app", an "HTML5 app", or a "hybrid app"没有半毛钱关系;
【3】调试代码重新加载快;
【4】和用java和object-c写的代码无缝对接;
*React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX,但它有以下优点:
JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的,在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
构建UI, 利用基于javaScript的UI库, react
语法都是基于javaScript
vue.js呢?
移动前端&前端UI框架
Ember's data binding, Angular's dirty checking, React's virtual DOM, and its relationship to immutable data structures.更进一步,MVVM 框架出现了,以 AngularJS 为代表:
- Virtual Dom思路
react
vue
- JQuery操作DOM
怎么做呢?操作 DOM 呗。DOM 就是浏览器提供给开发者用于操作页面的模型嘛,直接通过脚本来调用 DOM 的各种接口就 OK 了。而且我们还有了像 jQuery 这样的棒棒的工具,操作 DOM 变得 so easy。
- ionic
【1】
ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。
【2】
Ionic完美的融合下一代移动框架 AngularJS- AngularJS移动端解决方案
Ionic可以说是AngularJS移动端解决方案,Ionic 利用 AngularJS创造出一款最适合开发丰富而强大应用的框架。 Ionic不仅如此优秀,而且它的核心架构也是为开发专业应用创建,和AngularJS完美融合。
移动前端开发的2个方向
【1】基于h5的
UI通过h5搭建;
底层运行框架有 ionic,framework7,cordova
【2】基于JS的
底层运行框架有:
react-native
“ Learn Once, Write Anywhere”
weex
"Write Once, Run Everywhere"
Weex 在迭代的过程中选择了于 Vue 2.0 握手,因为该版本的 Vue 加入了 Virtual-DOM 和预编译器的设计,使得该框架在运行时能够脱离 HTML 和 CSS 解析,只依赖 JavaScript,如此,Vue 在和 Weex 合作后,便获得了使用 JS 预编译原生的组件 UI 的能力。
脚本语言天生自带“热更新”,Weex 针对 React Native 的热更新策略做了优化,将 WeexSDK 事先绑到了客户端上,并且对 JSBundle 进行分包增量更新,大大提高了热更新的效率。
UI框架可以采用的有
AngularJS
react
vue