构建跨平台APP：jQuery Mobile移动应用实战

第一篇 移动开发入门

 

第1章 初探移动开发

1.1 如今的移动行业

1.1.1 手机和平板的世界

1.1.2 移动互联网的神话

1.2 跨平台移动开发框架

1.2.1 什么是跨平台移动开发框架

1.2.2 为什么选择跨平台移动开发框架

1.2.3 常见的跨平台移动开发框架有哪些

1.3 真正认识HTML 5

1.3.1 HTML 5是一项新技术么？

1.3.2 只要在网站上加一句<!HTML 5 Doctype>就是HTML 5网站了？

1.3.3 HTML 5与之前版本相比仅仅是好看

1.3.4 使用HTML 5能够让我更有王霸之气

1.4 认识jQuery Mobile

1.4.1 为什么选择jQuery Mobile

1.4.2 渐进式增强的主题界面

1.4.3 简单但是有调理的标记化语言开发

1.4.4 自适应布局

1.4.5 jQuery Mobile的缺点

1.4.6 jQueryMobile案例

1.5 小结

第2章 启程安卓开发之旅

2.1 为什么选择安卓

2.2 安卓开发环境的搭建

2.2.1 JDK的配置

2.2.2 Eclipse 与ADT的配置

2.2.3 SDK的更新

2.2.4 第一个程序

2.2.5 使用实体机测试第一个程序

2.3 错误解决方法

2.3.1 编译运行报错的解决方法

2.3.2 无法更新SDK

2.3.3 启动AVD失败

2.4 小结

第3章 使用jQuery Mobile快速开发APP

3.1 开发环境的选择

3.1.1 Dreamweaver编辑器

3.1.2 Notepad++编辑器

3.1.3 UE编辑器

3.1.4 在PC上测试应用

3.1.5 打包应用的方法

3.2 原理解析

3.2.1 选择元素

3.2.2 设置属性

3.3 链接和按钮

3.4 工具栏

3.5 列表

3.6 表单控件

3.7 小结

第二篇 jQuery Mobile基础

 

第4章 页面与对话框

4.1 依然从hello world开始

4.2 利用jQuery脚本DIY闪光灯效果

4.3 不断切换的场景

4.4 整人游戏：我不是弱智！

4.5 警告！你的手机遭到入侵

4.6 实现渐变的背景

4.7 又一种对话框

4.8 对话框的高级属性

4.9 基于jQuery Mobile的简单相册

4.10 总结

第5章 工具栏的使用

5.1 稍微复杂的页面

5.1.1 尝试使用工具栏

5.1.2 让工具栏固定

5.1.3 一次无聊的实验

5.2 方便的快捷键

5.3 失效的按钮

5.4 导航栏的应用

5.5 导航栏的全屏属性

5.6 内容栏的使用

5.7 会弹出的面板

5.8 小结

第6章 按钮的使用

6.1 简单按钮的使用

6.2 为按钮加入图标

6.3 更加个性化的显示图标

6.4 自定义按钮的图标

6.5 播放器的面板设计

6.6 头部栏中的按钮图标

6.7 一个按钮也可以玩的很开心

6.8 简单的QWER键盘

6.9 方形的按钮

6.10 对话框中的按钮

6.11 小结

第7章 表单元素的使用

7.1 简单的QQ登录界面

7.2 手机调查问卷

7.3 精准的进度控制

7.4 多彩的调色板

7.5 熄灯，请闭眼

7.6 做一道选择题

7.7 多项选择题

7.8 请问先生需要什么服务

7.9 对话框中的表单

7.10 小结

第8章 列表控件的使用

8.1 简单的新闻列表

8.2 音乐专辑列表的显示

8.3 更完善的音乐专辑列表

8.4 显示销量的商品列表

8.5 图书销售排名

8.6 简单的电话通讯录

8.7 让查找更加便捷

8.8 比较高级的新闻列表

8.9 小结

第9章 jQuery Mobile的布局

9.1 改良后的QQ登录界面

9.2 一种简洁的通讯录设计

9.3 完美实现九宫格

9.4 可以折叠的QQ好友列表

9.5 展开图标的设置

9.6 两种不同的Metro效果实现思路

9.6.1 完全利用分栏布局的方法

9.6.2 利用纯CSS调整色块尺寸的方法

9.7 简洁的课程表

9.8 小结

第10章 jQuery Mobile的高级特性

10.1 jQuery Mobile的多页面模板

10.2 jQuery Mobile中的事件

10.3 jQuery Mobile中的触发事件

10.4 触发事件的简单应用

10.5 jQuery Mobile的属性

10.6 小结

第11章 在jQuery Mobile中使用插件

11.1 jQuery Mobile插件概述

11.2 相册类插件

11.2.1 photoswipe的使用

11.2.2 camera的使用

11.3 菜单类插件

11.4 选择器插件以及其他插件

11.5 如何获取jQuery Mobile插件

11.6 小结

第12章 jQuery Mobile界面综合实战

12.1 清爽的电子书阅读器

12.2 华丽的计算器

12.3 移动BBS模板

12.4 基于jQuery Mobile的简单记事本

12.5 基于jQuery Mobile的全键盘界面

12.6 小结

第三篇 跨平台APP实战

 

第13章 大学移动校园实战项目

13.1 项目背景

13.2 界面设计

13.3 框架设计

13.4 主界面的制作

13.5 二级栏目的制作

13.6 内容页的制作

13.7 校园风光模块

13.8 小结

第14章 个人博客项目实战

14.1 项目规划

14.2 主界面设计

14.3 文章列表的设计

14.4 文章内容页的实现

14.5 文章类的设计

14.6 测试环境的搭建

14.7 数据库的设计

14.8 内容页功能的实现

14.9 文章列表的实现

14.10 首页的实现

14.11 小结

第15章 在线音乐播放器

15.1 项目介绍

15.2 界面布局设计

15.2.1 首页界面设计

15.2.2 推荐主题页面的设计

15.2.3 歌手列表界面设计

15.2.4 专辑列表界面设计

15.3 控制面板功能的实现

15.3.1 audio控件简介

15.3.2 需求分析

15.3.4 功能实现

15.4 界面的实现

15.4.1 首页界面的实现

15.4.2 推荐主题页面的实现

15.4.3 歌手列表界面的实现

15.4.4 专辑列表的实现

15.5 数据库的设计

15.6 后台的实现

15.6.1 数据库连接类的实现

15.6.2 主页功能的实现

15.6.3 推荐主题页面功能实现

15.6.4 歌手列表的实现

15.6.5 专辑列表的实现

15.7 小结

第16章 在线视频播放器

16.1 项目需求

16.2 界面设计

16.3 界面的实现

16.3.1 主题文件的获取

16.3.2 主页界面的实现

16.3.3 二级页面的实现

16.3.4 视频播放界面的实现

16.4 数据库设计

16.5 功能的实现

16.5.1 首页功能的实现

16.5.2 专辑列表功能的实现

16.5.3 播放页面的实现

16.6 小结

第17章 大学校园表白墙

17.1 项目介绍

17.2 页面设计

17.2.1 主页兼登录页面的设计

17.2.2 注册页面的设计

17.2.3 信息发布页面的设计

17.3 界面的实现

17.3.1 首页界面的实现

17.3.2 登录界面的实现

17.3.3 注册页面的实现

17.3.4 表白模块的实现

17.4 数据库的设计

17.5 功能的实现

17.5.1 注册功能的实现

17.5.2 主页功能的实现

17.5.3 发表留言功能的实现

17.5.4 首页的完善

17.6 小结

第18章 天天背单词项目实战

18.1 项目说明

18.2 第一版的实现

18.2.1 第一版界面的实现

18.2.2 数据库的建立

18.2.3 功能的实现

18.2.4 阶段性总结

18.3 改进和完善

18.3.1 方案描述

18.3.2 列表页面的实现

18.3.3 列表页面功能的实现

18.3.4 背单词页面的改进

18.4 小结

第四篇 发布和推广应用

 

第19章 应用的发布和推广

19.1 如何生成跨平台的应用

19.1.1 生成iOS应用

19.1.2 生成黑莓应用

19.1.3 生成WebOS应用

19.1.4 生成Symbian应用

19.1.5 生成WP应用

19.2 怎样发布应用

19.3 怎样推广应用

19.4 小结

前 言

jQuery Mobile是一个免费的、开源的、跨平台的移动开发框架，是基于HTML 5的快速开发工具，它能够极大的解放开发者的时间和精力。遗憾的是，由于国内交流氛围所限，目前关于jQuery Mobile的资料非常少，而且不够详细。因此作者结合自己的开发经验，在本书中全面的介绍了jQuery Mobile和HTML 5、jQuery Mobile的控件、jQuery Mobile的布局，以及jQuery Mobile开发和发布应用的方法。本书的目的是力求通过实战让读者在练习中熟练掌握利用jQuery Mobile快速开发的方法，并能够真实的将技术转化为经济利益。可以这么说，jQuery Mobile的前途和钱途都是不可限量的。

本书是一本与众不同的书

1．实战，实战，还是实战

本书采用实例驱动的方式介绍jQuery Mobile下的APP开发，全书提供70余个实战案例教会读者进行移动开发，最后还通过6个小型项目来复习和巩固所学知识点。

2．不是iOS平台、Android平台、Windows Phone平台下的开发，是全平台开发

本书开发的项目是全平台应用，读者可移植到任意的移动平台，这也是jQuery Mobile风靡的原因，也是本书的宗旨，就是实现真正的跨平台应用。

3．技术来源于生活，案例也来源于生活

本书的案例包含了笔者做过的很多应用，这些应用包括天天背单词APP、移动校园APP、在线音乐播放器、在线视频播放器、通讯录、课程表、Metro界面、新闻列表、手机调查问卷、计算器、移动BBS、电子阅读器等等，这些案例全部来源于真实的生活。

4．低门槛、浅阅读，轻轻松松就能学会

为使本书更加详尽易懂，每写完一章，笔者特邀请3位零基础在校生阅读并提出意见，通过它们快速分析出被遗漏的知识点和讲解不清的技术点，使本书更方便初学者入门。笔者的初衷是，不但能让读者了解做什么（What）与怎么做（How），更能让读者清楚为什么要这么做（Why），本书还提供了很多跨平台移动APP的工具和技巧，帮助读者找到最佳的学习路径和项目解决方案。

 

本书的知识结构

本书共4篇19章，主要章节规划如下。

第一篇（第1~3章）移动开发入门

跨平台的框架有很多，为什么选择jQuery Mobile，选择它后，又如何为它搭建开发环境，搭建完环境后，又如何开发第一个Hello World应用，如何测试和打包应用？这些都是本篇要介绍的内容，除此之外，笔者还解答了一般学习者对于HTML 5的一些常见误区。

第二篇（第4~12章）jQuery Mobile基础

凡是玩过智能手机的人都知道，一个APP大概会包含页面、对话框、工具栏、按钮、表单、列表等可视元素，本篇就是介绍如何用jQuery Mobile制作这些元素，并在手机上显示出来。学会这些后，还会介绍jQuery Mobile的一些高级特性，如布局、插件、事件等。本篇最后通过计算器、移动BBS、电子阅读器、记事本、全键盘界面这5个小案例来复习这些jQuery Mobile的重要知识点。

第三篇（第13~18章）跨平台APP实战

本篇介绍了6个利用jQuery Mobile实现的项目，分别为大学移动校园、个人博客项目、在线音乐播放器、在线视频播放器、大学校园表白墙、天天背单词。本书不仅仅给出了这些项目的源代码，还给出了数据库设计和APP UI的一些设计技巧。

第四篇（第19章）发布和推广应用

本篇内容不多，却是一个APP能被广大受众认可的关键内容。本篇讲述了如何将jQuery Mobile开发的应用通过PhoneGap打包，然后生成各个平台可执行文件。本篇还介绍了发布和推广应用的方法，使读者能真正将开发的应用转化为经济效益。

 

 

本书面向的读者

q HTM 5入门者与HTML 5爱好者

q 基于HTML 5的开发人员

q 各种平台下的移动开发人员

q 从其他开发语言转行做移动开发的人员

q 前端开发人员和前端设计人员

q jQuery Mobile入门学习者

q 大中专院校的学生

q 可作为各种移动应用培训学校的入门教程

 

编者