移动Web开发技术项目教程

项目1 移动互联网Web技术发展

任务1.1 了解移动Web开发

1.1.1 Web前端的定义

1.1.2 前端应用的分类

1.1.3 移动Web开发与PC端Web开发的区别

任务1.2 了解HTML5在移动开发中的应用

1.2.1 HTML5技术的发展

1.2.2 HTML5技术的优势

任务1.3 了解HTML5开发工具和框架

1.3.1 HTML5开发工具

1.3.2 HTML5主流开发框架

思考练习

项目2 使用HTML+CSS制作网页

任务2.1 使用基本标签制作网页

2.1.1 HTML的标签构成

2.1.2 HTML网页文档的基本格式

2.1.3 常用的HTML元素

2.1.4 文本格式化标记

2.1.5 特殊字符标记

2.1.6 HTML图像标记

2.1.7 相对路径和绝对路径

2.1.8 HTML的列表

2.1.9 超链接标记

任务2.2 使用div+CSS制作网页

2.2.1 使用div+CSS布局网站的优点

2.2.2 使用div+CSS布局网站的作用

2.2.3 认识盒子模型

2.2.4 一行多列布局居中

2.2.5 CSS语法结构

2.2.6 样式表在网页中嵌入的方式

2.2.7 float浮动属性

2.2.8 列表标记在导航栏中的应用

2.2.9 使用链接伪类控制超链接

2.2.10 overflow属性

2.2.11 元素的定位

2.2.12 表格标记

2.2.13 表单标记

思考练习

项目3 使用HTML5+CSS3制作网页

任务3.1 使用HTML5+CSS3基本标签制作网页

3.1.1 HTML5的结构标签

3.1.2 分组结构标签

3.1.3 页面交互元素

3.1.4 CSS3的选择器

任务3.2 使用HTML5表单标签制作网页

3.2.1 表单概述

3.2.2 表单元素及属性

3.2.3 表单验证

任务3.3 制作开发响应式页面

3.3.1 视口

3.3.2 媒体查询

3.3.3 百分比布局

3.3.4 制作响应式页面

任务3.4 制作跨平台移动Web布局页面

3.4.1 栅格系统

3.4.2 弹性盒布局

思考练习

项目4 使用JavaScript制作网页特效

任务4.1 操作JavaScript基本语句

4.1.1 JavaScript概述

4.1.2 JavaScript与网页代码结合的方式

4.1.3 document文档对象

4.1.4 Date日期时间对象

4.1.5 数组

任务4.2 使用对象模型

4.2.1 for循环

4.2.2 函数定义

4.2.3 定时函数

思考练习

项目5 使用HTML5新增功能开发移动端页面

任务5.1 地理位置信息的定位

5.1.1 Geolocation地理位置信息的定位介绍

5.1.2 获取当前位置的地理信息

5.1.3 watchPosition()方法

5.1.4 使用Geolocation API获取当前位置的应用

任务5.2 使用Web Workers处理线程

5.2.1 Web Workers概述

5.2.2 使用Web Workers创建线程

5.2.3 页面与线程的数据交互

5.2.4 使用Shared Workers创建共享线程

任务5.3 HTML5的文件操作与拖动操作

5.3.1 HTML5文件操作

5.3.2 拖动操作

思考练习

项目6 使用微信小程序开发移动端网页

任务6.1 开发准备

6.1.1 申请开发账户

6.1.2 使用微信开发者工具

任务6.2 使用app.json进行小程序全局配置

6.2.1 认识小程序核心文件的作用

6.2.2 使用app.json进行全局配置

任务6.3 使用常用组件和样式制作小程序

6.3.1 view布局组件

6.3.2 文本图像组件

6.3.3 导航组件

6.3.4 表单组件

任务6.4 数据交互

6.4.1 数据绑定

6.4.2 条件渲染

6.4.3 列表渲染

6.4.4 事件处理

思考练习

参考文献

任务1.1了解移动Web开发

在互联网发展的同时，移动互联网也呈现出爆发式的增长，中国互联网络信息中心发布的第50次《中国互联网络发展状况统计报告》中，截至2022年6月，我国网民规模达10.51亿，网民使用手机上网的比例为99.8%，网民上网设备进一步向移动端集中。随着移动通信网络环境的不断完善及智能手机的进一步普及，移动互联网应用向用户各类生活需求深入渗透，促进手机上网使用率增长，增长势头强劲。

1.1.1Web前端的定义

Web 前端是指创建Web页面或APP等前端界面呈现给用户的过程，主要分为前端设计和前端开发，前端设计是指为网站进行视觉设计，前端开发是指对网页进行代码编辑。Web前端包括基本的HTML、CSS、JavaScript等的代码开发和编辑。

前端开发通过HTML、CSS、JavaScript及其衍生出来的各种技术、框架、解决方案，实现互联网产品的用户界面交互。在互联网的演化进程中，网页制作是Web 1.0时代的产物，早期网站的主要内容都是静态的，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。1.1.2前端应用的分类

如图1-1所示，前端应用主要分为3类。第一类应用是个人计算机(personal computer，PC）端 Web页面，即在计算机上使用浏览器打开的百度、搜狐、淘宝等；第二类应用是移动Web页面，即在手机或平板计算机上使用QQ浏览器、UC浏览器等浏览网页；第三类应用是移动端第三方应用程序，即在应用商店中下载的 Android、iOS等APP应用。

这些应用的数据从何而来呢？例如，我们想通过这些应用查询一个具体的信息，则它们都要通过网络访问在远端的服务器后端程序，服务器程序有Java程序、PHP程序、Python程序等，这些程序在访问数据库并获取到数据之后，再由后端程序返回给前端的应用，用户就可以看到自己想查询的信息了。当我们购买商品时，也是先把商品信息提交到服务器后端程序，由后端程序将信息放入数据库中。

这两种前端开发都是有市场需求的，但随着移动互联网应用的兴起，移动 Web应用和APP应用的需求越来越多。

……

本书主要介绍Web技术的发展及HTML5在移动开发中的应用(如HTML、Css和JavaScript基本标签的使用)，介绍利用HTML5新增功能开发移动端页面以及使用微信小程序开发移动端网页，并配备丰富的实例作为实践，旨在帮助读者将移动wWeb开发技术运用于实践中。