HTML5跨平台移动开发实训教程

简单易学，快速入门，通俗易懂，代码注释，配套微课、PPT、源代码、习题答案

　　《HTML5跨平台移动开发实训教程/高等院校移动应用开发系列规划教材》围绕HTML5技术讲解移动Web App和小程序的应用开发。该书精选8个实训项目，首先以实例介绍该书开发环境“牛道教学实践云平台”（简称“牛道云”）的基本使用方法，然后进行单页面任务开发，最后综合练习多页面任务的实现。该书采用“任务分析思路引导、相关知识点探究、开发实战攻略、综合能力拓展”的教学方法，对实训项目的每一步操作配备了详细准确的文字描述和操作配图，使读者可以根据指引自学完成项目开发。
　　该书适合应用型本科、高职高专院校的物联网、电子信息、移动应用等专业的专业课教学，对于培训机构学员和一般开发者也具有较好的参考价值。

张胜宇，男，1979年生，深圳职业技术学院电信学院副教授，2005年硕士毕业于哈尔滨工业大学电力电子与电力传动专业，深圳市经贸委专家库成员。主编出版《可编程控制器实训项目式教程》，指导学生获得全国电子竞赛国家二等奖2次、省一等奖5次；广东省“挑战杯”二等奖1次等各项电子大赛奖项。2005年-2006年就职于深圳市艾默生网络能源有限公司，2006年至今就职于深圳职业技术学院。

实训项目1 我的新闻——新闻随身看
学习路径
项目描述
1．1 App与小程序的区别
1．2 牛道云平台介绍
1．3 页面
1．4 组件
1．4．1 “上中下布局”组件
1．4．2 App“标题栏”组件
1．4．3 App“外部页面”组件
1．4．4 小程序“外部页面”组件
1．5 App项目开发
1．5．1 App设计思路
1．5．2 App开发过程
1．5．3 App项目预览
1．5．4 App项目发布
1．6 小程序项目开发
1．6．1 小程序设计思路
1．6．2 小程序开发过程
1．6．3 小程序项目预览
1．6．4 小程序项目发布
1．7 项目拓展：显示天气预报的App和小程序
项目小结

实训项目2 注重身体健康——BMI指数计算器
学习路径
项目描述
2．1 静态数据集概述
2．1．1 数据集的概念
2．1．2 静态数据集
2．2 组件
2．2．1 “标签+输入框”组件
2．2．2 “按钮”组件
2．2．3 App“显示框”组件
2．2．4 小程序“消息对话框”组件
2．2．5 “文本”组件
2．3 画代码编程
2．3．1 图形模型
2．3．2 执行动作
2．4 App项目开发
2．4．1 App设计思路
2．4．2 App开发过程
2．4．3 App项目预览
2．4．4 App项目发布
2．5 小程序项目开发
2．5．1 小程序设计思路
2．5．2 小程序开发过程
2．5．3 小程序项目预览
2．5．4 小程序项目发布
2．6 项目拓展：简易的四则混合运算计算器App和小程序
项目小结

实训项目3 玩个游戏吧——猜猜红心A在哪里
学习路径
项目描述
3．1 组件
3．1．1 “行列”组件
3．1．2 “图片”组件
3．2 代码实现组件事件
3．2．1 组件事件概述
3．2．2 Javascript代码实现组件事件
3．3 组件动态样式属性
3．4 App项目开发
3．4．1 App设计思路
3．4．2 App开发过程
3．4．3 App项目预览
3．4．4 App项目发布
3．5 小程序项目开发
3．5．1 小程序设计思路
3．5．2 小程序开发过程
3．5．3 小程序项目预览
3．5．4 小程序项目发布
3．6 项目拓展：比大小翻翻乐游戏App和小程序
项目小结

实训项目4 我的MP4——音频视频播放器
学习路径
项目描述
4．1 动态数据集
4．1．1 动态数据集的使用
4．1．2 数据集常用属性
4．2 组件
4．2．1 “动态列表”组件
4．2．2 小程序“视图”组件
4．2．3 App“区块”组件
4．2．4 “音频”组件
4．2．5 “视频”组件
4．3 App项目开发
4．3．1 App设计思路
4．3．2 App开发过程
4．3．3 App项目预览
4．3．4 App项目发布
4．4 小程序项目开发
4．4．1 小程序设计思路
4．4．2 小程序开发过程
4．4．3 小程序项目预览
4．4．4 小程序项目发布
4．5 项目拓展：在界面上分区显示、播放音频和视频的App和小程序
项目小结

实训项目5 扫码我也会——条码扫描和拍照
学习路径
项目描述
5．1 Cordova简介
5．2 组件
5．2．1 “二维码”组件
5．2．2 “扫一扫”组件
5．2．3 “附件”组件
5．2．4 小程序“滚动列表”组件
5．2．5 “图标”组件
5．3 App项目开发
5．3．1 App设计思路
5．3．2 App开发过程
5．3．3 App项目预览
5．3．4 App项目发布
5．4 小程序项目开发
5．4．1 小程序设计思路
5．4．2 小程序开发过程
5．4．3 小程序项目预览
5．4．4 小程序项目发布
5．5 项目拓展：媒体信息库App和小程序设计
项目小结

实训项目6 跟我走天下——地理定位
学习路径
项目描述
6．1 组件
6．1．1 “地图”组件
6．1．2 “地理位置”组件
6．1．3 “天气预报”组件
6．1．4 “标签+长文本”组件
6．2 App项目开发
6．2．1 App设计思路
6．2．2 App开发过程
6．2．3 App项目预览
6．2．4 App项目发布
6．3 小程序项目开发
6．3．1 小程序设计思路
6．3．2 小程序开发过程
6．3．3 小程序项目预览
6．3．4 小程序项目发布
6．4 项目拓展：旅游记录App和小程序
项目小结

实训项目7 管理自己的财务——记账本
学习路径
项目描述
7．1 创建页面
7．1．1 新建页面
7．1．2 复制页面
7．2 组件
7．2．1 “按钮组”组件
7．2．2 “下拉列表”组件
7．2．3 “标签+下拉”组件
7．2．4 App“上下滑动”组件
7．3 App项目开发
7．3．1 App设计思路
7．3．2 App开发过程
7．3．3 App项目预览
7．3．4 App项目发布
7．4 小程序项目开发
7．4．1 小程序设计思路
7．4．2 小程序开发过程
7．4．3 小程序项目预览
7．4．4 小程序项目发布
7．5 项目拓展：可拍照的记账本App和小程序
项目小结

实训项目8 记录自己的历程——日记
学习路径
项目描述
8．1 组件
8．1．1 “用户”组件
8．1．2 “微信登录小程序版”组件
8．1．3 “弹出层”组件
8．2 服务制作
8．3 小程序提示框
8．4 App项目开发
8．4．1 App设计思路
8．4．2 App开发过程
8．4．3 App项目预览
8．4．4 App项目发布
8．5 小程序项目开发
8．5．1 小程序设计思路
8．5．2 小程序开发过程
8．5．3 小程序项目预览
8．5．4 小程序项目发布
8．6 项目拓展：日记App和小程序
项目小结

实训项目1我的新闻——新闻随身看【学习目标】

（1） 了解牛道云平台的原理、功能和特点。

（2） 掌握牛道云平台开发Web App和小程序的完整过程。

（3） 掌握“上中下布局”“标题栏”和“外部页面”组件的功能及用法。

（4） 掌握组件的基础属性和样式属性。

（5） 掌握牛道云平台进行Web App和小程序的预览和发布流程。

学习路径

项目描述

腾讯新闻是知名的新闻网站，网址为https://xw.qq.com/。本项目设计新闻随身看的App和小程序： 通过嵌入腾讯新闻的网址，制作移动端新闻App和小程序，实现新闻的随身浏览。

1.1App与小程序的区别

App是英文Application的简称。由于智能手机的流行，App作为智能手机的第三方应用程序，原来只能使用原生代码开发基于iOS、Andriod等系统的原生App，后期随着HTML5（以下简称H5）的飞速发展，基于H5的混合模式App也得到了普及应用。

小程序可以缩写为XCX，英文名称为Mini Program，不需要下载安装即可使用，用户通过扫一扫或搜索即可打开应用。小程序占据内存小，同时可以实现一些功能相对简单、交互相对简洁的需求。轻快，用完即走，无须下载，具有推广形式多样化、速度快、可线上线下联动营销的特点。小程序嫁接微信超10亿月活用户，其应用场景给人以无限的遐想空间。

在牛道云平台上，用户无须编程即可轻松制作小程序和App，制作方式大体相同，部分组件的使用方法略有差异。表11列举了App与小程序的一些区别。表11App与小程序的区别

区别App小程序下载从应用商店（如 App Store）里下载通过微信（扫描二维码、搜索）获得安装安装在手机内存中不需要安装占用空间一直存在手机中占用空间不需要安装，几乎不占用内存空间机会市场中各种用途的App应有尽有还有很多用途的小程序待开发发布安卓App有很多应用商店，需要向这些应用商店提交审核，上架App只需提交到微信公众平台进行审核用户群面向所有智能手机用户，截至2018年约19亿台智能手机面向所有微信用户，约10亿人推广难度需要用户下载程序包，并安装在手机上，较难推广通过二维码、微信搜索等方式获得，较易推广在牛道云平台中有“制作小程序/App/公众号”和“制作App/H5”两个入口。从“制作小程序/App/公众号”入口进入，不仅可以制作小程序，还可以在发布过程中生成App的安装文件，以及生成公众号的链接地址，可谓一举三得。

1.2牛道云平台介绍

牛道云平台是北京起步科技股份有限公司推出的一站式开发云平台，集制作、开发、测试、部署及运维于一体，支持开发各种类型的应用，包括小程序、App、公众号、PC应用、电视应用及企业应用。该平台支持一次开发，多端任意部署，实现敏捷开发。同时支持开发多端应用，共享数据和服务。不仅支持个人开发，还支持团队开发。

牛道云平台提供以下功能。

（1） 使用大量精美的应用模板，典型应用场景可直接套用，轻松配置就可以投入运行。

（2） 用户可以选择自己定制开发，也可以在牛道云平台的众包平台上发布软件需求，委托第三方进行软件设计。

（3） 设计过程中可以随时预览软件运行效果，移动应用还可以通过手机扫码直接进行真机调试运行。

（4） 有丰富的功能组件和页面模板，结合强大的可视化设计工具，无须编程经验，也可以制作出复杂的软件功能。

（5） 启用设计工具的开发模式，开发人员可以直接在线编程，深度扩展软件功能。

（6） 应用设计完成后，可以一键式部署到测试环境，对软件进行集成测试。

（7） 用户可以选择购买主机或者托管主机，一键式自动部署到正式运行环境；同时支持下载部署资源，完全私有化部署。

（8） 应用部署后，牛道云平台还会自动生成应用的后端管理控制台，让最终用户的管理员实现轻松运维。

1.3页面

一个应用可分为后端服务和前端页面两大部分。前端页面负责展现用户界面，实现和用户的交互。良好的用户体验图11页面制作范畴

是前端页面制作的目标。

前端页面制作涉及如图11所示的内容，页面由组件搭建形成，可以快速构建页面；组件实现全配置，制作者不写代码也可以实现页面逻辑。

应用展示给使用者的是一个个的页面。页面是一个相对独立、可复用的界面展现和交互单元，主页是特殊的页面，是应用运行后显示的第一个页面，如图12所示。在页面中可以打开其他页面，在打开其他页面的同时可以传递参数，供被打开页面使用。页面间也可以共享数据。

页面由3部分构成，如图13所示。

图12页面间可以相互调用

图13页面构成

（1） 页面展现： 定义页面的展现，由若干组件构成，存储为W文件。

（2） 页面逻辑： 定义页面逻辑功能，存储为W文件同名的JS（JavaScript）文件。

（3） 页面样式： 定义页面样式，只作用于当前W文件中的界面元素，存储为W文件同名的CSS文件。

1.4组件

页面是由一个个组件构成的，组件既可以是一个以图形化方式显示在屏幕上并与用户进行交互的对象，如“输入框”组图14组件属性

件，也可以是一个没有展现而仅有逻辑功能的组合，为其他组件提供服务，如“数据集”组件。组件是对数据和方法的封装，有自己的基础属性、样式、事件和操作等属性，如图14所示。组件的属性在页面制作区右侧的属性栏中进行设置。

组件根据功能分为4类，分别是展现组件、数据组件、服务组件和功能组件。在设计区添加展现组件后，展现组件显示在设计区中，添加数据、服务和功能组件后，这些组件显示在“数据|服务|功能”组件容器中，这个容器为了不遮挡设计区中的展现组件，一般最小化为一个浅黄底色的小方块，显示在设计区内，位置可以随意移动。单击这个小方块，即可展开，显示其中的数据、服务和功能组件。

为了便于制作，牛道云平台不仅提供了布局组件、内容组件、表单组件和高级组件4类系统组件，还提供了大量具有生态环境的市场组件。

1.4.1“上中下布局”组件

“上中下布局”组件默认自动充满父容器，分为上、中、下3个区域，每个区域都可以设置背景色，App和小程序中名称有区别，如图15所示，本小节以小程序为例。其中，“面板头部”固定显示在页面顶部，“面板底部”固定显示在页面底部，“面板内容”自动充满剩下的区域。当“面板内容”超出“面板内容”区域的高度时，可以通过滑动查看下面的内容，此时“面板头部”和“面板底部”固定不动，仅“面板内容”区域中的内容上下滚动。

图15小程序和App中的“上中下布局”组件

1. 添加/ 删除面板头部区域、底部区域

“上中下布局”组件内部有“面板头部”“面板内容”“面板底部”3个区域，必须有的区域是“面板内容”，“面板头部”和“面板底部”可有可无。添加“面板头部”的方法是： 选择“上中下布局”组件，单击属性栏设置区域的“添加头部区域”按钮，即可添加“面板头部”。删除“面板头部”的方法是： 选中“面板头部”，右击，在快捷菜单中选择“删除”命令，即可删除“面板头部”。“面板底部”的操作和“面板头部”相同。

2. 基础属性

“上中下布局”组件中的“面板头部”和“面板底部”各提供了1个基础属性： 高度，用来设置“面板头部”和“面板底部”的高度，默认为48px。

3. 事件

“上中下布局”组件及其内部3个区域都提供了两个事件： 点击事件和长按事件。在其内部区域添加其他组件后，在这些组件上点击或长按，都会触发这些事件。

4. 样式

“上中下布局”组件提供了1个特有样式： 常用布局，用来设置组件的显示方式。可选项为全屏显示和非全屏显示。

1.4.2App“标题栏”组件

“标题栏”组件通常用在App页面的头部，显示页面的标题及页面中的常用功能按钮。组件内部分为3个区域： 标题、标题栏左边区域、标题栏右边区域，如图16所示。

图16“标题栏”组件

1. 基础属性

“标题栏”组件的标题区提供了1个基础属性： 文本，用于设置显示的标题文本。

2. 样式

“标题栏”组件的标题区提供了1个样式： 宽度占比，用于设置标题区的宽度，剩余宽度由左右区域均分。

在小程序中，页面自带导航栏标题，通过设置导航栏标题的相关属性，可达到与App标题栏一样的效果。

1.4.3App“外部页面”组件

App“外部页面”组件用于显示非本项目中的页面，通过设置外部网页的网址，即可显示网页的内容。

1. 基础属性

App“外部页面”组件提供了3个基础属性。

（1） 页面URL： 用于设置静态的外部页面的网址。

（2） 动态URL： 用于设置动态的网址，即网址可以通过字符串拼接形成。

（3） 显示边框： 设置是否显示边框。

2. 样式

App“外部页面”组件提供了2个样式。

（1） 宽度： 用于设置外部页面显示的宽度，如需充满父容器的宽度，应设置为100%。

（2） 高度： 用于设置外部页面显示的高度，如需充满父容器的高度，应设置为100%。

　　看到有人开始学编程，始终是一件令人振奋的事情。
　　今天，我们已经生活在一个运行于软件之上的世界了。社交沟通，我们用微信、微博；消费购物，我们有淘宝、京东；美食外卖，我们有美团、饿了么；出行打车，我们有滴滴、12306……
　　理解软件世界是如何运转，这件事情的魅力之大，竞足以让一个已经入行金融和投资领域的女孩放弃现有的高薪工作，毅然转行去做程序员。这是一个学编程的真实故事。
　　这个故事的主角是Preethi Kasireddy，她在浏览器之父Marc Andreessen的投资机构A16Z做过两年投资人，见证过许多程序员写写代码、做做应用就能变出一家公司的奇迹。奇迹之下，这个女孩敏锐地意识到，真正起决定性作用的力量不再是金钱和资本，而在于技术和创新——换言之，是编程的能力。而她自己，尽管每一次跟程序员聊天都知道他们在谈些什么概念，却始终也无法把这些“组件”拼凑成一个技术整体并让它运转起来。所以，Preethi Kasireddy决定学习编程。
　　作为一个毫无编程经验的人，她开始去学习专业程序员经常推荐的一本入门书——《“笨办法”学Python》，可惜热情仅仅持续了两周，就被无穷无尽的代码和习题浇灭了。对此，这个女孩甚至一度怀疑自己永远都成不了专业程序员。直到有一周，PreethiKasireddy静下心来学习实战教程和视频讲解，并使用简单的HTML／CSS搭建出她自己的第一个网站，才终于找到学会编程的那种感觉。
　　接下来，这个女孩一边学习编程，一边把自己的学习过程写成博客发布在网站上，包括网页工作原理、JavaScript模块、Debug技巧、开源库入门、以太坊原理等。先了解最基础的知识，紧接着动手实践，然后写文章总结……经过一段时间的奋斗和磨砺，她真的拥有了一份专业的软件工程师工作。
　　这套应用型移动应用开发教材正是为这样的学习实践而编写。无论是写出自己的第一个HTML5应用还是微信小程序，动手实践的真实成果所给予读者的成就感，可以让他们更好地学习软件编程和项目开发。本书所用的“牛道教学实践云平台”，可以让初学者很好地避免一上手就被一般编程教材中常见的代码和习题所困住的窘境。特别是本书采用项目化开发教学模式，实操步骤均通过简单易懂的文字描述和操作配图进行展示，即便是自学也能实现书内所讲的项目。
　　可能有人会想，AI时代对普通程序员的需求会大大降低。但事实却是，2018年秋季校园招聘中，由于AI相关的算法工程师岗位供过于求，字节跳动（今日头条）不得不专门发邮件请求申请者转投移动开发相关的岗位，这些岗位的简历相当稀缺。AI真正改变世界，必定还是要建立在诸如移动、前端、后端这些常规技术能力的基础之上。
　　无论新技术将来怎么发展，我们都已经进入了一个离不开程序员的时代。只要学会编程、弄懂软件，你就可以在这样的时代立足并建立优势。