【编辑推荐】
本书是一本从零开始学习的微信小程序开发入门书，全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。本书包含完整例题应用 110个、章节末尾阶段案例 11个以及提高篇进阶综合案例 3个。本书配套资源丰富，包括教学大纲、教学课件、电子教案、程序源码、在线题库、期末试卷、教学进度表，作者还为本书精心录制了40小时的微课视频。
【内容简介】
本书是一本从零开始学习的微信小程序开发入门书，无需额外的基础。全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。 全书共分为12章，主要内容包括4个部分。第一部分是入门篇，包括第1章和第2章的内容，这两章介绍了小程序的由来、首次注册和创建项目流程；第二部分是基础篇，包括第3章和第4章的内容，这两章介绍了小程序框架和组件；第三部分是应用篇，包括第5～11章的内容，这7个章节分别讲解了微信小程序中网络API、媒体API、文件API、数据API、位置API、设备API、以及界面API的用法；第四部分是提高篇，包括第12章的内容，这一章节提供一个综合应用设计示例——高校新闻小程序的设计与实现，综合应用了全书所学知识，让读者所学即所用。全书包含完整例题应用110个，均在微信web开发者工具和真机中调试通过，并提供全套例题源代码、练习题和视频讲解。 本书可作为小程序爱好者的零基础入门选择，也可作为前端工程师和计算机相关专业学生的小程序开发工具书。
【目录】
第 1章微信小程序入门 2
1.1 微信小程序概述 ·2
1.1.1 小程序简介 2
1.1.2 小程序的诞生 ·2
1.1.3 小程序的功能 ·3
1.1.4 小程序的创建流程 ·3
1.2 开发小程序的准备工作 ·4
1.2.1 注册开发者账号 ·4
1.2.2 小程序的信息完善 ·10
1.2.3 小程序的成员管理 ·13
1.3 小程序的开发工具 ·14
1.3.1 软件的下载与安装 ·14
1.3.2 开发者工具的登录 ·16
1.3.3 其他辅助工具 ·17
1.4 小程序的未来展望 ·18
1.5 本章小结 19
第 2章第一个微信小程序 20
2.1 创建第一个微信小程序 ·20
20
2.1.1 新建项目
第 3章小程序框架 56
3.1 逻辑层 56
3.1.1 小程序 App·56
3.1.2 小程序页面 59
3.1.3 生命周期 64
3.1.4 页面路由 65
3.1.5 模块化 66
3.1.6 基础功能 67
3.1.7 API ·71
3.2 视图层 72
3.2.1 WXML ·72
3.2.2 WXSS·84
3.2.3 组件86
2.2
2.3
2.4
2.5
3.3
3.4
3.5
第 4章
4.1
4.2
2.1.2 真机预览和调试 23
2.1.3 代码的提交 24
2.1.4 小程序的版本 26
2.1.5 制作空白模板代码包
27
2.1.6 我的第一个小程序
29 小程序的目录结构 34
2.2.1 项目配置文件 34
2.2.2 主体文件 34
2.2.3 页面文件 42
2.2.4 sitemap配置文件· 43
2.2.5 其他文件 44 开发者工具的介绍 45
2.3.1 菜单工具栏 46
2.3.2 资源管理器 47
2.3.3 模拟器 · 47
2.3.4 编辑器 · 49
2.3.5 调试器 · 49 阶段案例：简易登录小程序
· 53 本章小结 53
flex布局 · 87
3.3.1 基本概念 87
3.3.2 容器属性
· 88
· 93 3.3.3 项目属性
阶段案例：通讯录小程序
· 97
本章小结 97小程序组件 · 98
组件的介绍和分类 98
4.1.1 组件的介绍 98
4.1.2 组件的分类 99 视图容器组件 99
4.2.1 view
· 99
1014.2.2 scroll-view 4.2.3 swiper
·102 4.4.9 slider
141
4.2.4 movable-view
·104 4.4.10 switch
· 142
4.2.5 cover-view 108 4.4.11 textarea
4.3 基础内容组件 ·109
4.4.12 editor
· 144
146
4.3.1 icon
4.3.2 text
·109 4.5 导航组件 · 148
4.3.3 rich-text 111
4.6 媒体组件 150
112
4.6.1 image · 150 4.3.4 progress 116 4.6.2 video 154 4.4 表单组件
117 4.6.3 camera
156 4.4.1 button 117
·120 4.7 地图组件 158 4.4.2 checkbox
4.7.1 markers· 159 4.4.3 input ·122
4.7.2 polyline 160 4.4.4 label 127 4.7.3 circles
· 160 4.4.5 form 128
130 4.8 画布组件
162 4.4.6 picker
·137 4.9 阶段案例：趣味心理测试小程序
163 4.4.7 picker-view
4.4.8 radio
·139 4.10本章小结 164
第 5章网络 API ·166 第 7章文件 API· 210
5.1 小程序网络基础 ·166 7.1 保存文件
· 210
212 5.1.1 小程序/服务器架构 166 7.2 获取文件信息
5.1.2 服务器域名配置 ·168 7.3 获取本地文件列表
215 5.1.3 临时服务器部署 ·170 7.4 获取本地文件信息 218
221 5.2 发起请求和中断请求 ·172 7.5 删除本地文件
5.2.1 发起请求 172 7.6 打开文档
· 223
5.2.2 中断请求
173 7.7 阶段案例：个人相册小程序
· 226
5.3 文件传输 180 7.8 本章小结 226
5.3.1 文件的上传
180 第 8章数据缓存 API · 227 5.3.2 文件的下载 184 8.1 本地缓存 227
5.4 阶段案例：成语词典小程序
·187 8.2 数据的存储 228
5.5 本章小结 1888.2.1 异步存储数据
228 第 6章媒体 API ·189 8.2.2 同步存储数据
230
6.1 图片管理 189 8.3 数据的获取 232
6.1.1 选择图片 189 8.3.1 异步获取数据
232 6.1.2 预览图片 190 8.3.2 同步获取数据 234
6.1.3 获取图片信息 ·190 8.4 存储信息的获取 235
6.1.4 保存图片
191 8.4.1 异步获取存储信息
235 6.2 录音管理
193 8.4.2 同步获取存储信息 237
6.3 音频管理 196 8.5 数据的删除 239
6.3.1 背景音频管理
196 8.5.1 异步删除数据
239 6.3.2 内部音频控制 198 8.5.2 同步删除数据 241
6.4 视频管理 201 8.6 数据的清空 243
6.4.1 选择视频 201 8.6.1 异步清空数据
243 6.4.2 保存视频 202 8.6.2 同步清空数据 244
· 246 6.4.3 视频组件控制 202 8.7 阶段案例：极简清单小程序
6.5 相机管理
205 8.8 本章小结 247
208 第 9章位置 API· 248
6.6 阶段案例：音乐播放器小程序
6.7 本章小结 2099.1 位置信息 248
X
9.1.1 经纬度坐标 248 11.3.4 设置 tabBar样式· 304
9.1.2 坐标的类别 248 11.3.5 显示与隐藏 tabBar
305
9.2 获取和选择位置 ·249 11.4页面导航· 308
9.2.1 获取位置
249 11.4.1 跳转到新页面 · 308 9.2.2 选择位置 251 11.4.2 返回指定页面 · 309
9.3 查看位置
252 11.4.3 当前页面重定向 · 310
9.4 地图组件控制 ·254 11.4.4 重启页面 · 310
9.4.1 获取地图上下文对象 ·254 11.4.5 切换 tabBar页面
· 310
9.4.2 获取地图中心坐标
·255 11.5动画 313
9.4.3 移动到指定位置
·256 11.5.1 动画实例 · 313
9.4.4 动画平移标记
257 11.5.2 动画的描述 · 314 9.4.5 展示全部坐标 259 11.5.3 动画的导出
· 315
9.4.6 获取视野范围
260 11.6页面位置
318
9.4.7 获取地图缩放级别
·262 11.7下拉刷新· 320
9.5 阶段案例：红色旅游地图小程序
·263 11.7.1 监听下拉刷新 · 320
9.6 本章小结 26411.7.2 开始下拉刷新 · 320 第 10章设备 API265 11.7.3 停止下拉刷新
· 321
10.1系统信息 ·265 11.8阶段案例：幸运大转盘抽奖
10.1.1 获取系统信息
·265 小程序
322
10.1.2 canIUse()
·267 11.9本章小结· 323
10.2网络·269 第 12章画布 API · 324
10.2.1 网络状态
·269 12.1准备工作
324
10.2.2 Wi-Fi
·271 12.1.1 画布坐标系 · 324
10.3传感器·275 12.1.2 创建空白画布 · 324
10.3.1 罗盘
·275 12.1.3 创建画布上下文 · 325
10.3.2 加速度计
·277 12.2绘制矩形 327
10.4用户行为 ·278 12.2.1 创建矩形 · 327
10.4.1 截屏·278 12.2.2 填充矩形 · 327
10.4.2 扫码
·279 12.2.3 描边矩形 · 327
10.4.3 剪贴板
·280 12.2.4 清空矩形区域
· 328
10.4.4 通话
·282 12.3绘制路径 330
10.5手机状态 ·285 12.3.1 绘制线段
330 10.5.1 内存·285 12.3.2 绘制圆弧 332
10.5.2 屏幕亮度
334 ·286 12.3.3 绘制曲线
10.5.3 振动
·288 12.4绘制文本 336
10.6阶段案例：幸运抽签小程序
289 12.4.1 填充文本 · 336
10.7本章小结 ·28912.4.2 设置文本基准线 · 336 第 11章界面 API290 12.4.3 设置文本对齐方式 · 336
11.1交互反馈 ·290 12.4.4 设置字体风格
· 337
11.1.1 消息提示框
·290 12.5绘制图片 338 11.1.2 加载提示框 ·292 12.5.1 绘制步骤 · 338
11.1.3 模态弹窗
·293 12.5.2 绘制原图 · 339 11.1.4 操作菜单 ·296 12.5.3 缩放图片 · 340
11.2导航条设置 ·298 12.5.4 图片的切割
· 340
11.2.1 当前页面标题设置
298 12.6颜色与样式 · 342
299 12.6.1 颜色透明度
· 342 11.2.2 导航条加载动画
11.2.3 导航条颜色设置 301 12.6.2 线条样式
344 11.3 tabBar设置302 12.6.3 渐变样式
348
11.3.1 tabBar标记302 12.6.4 阴影样式 350
11.3.2 tabBar红点303 12.6.5 图案填充
351 11.3.3 onTabItemTap() 303 12.7保存与恢复 · 352
XI
12.8变形与剪裁 ·352 12.9图像的导出
359
12.8.1 图像的变形
·352 12.10 阶段案例：你画我猜小程序
361
12.8.2 图像的剪裁
·356 12.11本章小结 · 362
第 13章小程序 AI.基于腾讯智能对话14.3准备工作 396 平台 ColorUI的机器人小程序 ·364 14.3.1 项目创建
· 396
13.1小程序插件——腾讯智能对话 14.3.2 页面配置
· 396 平台 TBP
364 14.3.3 自定义组件
397
13.1.1 什么是小程序插件 ·364 14.3.4 公共 JS文件
397
13.1.2 腾讯智能对话平台简介 ·364 14.4视图设计 398
13.1.3 在小程序管理后台添加 14.4.1 导航栏设计
398 TBP插件366 14.4.2 自定义组件 bankcard
13.2小程序自定义组件
367 设计
· 399
13.2.1 什么是自定义组件 ·367 14.4.3 【首页】设计
402
13.2.2 小程序组件库 ColorUI·368 14.4.4 【银行卡信息录入页】
13.2.3 在小程序项目中添加 设计
· 403 ColorUI组件库 369 14.4.5 【银行名称索引页】
· 404
13.3准备工作 ·369 设计
13.3.1 服务器端准备
369 14.5逻辑实现 407
407
13.3.2 小程序端准备 372 14.5.1 【首页】逻辑
13.4视图设计 ·373 14.5.2 【银行名称索引页】
13.4.1 代码复用
373 逻辑
· 412
13.4.2 导航栏设计
374 14.5.3 【银行卡信息录入页】
13.4.3 聊天记录区域设计
416
·374 逻辑
13.4.4 底部输入框设计
378 14.6本章小结 423
13.5逻辑实现 ·379 14.7参考资料 424
13.5.1 代码复用
379 第 15章小程序全栈开发 .基于 WAMP
13.5.2 公共函数获取当前时间
379 ThinkPHP 6.0的高校新闻小程序 425
425
13.5.3 获取机器人列表 380 15.1需求分析
13.5.4 显示用户本人消息
·381 15.2准备工作 426
13.5.5 机器人对话服务接口
384 15.2.1 小程序端准备
426
428
13.5.6 聊天内容自动上拉
·385 15.2.2 服务器端准备
13.6本章小结 ·386 15.3视图设计 436
13.7参考资料 ·38715.3.1 导航栏设计
436 第 14章小程序服务平台 .基于微信 OCR识15.3.2 tabBar设计
437 别 Vant Weapp的银行卡包小程序 388 15.3.3 页面设计
· 437
14.1小程序服务平台概述
388 15.4逻辑实现 445
· 445
14.1.1 什么是小程序服务平台 ·388 15.4.1 首页逻辑
451
14.1.2 微信 OCR识别服务简介 389 15.4.2 新闻详情页逻辑
14.1.3 微信 OCR识别服务接入 390 15.4.3 个人中心页逻辑
455 14.2小程序自定义组件 394 15.5最终效果展示 · 459
14.2.1 小程序 UI组件库—— 15.6本章小结 459 Vant Weapp
·394 15.7参考资料 460
14.2.2 自主开发组件模板配置
·395 15.8结束语 460
附录 A 个人开发者服务类目 461附录 B 小程序场景值 · 463附录 C 小程序预定颜色 · 465
XII
【前言】
微信小程序（ Mini Program）是一种轻量级的应用，它实现了应用“触手可及”的梦想，用户无须下载、安装，即可在微信中使用小程序。微信小程序在基于 Web前端技术基础的同时有其独特的语法和框架，提供微信同款 UI和功能接口，大幅提高了开发者的效率，不仅能让零基础入门的开发者迅速上手开发出美观且流畅的应用，也能给使用者带来优秀的体验。
《微信小程序开发零基础入门》由清华大学出版社于 2019年 1月出版，因其内容前沿、编校质量优秀，受到读者的一致好评。该书也是 2018年第一批产学协同育人项目微信事业部“小程序课程改革”的配套图书，且连续 3年被评为清华大学出版社年度畅销图书。图书自发行以来，除了被大量社会读者购买以外，还先后被北京大学、首都师范大学、南京航空航天大学、浙江大学等上百所学校选作教材，也被多所学校图书馆馆藏。本书是《微信小程序开发零基础入门》的第 2版，被评为国家级实验教学示范中心计算机学科组“十四五”规划教材。
本书是从零开始学习的微信小程序开发入门书，读者无须具备小程序开发基础知识。全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。为了进一步提高本书质量，打磨更多前沿技术案例回馈读者，作者采纳了读者朋友们的问题反馈和修改建议，经过与官方最新技术规范对照，在第 1版的基础上进行了勘误并补充了官方新推出的组件和功能，每章末尾新增了阶段案例（总量相当于额外赠送了一本实战教材）和综合提高案例，全部配套了详细的视频讲解。
全书分 4篇共 15章，内容分别如下。
入门篇包括第 1章和第 2章。其中，第 1章是微信小程序入门，概要介绍小程序的诞生、特点和主要功能，详细讲解了如何注册开发者账号和完善信息，以及开发工具的下载与安装；第 2章是第一个微信小程序，从零开始讲解新建项目、真机预览和调试、代码提交等操作，并基于该项目介绍了小程序的目录结构和开发者工具的基本功能，本章包含阶段案例“简易登录小程序”。
基础篇包括第 3章和第 4章。其中，第 3章是小程序框架，主要讲解逻辑层、视图层和基础布局模型 flex的用法，本章包含阶段案例“通讯录小程序”；第 4章是小程序组件，按照功能分类依次介绍视图容器、基础内容、表单、导航、媒体、地图和画布组件的用法，本章包含阶段案例“趣味心理测试小程序”。
应用篇包括第 5～12章。这 8 章分别讲解微信小程序中的各类 API，包括网络 API、媒体 API、文件 API、数据缓存 API、位置 API、设备 API、界面 API以及画布 API。每章包含的阶段案例分别是“成语词典小程序”“音乐播放器小程序”“个人相册小程序”“极简清单小程序”“红色旅游地图小程序”“幸运抽签小程序”“幸运大转盘抽奖小程序”“你画我猜小程序”。
提高篇综合应用前面所学的基础知识和各类 API完成功能更加丰富的小程序项目，包括第 13～15章。这 3章难度逐层递增，第 13章是小程序 AI·基于腾讯智能对话平台 ColorUI 的机器人小程序，讲解如何使用小程序插件和 ColorUI组件库；第 14章是小程序服务平台·基于微信 OCR识别 Vant Weapp的银行卡包小程序，讲解如何使用小程序服务平台能力、 Vant Weapp组件库以及自定义组件；第 15章是小程序全栈开发·基于 WAMP ThinkPHP 6.0的高校新闻小程序，讲解如何部署 Windows Apache MySQL PHP环境，如何快速配置 ThinkPHP 6.0框架并制作接口，以及如何与小程序前端交互形成完整全栈开发案例。
本书最后是附录，包括个人开发者服务类目、小程序场景值以及小程序预定颜色对照表。
本书包含完整例题应用 110个、阶段案例 11个以及提高篇进阶综合案例 3个，均在微信开发者工具和真机中调试通过。
为便于教学，本书提供丰富的配套资源，包括教学大纲、教学课件、电子教案、程序源码、教学进度表、习题答案、期末试卷和 40小时的微课视频，比起第 1版还新增了题库系统。
资源下载提示
素材（源码）等资源：扫描目录上方的二维码下载。在线作业：扫描封底的作业系统二维码，登录网站在线做题及查看答案。微课视频：扫描封底的文泉云盘防盗码，再扫描书中相应章节的视频讲解二维码，
可以在线学习。
由于未来微信开发工具软件版本升级和官方文档变更等原因有可能导致读者学习时个别功能无法正确显示，如遇此情况请扫描下方二维码查看常见问题汇总文档，我们将会定期更新该文档并告知原因和解决方案。
常见问题汇总
为方便读者综合应用本书所学知识进行实战项目的开发，作者精心为每章配套编制了多个综合实战项目，已编入《微信小程序开发实战 -微课视频版》，可作为本书的配套实践指导书。
最后，感谢清华大学出版社的魏江江分社长、本书责任编辑王冰飞老师以及相关工作人员，非常荣幸能有机会与卓越的你们再度合作；感谢家人和朋友们所给予的关心和大力支持，本书能够完成与你们的鼓励是分不开的；特别感谢刘欣妍和刘昕语的支持，让我可以专注于书稿的编写与修订。
愿本书能够对读者学习微信小程序有所帮助，并真诚地欢迎读者批评指正。希望能与读者朋友们共同学习成长，在浩瀚的技术之海不断前行。
作 者
2023年 7月
