第一章初识微信小程序

本章首先介绍了注册小程序账号、查看小程序AppID、设置小程序信息、下载并安装小程序开发环境以及创建和打开小程序的方法，最后通过1个案例演示了小程序开发过程和方法。

●1.1注册小程序账号

本案例演示了注册小程序账号、查看小程序AppID、设置小程序信息以及下载并安装小程序开发环境的方法。

●1.2案例101-第一个微信小程序

设计一个小程序，小程序运行后在界面上显示一句话：“Hello Wechat！”。通过本案例，掌握小程序的开发过程和方法。

第二章小程序编程基础

本章通过14个案例介绍了小程序开发的基础知识，包括HTML、CSS和JavaScript中的基础知识和代码设计方法，为小程序开发奠定基础。

●2.1案例201-字体样式设置

设计一个小程序，分别利用style和class属性设置字体样式，在index.wxss中定义样式类。所有的文字都包含在一个边框内，边框内上方有标题文字，边框和标题样式利用class属性来设置，在app.wxss中定义样式类。通过本案例，掌握字体样式的设置方法

●2.2案例202-文本样式设置

设计一个小程序，利用class属性设置文本样式，包括：文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。通过本案例，掌握文本样式的设置方法。

●2.3案例203-图片与声音

设计一个小程序，小程序运行后显示一张猫图，点击猫图后会发出猫叫的声音。通过该案例通过本案例，掌握图片和声音的使用方法以及数据绑定和事件绑定的含义及使用方法。

●2.4案例204-盒模型

设计一个小程序，利用盒模型的相关属性实现不同的布局模式。通过本案例，掌握盒模型结构、内外边距的设置方法、边框的设置方法等

●2.5案例205-flex弹性盒模型布局

设计一个小程序，利用flex弹性盒模型布局实现三栏布局、左右混合布局和上下混合布局。通过本案例，掌握利用line-height属性实现文字垂直居中对齐的方法以及Flex布局的方法

●2.6案例206-导航与布局

设计一个实现导航功能的小程序。导航页面包含多行导航内容，每行导航内容包括1个icon图标、1个说明文本和1个图片，icon图标在最左侧、文本在icon右侧，图片在最右侧。当点击某一行导航内容时都能进入相应的页面。通过本案例，掌握icon图标组件的使用方法和navigator导航组件的使用方法

●2.7案例207-Float页面布局

演示了利用float布局实现需要的布局效果的方法和技巧。通过本案例，掌握利用margin属性实现水平居中对齐的方法、float属性的使用方法以及clear属性的使用方法

●2.8案例208-摄氏温度转华氏温度

演示了根据摄氏温度C求华氏温度F的实现方法。通过本案例，掌握input组件的使用方法、 数学表达式转换为JavaScript表达式的方法，以及JavaScript程序顺序执行的实现方法

●2.9案例209-条件语句和数学函数

设计一个利用条件结构和数学函数进行计算的小程序。当输入x值时，根据下面的公式计算出y的值。通过本案例，掌握JavaScript中数学函数和条件语句的使用方法。

●2.10案例210-成绩计算器

设计一个计算学生平均成绩的小程序。当输入学生信息和各门功课成绩并提交后，能够显示学生的信息及平均成绩。通过本案例，掌握button组件的使用方法以及 三种逻辑运算符的含义及使用方法。

●2.11案例211-循环求和计算器

设计一个小程序，利用循环语句求取2个数之间所有整数的和。通过本案例，掌握全局变量的定义和使用方法、JavaScript循环语句的执行过程、JavaScript中全局对象函数的使用方法。

●2.12案例212-随机数求和

设计一个小程序，运行后产生一列100以内的随机数（保留小数点后2位），并显示这些随机数的和；当点击按钮时，产生一列新的随机数，并显示这些随机数的和。通过本案例，掌握JavaScript中Number对象函数的使用方法和Array对象函数的使用方法。

●2.13案例213-计时器

设计一个实现倒计时功能的小程序，小程序运行后，首先显示空白界面，过2秒后才显示计时界面，点击“开始计时”按钮后开始倒计时，点击“停止计时”按钮后停止计时。通过本案例，掌握函数number setTimeout(function callback, number delay, any rest)的使用方法、 函数clearTimeout(number timeoutID)的使用方法、函数number setInterval(function callback, number delay, any rest)的使用方法、函数clearInterval(number intervalID)的使用方法。

●2.14案例214-自动随机变化的三色旗

设计一个小程序，开始时界面上显示一个三色旗和一个按钮，当点击按钮时，三色旗的颜色会发生随机变化，即使不点击按钮，三色旗的颜色也会每隔一定时间自动发生变化。通过本案例，掌握取地板函数：Math.floor()的含义及使用方法、 随机数函数Math.random()的含义及使用方法和 逻辑层随机生成颜色的方法。

第三章小程序框架

本章设计了10个案例，演示了小程序的基本架构、执行顺序、数据及事件绑定、模块化、条件渲染、列表渲染、模板以及引用文件等基本方法和技巧。

●3.1案例301-小程序的基本架构

创建一个包含：首页、教学、科研、资讯和关于我们5个标签的小程序，每个标签都有对应的页面、图标和标签文字，点击某个标签的图标或文字都将切换到对应的页面，同时该标签的图标和文字颜色会发生相应的变化，页面的标题也发生相应的变化，而其他标签则变为非选中状态。通过本案例，掌握微信小程序整体配置和页面配置方法。

●3.2案例302-小程序的执行顺序

测试小程序各个页面和函数的执行顺序。通过本案例，掌握小程序调试窗口内容显示方法、 注册小程序函数App(Object object)的使用方法、 注册页面函数Page(Object object) 的使用方法、 小程序的执行顺序。

●3.3案例303-数据及事件绑定

编写一个小程序，实现数据和事件的绑定。数据绑定包括：算术运算绑定、对象绑定和数组绑定，并通过点击按钮事件修改绑定的数据。通过本案例，掌握算术运算、对象和数组绑定的实现方法、事件绑定的实现方法。

●3.4案例304-变量和函数的作用域及模块化

设计一个小程序，在index.js文件中调用app.js文件、index.js文件和util.js文件中定义的变量和函数，从而实现对全局变量和函数、本文件定义的变量和函数以及其他模块中定义的变量和函数的引用。通过本案例，掌握全局变量和函数的引用方法、其他模块中定义的变量和函数的引用方法、本模块中定义的变量和函数的引用方法。

●3.5案例305-条件渲染

编写一个利用wx:if条件渲染实现颜色显示的小程序。将wx:if放在view中实现如下功能：当逻辑层js文件传递给视图层wxml文件的颜色color的值为red、green、blue或其他颜色时，窗口将显示颜色的名称，并在名称下方显示这种颜色的颜色条；将wx:if放在block中实现如下功能：当给定的一个数值大于10时，将在窗口下方显示红、绿、蓝三种颜色条，否则将不显示。通过本案例，掌握使用 if="{{condition}}" 来判断是否需要渲染代码块的方法、使用 标签将多个组件包装起来，并在上边使用wx:if 控制属性的实现方法。

●3.6案例306-成绩等级计算器

编写一个小程序，输入成绩后显示成绩等级，如果输入成绩大于100或者小于0，则显示成绩输入有误的提示。通过本案例，掌握多级条件渲染wx:if的使用方法。

●3.7案例307-列表渲染

编写一个小程序，利用wx:for实现对绑定数组、直接数组、对象以及字符串的列表渲染，利用wx:for-index和wx:for-item实现对index和item的重命名，在block标签中使用wx:for实现对多节点结构块的渲染。通过本案例，掌握利用wx:for对数组、对象和字符串进行列表渲染的方法、利用wx:for-index和wx:for-item修改数组默认下标index和默认数组元素item的方法。

●3.8案例308-九九乘法表

编写一个小程序，综合运用wx:if条件渲染和wx:for列表渲染在视图层打印一个九九乘法表。通过本案例，掌握自定义模拟器尺寸的方法、 双重wx:for列表渲染的应用、inline-block样式的应用方法。

●3.9案例309-模板的定义及引用

编写一个小程序，首先定义1个模板，其中包含1个学生的姓名、年龄和性别等信息，然后使用该模板创建3个学生。通过本案例，掌握模板的使用方法、模板的定义方法、模板的引用方法。

●3.10案例310-利用include引用文件

编写一个小程序，在项目中添加文件header.wxml和footer.wxml，然后在index.wxml文件中利用include引用header.wxml和footer.wxml，作为index页面的头部和尾部内容。通过本案例，掌握实现组件水平均匀分布的方法、 利用include引用文件的方法。

第四章小程序组件

本章设计了10个案例，演示了小程序组件的各种功能和使用方法。使用的组件包括：视图容器、基础内容、表单组件、导航组件、媒体组件、地图、画布等内容。

●4.1案例401-货币兑换

设计一个小程序，实现人民币与其他货币之间的兑换。当输入人民币数值后，能够显示其他货币对应的金额。通过本案例，掌握获取form容器中各组件value值的方法、flex布局中justify-content和align-items属性区别、JavaScript中的全局对象函数parseInt()的功能及使用方法。

●4.2案例402-三角形面积计算器

设计一个根据三角形的三条边求三角形面积的微信小程序。通过本案例，掌握消息提示框函数wx.showToast(Object object)的使用方法、全局函数的定义和使用方法、parseFloat函数的使用方法。

●4.3案例403-设置字体样式和大小

编写一个小程序， 利用radio组件改变字体类型， 利用checkbox组件改变字体加粗、倾斜和下划线等样式。通过本案例，掌握radio组件和checkbox组件的使用方法。

●4.4案例404-滑动条和颜色

编写一个小程序，利用slider滑动条组件控制颜色的变化通过本案例，掌握slider滑动选择器的使用方法、rgba(red,green,blue,alpha)函数的使用方法、利用data-* 属性自定义数据，并获取该数据的方法。

●4.5案例405-轮播图和开关选择器

设计一个小程序，通过switch组件控制swiper组件属性，实现控制轮播图的各种效果。通过本案例，掌握swiper组件和switch组件的使用方法。

●4.6案例406-个人信息填写

设计一个小程序，实现个人信息的录入与显示。个人信息包括姓名、性别、籍贯、出生日期、身高、体重等。输入完个人信息后，点击按钮，能够显示录入的个人信息。通过本案例，掌握自定义构造函数的定义方法、利用自定义构造函数创建对象实例的方法、picker选择器组件的使用方法、利用flex布局中实现水平方向和垂直方向对齐的方法。

●4.7案例407-图片显示模式

设计一个小程序，演示不同模式下图片的显示效果。通过本案例，掌握image图片组件的使用方法、不同mode值图片的显示效果。

●4.8案例408-音频演示

设计一个小程序，演示音频的播放、暂停播放、设置当前播放时间和从头开始播放等效果。通过本案例，掌握利用audio组件创建音频上下文的方法、通过本案例，掌握利用音频上下文实现播放音频、暂停播放、设置播放时间及从头开始播放音频的方法。

●4.9案例409-视频演示

设计一小程序，实现播放视频、选择播放的视频和发送弹幕等功能。通过本案例，掌握video组件的使用方法、发送弹幕API函数VideoContext.sendDanmu(Object data)的使用方法、创建随机颜色方法。

●4.10案例410-考试场次选择

编写一个考生选择考试场次的小程序，考生首先利用邮箱和密码登录，输入自己的姓名和学号后选择考试场次。考生登录时需要进行邮箱和密码认证，如果邮箱填写不正确或者输入的密码和确认密码不一致，将给出错误提示并要求重新填写。通过本案例，掌握利用正则表达式验证邮箱的方法、模态对话框API函数wx.showModal(Object object)的使用方法、页面跳转API函数wx.navigateTo(Object object) 的使用方法。

第五章小程序API

本章设计了20个案例，演示了小程序API函数的各种功能和使用方法。使用的API函数包括：基础中的系统信息和定时器、路由、界面、数据缓存、媒体、位置、画布、文件等内容。

●5.1案例501-变脸游戏

设计一个变脸游戏。小程序运行后出现一张脸谱画面，当点击这张脸谱时，画面随机产生另一张脸谱，当摇晃手机时，显示一个消息框，同时画面也随机产生一张脸谱，从而实现变脸功能。通过本案例，掌握摇晃手机（加速度改变）API函数wx.onAccelerometerChange()的使用方法、对话框API函数wx.showToast()的使用方法。

●5.2案例502-阶乘计算器

设计一个小程序求阶乘的计算器，当在输入框中输入一个数值并摇晃手机后，该数值的阶乘将显示出来，同时显示摇晃手机成功的消息框。通过本案例，掌握阶乘的求解方法。

●5.3案例503-基本绘图

设计一个小程序，实现基本绘图功能。绘制的图形包括：绘制点、线、圆、矩形、文字等；设置的样式包括：线条粗细、线条类型、线条端点样式、线条连接样式、渐变样式、阴影设置、透明度等。通过本案例，掌握画布的使用方法、清除屏幕的方法、图形绘制的基本方法、设置线条和填充颜色的方法、圆及圆弧的绘制方法、线条的绘制方法、虚线样式及线条宽度的设置方法、线条端点样式及连接样式的设置方法、文本的绘制方法、渐变样式的建立与设置方法、阴影样式的设置方法、透明度的设置方法。

●5.4案例504-参数绘图

设计一个小程序，通过输入圆的圆心坐标和半径作为参数来绘制一个圆。通过本案例，掌握根据输入的图形参数实现图形绘制的方法、绘制新图时保留以前图形的方法。

●5.5案例505-改变图形

设计一个小程序，实现对图形的绘制、放大、移动和旋转功能。通过本案例，掌握图形缩放函数CanvasContext.scale(number scaleWidth, number scaleHeight)、图形平移函数CanvasContext.translate(number x, number y)和图形旋转函数CanvasContext.rotate(number rotate)的使用方法。

●5.6案例506-绘制正弦曲线

编写一个小程序，实现正弦曲线的绘制。通过本案例，掌握绘制正弦曲线的方法、控制绘图比例和绘图位置的方法。

●5.7案例507-自由绘图

设计一个小程序实现自由绘图，即能够在画布上进行自由绘制，绘制图形时可以选择笔的粗细和颜色，可以擦除部分图形和清空屏幕。通过本案例，掌握自由绘图的原理及实现方法（重点是起始点坐标与当前点坐标设置方法）、在逻辑层获取视图层传递的组件参数的方法（视图层组件利用data-param属性设置参数值，逻辑层利用e.currentTarget.dataset.param获取参数值）、手指在 canvas 组件中移动且有绑定手势事件时，禁止屏幕滚动以及下拉刷新的方法。

●5.8案例508-动画

设计一个小程序，实现动画效果，包括旋转、缩放、移动、倾斜以及动画展示顺序等。通过本案例，掌握创建Animation动画对象函数Animation wx.createAnimation(Object object)的使用方法、利用Animation动画对象函数实现各种动画效果的方法。

●5.9案例509-照相和摄像

设计一个能够进行拍照和摄像小程序，并显示拍摄的照片和视频。通过本案例，掌握API方法wx.chooseImage(Object object)和API方法wx.chooseVideo(Object object)的使用方法。

●5.10案例510-位置和地图

设计一个小程序，利用map组件和相应的API函数实现选择位置和打开位置的功能。通过本案例，掌握map组件的使用方法、函数wx.getLocation(Object object)、wx.chooseLocation(Object object) 和wx.openLocation(Object object) 的使用方法。

●5.11案例511-文件操作

设计一个小程序，实现对文件的操作，包括打开文件、保存文件、删除文件以及显示文件信息等内容。通过本案例，掌握API函数wx.saveFile(Object object)、wx.getSavedFileList(Object object)、wx.getSavedFileInfo(Object object)和wx.removeSavedFile(Object object)的使用方法。

●5.12案例512-数据缓存

设计一个小程序，利用数据缓存API接口函数实现对数据缓存的操作，包括同步和异步缓存数据、获取缓存数据、获取缓存数据信息、删除缓存数据等操作。通过本案例，掌握利用数据缓存API函数操作数据缓存的方法、构造函数的定义方法、利用构造函数创建对象的方法。

●5.13案例513-网络状态

设计一个小程序，显示当前联网状态，当联网状态为Wi-Fi状态时，显示Wi-Fi的SSID、BSSID、安全性以及信号强度等信息。通过本案例，掌握API函数wx.getNetworkType(Object object)、wx.onNetworkStatusChange(function callback)和wx.getConnectedWifi(Object object) 的使用方法。

●5.14案例514-传感器

设计一个小程序，实现启动、停止和监听罗盘传感器、加速度传感器和陀螺仪传感器的功能。监听数据能够实时显示。通过本案例，掌握罗盘传感器API函数、加速度传感器API函数和陀螺仪传感器API函数的使用方法。

●5.15案例515-扫码与打电话

设计一个小程序，实现扫码、打电话和添加联系人信息的功能。通过本案例，掌握扫码API函数wx.scanCode(Object object)、wx.makePhoneCall(Object object)和添加联系人API函数wx.addPhoneContact(Object object)的使用方法。

●5.16案例516-屏幕亮度、剪贴板和手机振动

设计一个小程序，使用屏幕亮度、剪贴板和手机振动的API函数，实现设备屏幕亮度的设置、复制和查询、屏幕亮度的保持设置等，当选中“保持亮度”switch组件时，手机同时发生振动。通过本案例，掌握利用屏幕亮度API函数设置、获得和保持设备屏幕亮度的方法、利用剪贴板API函数设置和获取系统剪贴板内容的方法、利用手机振动API函数使手机发生较短和较长时间振动的方法。

●5.17案例517-设备系统信息

编写一个小程序，实现同步和异步获取设备系统信息。通过本案例，掌握异步获取设备系统信息的API函数wx.getSystemInfo()和同步获取设备系统信息的API函数wx.getSystemInfoSync()的使用方法。

●5.18案例518-导航栏

设计一个小程序，利用API函数设置导航栏的标题和颜色，显示和隐藏导航栏加载动画。通过本案例，掌握API函数wx.setNavigationBarTitle(Object object)、wx.setNavigationBarColor(Object object)、wx.showNavigationBarLoading(Object object)和wx.hideNavigationBarLoading(Object object)的使用方法。

●5.19案例519-标签栏

设计一个利用API函数操作标签栏的小程序，包括：显示与隐藏标签栏、添加与删除标记、显示与隐藏红点、设置标签栏整体样式和单项样式、以及还原标签样式等。通过本案例，掌握与tabBar有关的8个API函数的使用方法。

●5.20案例520-操作菜单

设计一个小程序，当点击按钮时显示操作菜单，当点击操作菜单的某一个菜单项时，显示该菜单项的名称和序号。通过本案例，掌握利用API函数wx.showActionSheet(Object object)对操作菜单的操作。

第六章云开发

云开发为开发者提供了完整的原生云端支持和微信服务支持，弱化了后端和运维概念，无需搭建服务器，使用平台提供的API即可进行核心业务开发，实现快速上线和迭代。云开发支持的能力包括云函数、数据库、存储和云调用。
本章设计了4个案例，演示了小程序云开发的方法和技巧，包括：获取OpenID、文件上传下载、数据库操作、云函数应用的方法和技巧。

●6.1案例601-获取OpenID

设计一个小程序，显示当前用户的头像和昵称，并获取用户的OpenID。当点击用户的头像时，则会在页面下方显示出用户的性别、城市等详细信息。通过本案例，掌握微信小程序的云开发能力，以及通过调用云函数获取了当前用户openid的方法。

●6.2案例602-文件上传下载

设计一个小程序，利用云开发支持的存储功能，将文件上传至云存储区，或从云存储区下载文件，这里以图片文件为例。通过本案例，掌握利用API函数wx.cloud.uploadFile(Object object)和wx.cloud.downloadFile(Object object)实现了云空间文件的上传和下载操作方法。

●6.3案例603-数据库操作

设计一个小程序，利用云开发支持的数据库功能，演示记录的增、删、改、查操作。此处使用云开发数据库中已建立的“work_done”集合，包含日期字符串date、时间字符串time和工作内容字符串content等字段，也包含系统自动添加的记录编号_id和用户身份_openid字段。通过本案例，掌握云开发数据库的增、删、改、查的操作方法。

●6.4案例604-云函数应用

设计一个小程序，展示云函数的应用，通过调用自己设计的云函数查询云数据库，对用户输入的信息（用户名和密码）进行验证。通过本案例，掌握云开发中云函数的使用方法。