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

Bertha 。 2022-07-15 14:19 146阅读 0赞

# 原理 #

[HTML5][]\+开发app的原理大概是这样：

html页面负责内容；

ui负责页面样式；

js负责调用原生app方法。

# html5 #

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

# ui #

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

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

### bootstrap ###

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

中文官网：[http://v3.bootcss.com/][http_v3.bootcss.com]

### amazeui ###

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

官网：[http://amazeui.org/][http_amazeui.org]

### jquery mobile ###

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

官网：[http://jquerymobile.com/][http_jquerymobile.com]

### mui ###

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

官网：[http://dcloudio.github.io/mui/][http_dcloudio.github.io_mui]

### framework7 ###

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

官网：[http://www.idangero.us/framework7/][http_www.idangero.us_framework7]

# nativejs #

介绍：一个可以调用[Android][]和[iOS][]原生方法的js

入门：[http://ask.dcloud.net.cn/article/88][http_ask.dcloud.net.cn_article_88]

# 搭配 #

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

mui-demo：[http://www.dcloud.io/hellomui/][http_www.dcloud.io_hellomui]

nativejs-demo：[http://www.html5plus.org/\#case\#/case/id/4.html][http_www.html5plus.org_case_case_id_4.html]

# 更多 #

更多文章请访问：[http://uikoo9.com/blog/list][http_uikoo9.com_blog_list]

原文连接：[http://blog.csdn.net/uikoo9/article/details/43485567][http_blog.csdn.net_uikoo9_article_details_43485567]

[HTML5]: http://lib.csdn.net/base/html5
[Link 1]: http://lib.csdn.net/base/architecture
[http_uikoo9.com]: http://uikoo9.com/
[http_v3.bootcss.com]: http://v3.bootcss.com/
[http_amazeui.org]: http://amazeui.org/
[jQuery]: http://lib.csdn.net/base/jquery
[http_jquerymobile.com]: http://jquerymobile.com/
[http_dcloudio.github.io_mui]: http://dcloudio.github.io/mui/
[http_www.idangero.us_framework7]: http://www.idangero.us/framework7/
[Android]: http://lib.csdn.net/base/android
[iOS]: http://lib.csdn.net/base/ios
[http_ask.dcloud.net.cn_article_88]: http://ask.dcloud.net.cn/article/88
[http_www.dcloud.io_hellomui]: http://www.dcloud.io/hellomui/
[http_www.html5plus.org_case_case_id_4.html]: http://www.html5plus.org/#case#/case/id/4.html
[http_uikoo9.com_blog_list]: http://uikoo9.com/blog/list
[http_blog.csdn.net_uikoo9_article_details_43485567]: http://blog.csdn.net/uikoo9/article/details/43485567