微信小程序开发案例教程 pdf下载

案例驱动，轻松掌握知识点
配套MOOC+微课视频同步讲解

微信小程序因其应用方便、快捷和功能强大，用户数量不断增加，而受到越来越多高校师生的关注，很多高校都开设了或者正在开设“微信小程序开发”相关的课程。但目前市场上与微信小程序开发有关的书籍要么是针对项目开发，要么是照搬官方文档，大都不太适合用作教材。
编者根据教学需要，打破了官方文档的讲解次序，设计了61个教学案例，每个案例都经过了测试和验证，按照案例描述→实现效果→案例实现→相关知识→总结与思考的步骤进行讲解，遵循学生的认知规律，做到由浅入深、由特殊到一般，使读者轻松掌握微信小程序开发的方法和技巧。全书共分8章，内容包括：初识微信小程序、小程序编程基础、小程序框架、小程序组件、小程序API、云开发等内容，zui后讲解了2个综合案例以及代码管理的知识。此外，与本书配套的MOOC课程已经在中国大学MOOC平台（www.icourse163.org ）正式上线。书中所有案例均配有微视频，读者扫描案例旁边的二维码即可观看。
本书适合作为高等院校“微信小程序开发”相关课程的教材，也可作为微信小程序开发爱好者的入门参考书。

杜春涛，男，博士，教授，北方工业大学计算机基础教学团队负责人。多年来一直从事计算机基础教学工作，讲授了《微信小程序开发》、《大学计算机基础》、《面向对象程序设计》等课程。负责建设了《微信小程序开发》MOOC课程（2019.8在“中国大学MOOC”平台上线）和《新编大学计算机基础》MOOC课程（2018.8在“智慧树”平台上线）。近年来主持了北京市、教育部等教育教学项目10多项，发表论文30余篇，主编教材5部，出版专著1部。

第 1 章 初识微信小程序 1
1.1 注册小程序账号 ／ 2
1.2 查看小程序的AppID ／ 3
1.3 设置小程序信息 ／ 4
1.4 下载并安装小程序开发者工具 ／ 4
1.5 创建和打开小程序 ／ 5
1.6 第一个微信小程序 ／ 7
第 2 章 小程序编程基础 ／ 9
案例2.1 字体样式设置 ／ 10
案例2.2 文本样式设置 ／ 12
案例2.3 图片与声音 ／ 14
案例2.4 盒模型 ／ 16
案例2.5 flex弹性盒模型布局 ／ 19
案例2.6 导航与布局 ／ 22
案例2.7 float页面布局 ／ 25
案例2.8 摄氏温度转华氏温度 ／ 28
案例2.9 条件语句和数学函数 ／ 31
案例2.10 成绩计算器 ／ 35
案例2.11 循环求和计算器 ／ 39
案例2.12 随机数求和 ／ 43
案例2.13 计时器 ／ 47
案例2.14 自动随机变化的三色旗 ／ 50
第 3 章 小程序框架 ／ 54
案例3.1 小程序的基本架构 ／ 55
案例3.2 小程序的执行顺序 ／ 60
案例3.3 数据及事件绑定 ／ 65
案例3.4 变量和函数的作用域及模块化 ／ 68
案例3.5 条件渲染 ／ 71
案例3.6 成绩等级计算器 ／ 73
案例3.7 列表渲染 ／ 75
案例3.8 九九乘法表 ／ 78
案例3.9 模板的定义及引用 ／ 80
案例3.10 利用include 引用文件 ／ 82
第 4 章 小程序组件 ／ 85
案例4.1 货币兑换 ／ 86
案例4.2 三角形面积计算器 ／ 89
案例4.3 设置字体样式和大小 ／ 93
案例4.4 滑动条和颜色 ／ 96
案例4.5 轮播图和开关选择器 ／ 99
案例4.6 个人信息填写 ／ 103
案例4.7 图片显示模式 ／ 109
案例4.8 音频演示 ／ 112
案例4.9 视频演示 ／ 115
案例4.10 考试场次选择 ／ 120
第 5 章 小程序API ／ 131
案例5.1 变脸游戏 ／ 132
案例5.2 阶乘计算器 ／ 135
案例5.3 基本绘图 ／ 138
案例5.4 参数绘图 ／ 147
案例5.5 改变图形 ／ 150
案例5.6 绘制正弦曲线 ／ 153
案例5.7 自由绘图 ／ 154
案例5.8 动画 ／ 160
案例5.9 照相和摄像 ／ 167
案例5.10 位置和地图 ／ 172
案例5.11 文件操作 ／ 178
案例5.12 数据缓存 ／ 183
案例5.13 网络状态 ／ 193
案例5.14 传感器 ／ 197
案例5.15 扫码与打电话 ／ 202
案例5.16 屏幕亮度、剪贴板和手机振动 ／ 207
案例5.17 设备系统信息 ／ 211
案例5.18 导航栏 ／ 216
案例5.19 标签栏 ／ 220
案例5.20 操作菜单 ／ 226
第 6 章 云开发 ／ 229
案例6.1 获取OpenID ／ 230
案例6.2 文件上传下载 ／ 236
案例6.3 数据库操作 ／ 246
案例6.4 云函数应用 ／ 261
第 7 章 综合案例 ／ 270
案例7.1 计算器 ／ 271
案例7.2 支付宝九宫格导航界面设计 ／ 279
第 8 章 代码管理 ／ 287
8.1 Git ／ 288
8.2 微信开发者·代码管理 ／ 292
参考文献 ／ 300

微信小程序自2017年1月9正式上线以来就引起广泛关注。微信创始人张小龙说：“小程序是一种不需要下载安装就可以使用的应用，它实现了应用‘触手可及’的梦想，用户扫一扫或搜一下即可打开应用。这也体现了‘用完即走’的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装下载”。
本书在内容设计方面本着简单易学、有用有趣的教学理念，遵循人的认知规律，采用案例方式介绍小程序开发的方法和技巧。每个案例通过：案例描述→实现效果→案例实现→相关知识→总结与思考的步骤进行讲解。案例描述介绍要做一个什么样的案例，该案例具有哪些功能；实现效果给出了该案例实现后的运行效果，让读者对该案例有一个明确的感性认识；案例实现是通过编写代码具体实现该案例；相关知识介绍了该案例用到了哪些小程序开发的知识要点，并对这些知识要点进行讲解；总结与思考是对该案例所涉及的知识点进行总结，并针对该案例提出一些思考的问题，进一步升华对该案例的理解。
本书打破了官方文档介绍小程序开发的顺序，而是根据怎样让学习者一开始就能够对小程序产生兴趣、能够让初学者循序渐进地学习和掌握小程序开发方法来设计每一个案例。
本书共分8章，设计了61个教学案例。
第1章：初识微信小程序。首先介绍了注册小程序账号、查看小程序AppID、设置小程序信息、下载并安装小程序开发环境以及创建和打开小程序的方法，最后通过1个案例演示了小程序开发的过程和方法。
第2章：小程序编程基础。设计了14个案例，演示了小程序开发的基础知识，包括HTML、CSS和JavaScript中的基础知识，为小程序开发奠定基础。
第3章：小程序框架。设计了10个案例，演示了小程序的基本架构、执行顺序、数据及事件绑定、模块化、条件渲染、列表渲染、模板以及引用文件等知识。
第4章：小程序组件。设计了10个案例，演示了小程序组件的各种功能和使用方法。使用的组件包括：视图容器、基础内容、表单组件、导航组件、媒体组件、地图、画布等内容。
第5章：小程序API。设计了20个案例，演示了小程序API函数的各种功能和使用方法。使用的API函数包括：系统信息、定时器、路由、界面、数据缓存、媒体、位置、画布、文件等内容。
第6章：云开发。设计了4个案例，演示了小程序云开发的方法和技巧，包括：获取OpenID、文件上传下载、数据库操作、云函数应用等内容。
第7章：综合案例。设计了2个综合案例：计算器和支付宝九宫格导航界面设计，演示了小程序综合案例的设计方法和技巧。
第8章：代码管理。介绍了版本控制的概念、Git分布式版本控制系统和常用的Git命令、微信开发者•代码管理平台以及启用开发者工具中的“版本管理”服务进行多人协作开发时的代码管理的方法。
本书采用MOOC+微课的模式，所有内容都已经在“中国大学MOOC”平台上线运行，读者也可以直接扫描书中的二维码观看每个案例的详细讲解视频。本书由杜春涛
任主编，编写了第1～5章和第7章；付瑞平任副主编，编写了第6章和第8章。本书在编写过程中得到了北方工业大学马礼教授、王景中教授、刘文楷教授、宋威教授、王若宾副教授、尹天光老师、肖彬老师、程楠楠老师、王丹同学、徐鸿铎同学、中国铁道出版社有限公司周欣主任的大力支持和帮助，在此表示衷心感谢。
限于编者水平，加之时间仓促，书中难免存在疏漏和不足之处，恳请各位专家、老师、学者和广大读者批评指正。
本书受2018年（第一批）教育部产学合作协同育人项目（腾讯微信事业群支持，项目编号：201801002005）、2018年全国高等院校计算机基础教育研究会计算机基础教育教学研究项目（资助专项类，项目编号：2018-AFCEC-048，2018-AFCEC-049）、2019年全国高等院校计算机基础教育研究会计算机基础教育教学研究项目（资助专项类，项目编号：2019-AFCEC-001）、2019年北方工业大学教育教学改革一般项目（项目名称：基于新建构主义学习理论的MOOC教学研究）、2019年北方工业大学教材出版基金等项目支持。
编 者
2019年6月