本书以学生熟练掌握微信小程序开发为目标,以项目化、任务化的方式组织内容,共分为5个项目。其中,项目1引导学生了解微信小程序的开发环境和开发流程;项目2让学生熟悉并掌握微信小程序的框架;项目3介绍微信小程序的常用组件;项目4介绍微信小程序的常用API;项目5为综合实践案例,可以作为学生的实训项目。本书选取的案例在贴合实际的同时,力求简单、有趣、易上手,让学生能够迅速地将所学内容转化为实践。
王大伟,男,本科,浙江工业职业技术学院设计与艺术学院教师,多年从事《微信小程序开发》、《Java程序设计》、《Web前端开发》、《WebApp应用框架》等程序设计语言和框架课程的一线教学,以校企合作、横向课题的方式深度参与多个企业信息管理系统、智慧工厂、智慧小区等项目前后端的开发和维护,有丰富的教学经验和项目经历。
项目1 微信小程序入门:开发环境和开发流程 1
1.1 任务1:微信小程序初探 1
1.1.1 微信小程序介绍 2
1.1.2 微信小程序技术发展史 3
1.2 任务2:搭建开发环境 4
1.2.1 注册账号 4
1.2.2 开发前准备 5
1.2.3 下载开发者工具 6
1.2.4 安装部署 6
1.3 任务3:开发初体验 7
1.3.1 新建项目 7
1.3.2 开发者工具页面 7
1.3.3 项目设置 8
1.4 任务4:项目发布上线攻略 9
1.4.1 项目成员设置 10
1.4.2 提交审核 10
1.4.3 发布项目 10
1.5 学习成果 11
1.6 巩固训练与创新探索 11
1.7 职业技能等级证书标准 12
项目2 个人简历:微信小程序框架 14
2.1 任务1:基本信息页面 14
2.1.1 任务分析 14
2.1.2 微信小程序的框架和目录结构 15
2.1.3 微信小程序注册和生命周期函数 17
2.1.4 【任务实施】构建基本信息页面 18
2.2 任务2:动态生成个人信息 23
2.2.1 任务分析 23
2.2.2 注册页面和页面生命周期函数 24
2.2.3 数据绑定基本用法 25
2.2.4 【任务实施】升级基本信息页面 26
2.3 任务3:教育经历页面 28
2.3.1 任务分析 28
2.3.2 数据绑定中的运算 29
2.3.3 tabBar导航 29
2.3.4 自定义函数 30
2.3.5 设值函数setData() 30
2.3.6 条件渲染 31
2.3.7 【任务实施】构建标签导航 32
2.3.8 【任务实施】构建教育经历页面 34
2.3.9 【任务实施】实现按钮逻辑功能 37
2.4 任务4:项目经验页面 38
2.4.1 任务分析 38
2.4.2 JSON数据 39
2.4.3 列表渲染 40
2.4.4 【任务实施】构建项目经验页面 42
2.5 任务5:专业技能页面 43
2.5.1 任务分析 43
2.5.2 微信小程序模板 43
2.5.3 引用模板和页面 45
2.5.4 【任务实施】构建模板文件的定义模板 46
2.5.5 【任务实施】调用模板构建专业技能页面 47
2.6 学习成果 48
2.7 巩固训练与创新探索 49
2.8 职业技能等级证书标准 50
项目3 微信小程序的常用组件 52
3.1 任务1:计算器 53
3.1.1 任务分析 53
3.1.2 view组件 54
3.1.3 Flex布局 54
3.1.4 自定义数据 55
3.1.5 【任务实施】构建计算器页面 56
3.1.6 【任务实施】实现计算功能 59
3.2 任务2:调色板 61
3.2.1 任务分析 61
3.2.2 RGB颜色表示法 62
3.2.3 slider组件 62
3.2.4 switch组件 62
3.2.5 【任务实施】构建调色板页面 63
3.2.6 【任务实施】实现调色板功能 65
3.3 任务3:动态条形图 68
3.3.1 任务分析 68
3.3.2 icon组件 69
3.3.3 progress组件 70
3.3.4 text组件 70
3.3.5 rich-text组件 71
3.3.6 【任务实施】构建动态条形图页面 72
3.3.7 【任务实施】实现动态条形图功能 73
3.4 任务4:导航页面 76
3.4.1 任务分析 76
3.4.2 navigator组件 77
3.4.3 页面路由管理 79
3.4.4 【任务实施】构建导航页面 80
3.5 任务5:拼图 82
3.5.1 任务分析 82
3.5.2 movable-view组件 82
3.5.3 scroll-view组件 83
3.5.4 rpx尺寸单位及WXSS新特性 85
3.5.5 背景图片和Base64编码 87
3.5.6 【任务实施】构建拼图页面 89
3.5.7 【任务实施】实现拼图功能 90
3.6 任务6:神州寻宝 93
3.6.1 任务分析 93
3.6.2 map组件 94
3.6.3 cover-view组件 99
3.6.4 picker组件 99
3.6.5 picker-view组件 101
3.6.6 button组件 103
3.6.7 【任务实施】构建神州寻宝页面 103
3.6.8 【任务实施】实现神州寻宝功能 104
3.7 任务7:调查问卷 107
3.7.1 任务分析 107
3.7.2 form组件 108
3.7.3 checkbox组件 109
3.7.4 radio组件 109
3.7.5 input组件 110
3.7.6 textarea组件 111
3.7.7 label组件 112
3.7.8 swiper组件 113
3.7.9 【任务实施】构建调查问卷页面 114
3.7.10 【任务实施】实现调查问卷功能 116
3.8 任务8:校园花卉欣赏 118
3.8.1 任务分析 118
3.8.2 image组件 119
3.8.3 audio组件 123
3.8.4 video组件 123
3.8.5 原生组件 124
3.8.6 WXS 125
3.8.7 【任务实施】构建校园花卉欣赏页面 127
3.8.8 【任务实施】实现图片预览功能 129
3.9 学习成果 130
3.10 巩固训练与创新探索 130
3.11 职业技能等级证书标准 132
项目4 微信小程序的常用API 133
4.1 任务1:跨页旅行 134
4.1.1 任务分析 134
4.1.2 微信小程序API 134
4.1.3 页面路由API 135
4.1.4 回调函数 137
4.1.5 【任务实施】构建常用API页面 138
4.1.6 【任务实施】实现子页面链接功能 140
4.1.7 【任务实施】实现跨页旅行功能 141
4.2 任务2:精选相册 143
4.2.1 任务分析 143
4.2.2 图片处理API 143
4.2.3 视频处理API 147
4.2.4 【任务实施】构建相册页面 147
4.2.5 【任务实施】实现选择图片的展示功能 148
4.2.6 【任务实施】实现图片预览功能 149
4.3 任务3:下载进度条 150
4.3.1 任务分析 150
4.3.2 文件上传、下载API 150
4.3.3 文件操作API 153
4.3.4 【任务实施】构建下载进度条页面 155
4.3.5 【任务实施】实现下载进度条功能 155
4.4 任务4:我在哪儿 157
4.4.1 任务分析 157
4.4.2 位置信息API 157
4.4.3 地图组件控制API 161
4.4.4 【任务实施】构建我在哪儿页面 162
4.4.5 【任务实施】实现我在哪儿功能 162
4.4.6 【任务实施】实现附近有啥功能 163
4.5 任务5:坡度计 165
4.5.1 任务分析 165
4.5.2 设备应用API 165
4.5.3 加速度监听API 167
4.5.4 【任务实施】构建坡度计页面并实现功能 169
4.6 任务6:指南针 170
4.6.1 任务分析 170
4.6.2 罗盘数据API 171
4.6.3 WXSS的2D转换 171
4.6.4 【任务实施】构建指南针页面并实现功能 172
4.7 任务7:文章列表页面和文章详情页面 173
4.7.1 任务分析 173
4.7.2 请求服务器数据API 174
4.7.3 交互反馈API 176
4.7.4 【任务实施】获取服务器数据 179
4.7.5 【任务实施】构建菜单和选项卡 182
4.7.6 【任务实施】构建文章列表页面 184
4.7.7 【任务实施】构建文章详情页面 186
4.8 任务8:文章收藏、管理 188
4.8.1 任务分析 188
4.8.2 剪贴板数据API 188
4.8.3 数据缓存API 189
4.8.4 API的同步调用 191
4.8.5 【任务实施】实现文章收藏功能 192
4.8.6 【任务实施】构建我的收藏页面 193
4.8.7 【任务实施】构建收藏详情页面 197
4.9 任务9:音乐涂鸦板 198
4.9.1 任务分析 198
4.9.2 canvas组件和相关API 199
4.9.3 音频播放API 200
4.9.4 音频播放过程的监听 201
4.9.5 【任务实施】构建音乐涂鸦板页面 202
4.9.6 【任务实施】添加背景音乐 203
4.9.7 【任务实施】实现涂鸦功能 204
4.10 学习成果 207
4.11 巩固训练与创新探索 207
4.12 职业技能等级证书标准 209
项目5 智慧校园项目综合实践 211
5.1 需求描述 211
5.1.1 引导页面 212
5.1.2 主页 212
5.1.3 新闻搜索页面 213
5.1.4 新闻详情页面 213
5.1.5 服务页面 213
5.1.6 我的页面 214
5.1.7 个人设置页面 214
5.1.8 修改密码页面 215
5.1.9 意见反馈页面 215
5.1.10 登录页面 216
5.1.11 注册页面 216
5.2 服务器说明 217
5.2.1 服务器启动 217
5.2.2 服务器接口说明 218
5.3 设计思路及相关知识点 218
5.3.1 页面地图 218
5.3.2 所需知识 218
5.4 任务1:项目准备 219
5.4.1 项目创建 219
5.4.2 页面配置 219
5.4.3 引入vant框架 221
5.5 任务2:服务器接口管理与封装 222
5.5.1 服务器接口集中管理 222
5.5.2 接口访问封装 225
5.5.3 常用工具封装 231
5.5.4 页面工具封装 234
5.6 任务3:完成项目编码 235
5.6.1 引导页面 235
5.6.2 主页 239
5.6.3 新闻搜索页面 248
5.6.4 新闻详情页面 252
5.6.5 全部服务页面 254
5.6.6 我的页面 258
5.6.7 个人设置页面 261
5.6.8 修改密码页面 266
5.6.9 意见反馈页面 268
5.6.10 登录页面 270
5.6.11 注册页面 273
5.7 学习成果 276