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

原理

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

html页面负责内容;

ui负责页面样式;

js负责调用原生app方法。

html5

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

ui

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

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

bootstrap

介绍:Twitter开发的ui框架,特点是可以简介美观,可以适配移动端(例如本站:http://uikoo9.com/

中文官网:http://v3.bootcss.com/

amazeui

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

官网:http://amazeui.org/

jquery mobile

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

官网:http://jquerymobile.com/

mui

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

官网:http://dcloudio.github.io/mui/

framework7

介绍:国外一块模仿ios7的ui框架,赞

官网:http://www.idangero.us/framework7/

nativejs

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

入门:http://ask.dcloud.net.cn/article/88

搭配

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

mui-demo:http://www.dcloud.io/hellomui/

nativejs-demo:http://www.html5plus.org/#case#/case/id/4.html

更多

更多文章请访问:http://uikoo9.com/blog/list

时间: 2024-11-13 07:00:27

HTML5+开发移动app教程2-原理介绍的相关文章

HTML5+开发移动app教程1-环境搭建

前言 本教程是介绍使用html5+(nativejs)和mui开发移动app(包括android和ios), 感兴趣请继续,不感兴趣请跳过,大部分来自官方api,增加了一些自己的总结. HBuilder 说明 用h5+开发app的环境,也是ide,对eclipse做了深度定制,以前使用过eclipse或者myeclipse可以直接上手 官网 http://www.dcloud.io/ 下载 在官网上点击下载,安装好后可以自己将文件夹压缩成zip,方便以后使用,解压就可以用 依赖 估计会需要jre

HTML5+开发移动app教程3-mui开发示例

下面就开始一个简答的例子,以及mui相关内容 mui 官网:http://dcloudio.github.io/mui/ 说明:http://dev.dcloud.net.cn/mui/ui/index.html#accordion 开始 新建项目 在首页点击新建移动App,如下: 或者在项目管理器内右键新建,或者快捷键ctrl+n+a 选择模版 这里选择mui项目,会自动引入mui的js和css,如下: 文件结构 默认有以下几个文件夹:css,fonts,js,如下: 简单开发 header

HTML5移动开发之路(49)——HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器——HBuilder.

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(49)--HTML5开发神器HBuilder 今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.NET.cn/ 一.新建文件 可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App项目 注释:Html5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距.HTML5+规范是一个开放的规范,在W3C中国的指

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQuer

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得

[转载]HTML5开发入门经典教程和案例合集(含视频教程)

http://www.iteye.com/topic/1132555 HTML5作为下一代网页语言,对Web开发者而言,是一门必修课.本文档收集了多个HTML5经典技术文档(HTML5入门资料.经典)以及游戏开发案例以及教学视频等,帮助同学们掌握这门重要的技术. 资源名称                                资源地址 WEB新技术:HTML5介绍 http://down.51cto.com/data/385440 HTML5跨平台游戏开发 http://down.51c

使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏览器时,浏览器会将一个列表中指定的资源都下载并储存在本地.下次当用户再访问这个网络程序时,浏览器会自动引用本地缓存中相应的文件,而不会再从网络下载这些资源.不管离线网络应用程序是否专为 Web Apps 而设,但这对于 Web Apps 来说无疑是个非常实用的特性,它使到 Web Apps 相对于原生 App

HTML5 Plus移动App(5+App)开发入门指南

HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能. HTML5 Plus规范 通过HTML5开发移动App时,会发现HTML5很多能力不具备.为弥补HTML5能力的不足,在W3C中国的指导下成立了www.html5plus.org组织,推出HTML5+规范.HTML5+规范是一个开放规范,允许三方浏览器厂商或其他手机runtime制造商实现.