HTML5+开发移动app教程2-原理介绍

 

原理

html5+开发app的原理大概是这样：

html页面负责内容；

ui负责页面样式；

js负责调用原生app方法。

html5

html5这部分负责页面，也就是app中你看到的东西，大概的架构和内容

ui

ui负责页面样式，既然要做移动app，那做出的效果就得和移动端靠近，

这里并没有局限于用那种ui，比较常见的适配移动端的ui框架有：

bootstrap

介绍：Twitter开发的ui框架，特点是可以简介美观，可以适配移动端（例如本站：uikoo9.com）

中文官网：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

amazeui

介绍：国人模仿bootstrap做的一个ui框架，个人感觉有点多余，有兴趣的可以看看

官网：http://amazeui.org/

jquery mobile

介绍：HBuilder其实是模仿国外的phonegap，通用mui是模仿jquery mobile，但是感觉也不错

官网：jQuery Mobile

mui

介绍：和HBuilder想搭配的移动ui，也和nativejs相搭配，感觉还不错，模仿的ios7界面风格

官网：MUI-最接近原生APP体验的高性能前端框架

framework7

介绍：国外一块模仿ios7的ui框架，赞

官网：Framework7 - Full Featured Framework For Building iOS, Android & Desktop Apps

nativejs

介绍：一个可以调用android和ios原生方法的js

入门：5+ App开发Native.js入门指南 - DCloud问答

搭配

选择：目前比较好的搭配是mui+nativejs+hbuilder，你也可以尝试其他的组合，例如jqmobile+nativejs等

mui-demo：Hello MUI

nativejs-demo：HTML5产业联盟