应对期末考试，对本学期《微信小程序开发实践》课程学习的内容进行复习。

# 题型：

1. 单项选择题 8 题 * 2=16 分

2. 填空题 7 题 * 2=14 分

3. 判断题 8 题 * 2=16 分

4. 程序题 6 题 * 4=24 分

5. 简答题 2 题 * 15=30 分

# 第一章 微信小程序入门

# 1. 微信小程序的概念、特点、宿主环境

概念：微信小程序是一种全新的连接用户与服务的应用，它可以在微信内被便捷地获取和传播，同时具有良好的用户体验。微信小程序是运行在微信中的应用，是一种不需要下载即可使用的应用，用户通过微信扫一扫或者搜一搜即可打开，且每个微信小程序的体积非常小。

特点：无须安装、触手可及、用完即走、无须卸载、名称唯一、入口丰富、传播能力强

• 无须安装，直接使用，不占用存储空间
• 用完即走，无须卸载
• 名称唯一：不能使用相同名称
• 入口丰富
• 传播能力强：微信搜索、好友分享、小程序识别码

宿主环境

宿主环境概念：宿主环境（Host Environment）是指程序运行所依赖的环境。

微信小程序可以跨平台，这是因为微信小程序并不是一个直接安装在 Android 系统或 iOS 系统中的应用，而是运行在微信客户端上的应用。微信客户端给微信小程序提供的环境就是微信小程序的宿主环境。

# 2. 如何获取微信小程序 AppID，AppID 的唯一性

1. 登录微信小程序管理后台
2. 在左侧边栏中选择 “开发管理”
3. 选择 “开发设置”
4. 查看并复制 AppID

在微信小程序中，AppID 又称为小程序 ID，是每个小程序的唯一标识，每个小程序账号只有一个 AppID，因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。

# 3. 熟悉微信小程序的项目结构，主要配置文件的作用

项目结构：

pages

.eslintrc.js

app.js

{}app.json

app.wxss

{}project.config.json

{} project.private.config.json

{}sitemap.json

• - pages：用于存放微信小程序的所有页面。

• - eslintrc.js：用于格式化代码，使代码风格保持一致。

• - app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑。

• - app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等。

• - app.wxss：微信小程序的全局样式文件，文件可以为空。

• - project.config.json：在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要栽入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。

• - project.private.config.json：用于保存微信开发者工具的私人配置，配置的优先级高于 project.config.json。

• - sitemap.json：用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件， 则默认为所有页面都允许被索引。

# 4. 微信小程序的页面组成，能够解释 WMXL,WXSS,JS 和 JSON 文件的作用

一个微信小程序是由一个或多个页面组成的，这些页面被存放在 pages 目录中。

下面以 pages 目录下的 index 页面为例展示其组成部分，index 页面的组成部分

pages

 └── index

      ├── index.js

      ├── index.json

      ├── index.wxml

      └── index.wxss

• - JS：类似网页制作中的 JavaScript 语言，用于实现页面逻辑和交互，文件扩展名为.js。需要注意的是，微信小程序中的 JS 不含 DOM 和 BOM，但它提供了丰富的 API，可以实现许多特殊的功能，例如微信登录、音频播放、文件上传等。

• - JSON（JavaScript Object Notation，JavaScript 对象符号）：用于利用 JSON 语法对页面进行配置，文件扩展名为.json。

• - WXML（WeiXin Markup Language，微信标记语言）：类似于网页制作中的 HTML 语言，用于构建页面结构，文件扩展名为.wxml。

• - WXSS（WeiXin Style Sheets，微信样式表）：类似于网页制作中的 CSS 语言，用于设置页面样式，文件扩展名为.wxss。

# 5. 了解微信小程序的通信模型，教材 13 页图 1-23

通信模型分为两个部分

1. 渲染层与逻辑层之间的通信，即将逻辑层的数据渲染到页面中
2. 逻辑层和第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据

Native 表示微信客户端的底层，渲染层与逻辑层之间的通信和逻辑层与第三方服务器之间的通信都由微信客户端的底层进行转发。

# 6. 熟悉微信开发者工具的主界面，熟悉常用的快捷键按钮

快捷键 —— 编辑相关的快捷键

快捷键 —— 工具相关的快捷键

快捷键 —— 界面相关的快捷键

# 7. 熟悉微信小程序的上线发布流程

一个微信小程序从开发完到发布上线，一般分为以下 3 个步骤：

1. 上传代码

   打开微信小程序，在微信开发者工具的工具栏中单击 “上传” 按钮，页面中弹出提示框，根据提示填写相应的信息，然后单击 “上传” 按钮，即可上传代码。

   登录微信小程序管理后台，在左侧边栏中单击 “版本管理”，即可进入版本管理页面，查看开发版本，即可查看刚才提交上传的版本。

2. 提交审核

   单击 “提交审核” 按钮，根据页面提示信息进行操作，即可提交已上传的版本并进行审核。

   提交审核后在审核版本中会出现正在审核的版本，审核需要一定时间，PPT 中不再演示。

3. 发布

   审核通过后审核版本中将显示 “发布” 按钮，单击该按钮，即可完成微信小程序的发布。

# 8. 习题

主要考察为选择、判断、填空

一、 填空题

1. 微信小程序是运行在______之上的应用。
2. 微信小程序开发完成后需要通过 “上传” 按钮将代码上传到______。
3. 微信小程序项目中的______文件是全局配置文件。
4. 微信开发者工具中用于保存文件的快捷键是______。
5. 在微信小程序中，每个页面由 4 个文件组成，分别是______文件、______文件、______文件和 JS 文件

二、 判断题

1. 在微信小程序中，AppID 是每个小程序的唯一标识，每个小程序账号只有一个 AppID。（ ）
2. 微信小程序项目中 app.js 文件是全局样式文件。（ ）
3. 通常称微信客户端为微信小程序提供的环境为微信小程序的宿主环境。（ ）
4. 微信小程序具有无须安装、触手可及、用完即走、无须卸载等特点。（ ）
5. 项目成员表示参与微信小程序开发、运行的成员。（ ）

三、 选择题

1. 下列选项中，关于微信小程序说法错误的是（ ）。

   A. 微信小程序是运行在微信之中应用

   B. 微信小程序的体积非常小

   C. 微信小程序不可以跨平台

   D. 通过 “扫一扫” 或 “搜一搜” 即可打开对应的微信小程序

2. 下列选项中，不属于微信小程序特点的是（ ）。

   A. 无须安装 B. 无须卸载

   C. 体积大 D. 入口丰富

3. 下列选项中，用于在微信开发者工具中输出调试信息的面板是（ ）。

   A.Wxml B.Console

   C.Sources D.Network

4. 下列选项中，关于微信小程序项目目录结构说法错误的是（ ）。

   A.pages 目录用于存放所有微信小程序的页面

   B.app.wxss 文件定义了微信小程序项目的全局样式

   C.sitemap.json 文件是微信小程序项目的全局配置文件

   D.app.js 文件是微信小程序项目的入口文件

5. 下列选项中，关于微信开发者工具说法错误的是（ ）。

   A. 工具栏 “预览” 按钮用于在微信中进行预览

   B. 菜单栏中 “文件” 项的主要作用是新建文件、保存文件或关闭文件等

   C. 模拟器可以模拟小程序在微信客户端的运行效果

   D. 编辑器中只能打开一个文件

四、 简答题

1. 请简述微信小程序的特点。
2. 请简述微信小程序项目的创建过程。

# 第二章 微信小程序的页面制作

# 1. 了解 WXML,WXSS 的概念及主要特点

WXML 概念：在制作微信小程序页面时，页面的结构可以用 WXML 来实现。WXML 是微信团队为微信小程序开发而设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。

WXML 与 HTML 的区别:

1. HTML 和 WXML 使用的标签不同。

   例如，HTML 经常使用 <div> 标签搭建页面结构，而 WXML 则使用 < view > 标签搭建页面结构；HTML 经常使用 < span > 标签定义行内文本 ，而 WXML 则使用 < text > 标签定义行内文本 。

2. WXML 提供了和 Vue.js 中模板语法类似的模板语法

   例如数据绑定、列表渲染、条件渲染等，而 HTML 中没有。

3. HTML 页面可以在浏览器中预览，而 WXML 页面仅能在微信客户端和微信开发者工具中预览。

4. WXML 中的单标签必须在结尾 “>” 前面加上 “/”，否则微信开发者工具会报语法错误，而 HTML 中允许省略单标签 “>” 前面的 “/”。

5. WXML 中所使用的标签是微信小程序定义的标签，应避免使用 HTML 标签，这样才能保证页面被正确转译。

WXSS 概念：在微信小程序的页面制作中，使用 WXML 搭建页面结构以后，也需要设置样式来美化页面。微信小程序通过 WXSS 可以美化页面样式。

WXSS 与 CSS 的区别：

1. 不同的手机屏幕分辨率不同，如果用 CSS 中的 px 单位，会遇到屏幕适配的问题，需要手动进行像素单位换算。而微信小程序提供了一个新的单位 rpx，使用 rpx 单位可以很轻松地适配各种手机屏幕。
2. 在微信小程序中，项目根目录中的 app.wxss 文件作为全局样式，会作用于当前微信小程序的所有页面，而局部页面的 WXSS 样式仅对当前页面生效，CSS 则没有这样的功能。
3. 在 WXSS 中设置背景图片的时候，可以使用网络图片或者以 Base64 格式编码的图片，不能使用本地图片，例如，“background-image:url ('/images/1.png'); ” 是无效的，而 CSS 可以使用本地图片来设置背景图片。

# 2. 组件的概念及常用组件

组件的概念：微信小程序页面和普通网页都是通过标签来定义页面结构的，但是在微信小程序开发中，更习惯将这些标签称为组件，这些组件自带微信风格的 UI 样式和特定功能效果。

view 组件

view 组件表示视图容器，常用于实现页面的布局效果。

<!-- view 组件通过 & lt;view > 标签定义 -->

<view> view组件 </view>

view 组件提供了一些属性，用于实现特殊的效果

image 组件

微信小程序提供了用于显示图片的 image 组件，支持对图片进行剪裁和缩放。image 组件的默认宽度为 300px，默认高度为 240px。

image 组件通过 <image> 标签定义，支持单标签和双标签两种写法

<!-- 单标签写法的示例代码 -->

<image sr="图片资源地址" />

<!-- 单双标签写法的示例代码 -->

<image sr="图片资源地址"></image>

image 组件的常用属性：

注意：图片资源地址 src 可以是本地路径或 URL 地址。如果使用本地路径，可以在项目中创建一个目录，例如 images 目录，并在该目录中放入图片，例如 test.jpg，然后通过本地路径 /images/test.jpg 即可引用图片。

image 组件的 mode 属性用于指定图片的裁剪模式或缩放模式

• scaleToFill: 不保持宽高比缩放图片，使图片的宽高完全拉伸至填满 image 元素。此合法值为 mode 属性的默认值
• aspectFit: 保持宽高比缩放图片，使图片的长沙能完全显示出来，即可以完整地将图片显示出来
• aspectFill: 保持宽高比缩放图片，只保证图片的短边能完全显示出来，即图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
• widthFix: 宽度不变，高度自动变化，保持原图宽高比不变
• heightFix: 高度不变，宽度自动变化，保持原图宽高比不变
• top\bottom\center\left\right\top left\top right\bottom left\bottom right: 不缩放图片，只显示对应区域

text 组件

在微信小程序中，则可以通过 text 组件定义行内文本。需要注意的是，text 组件内部只能嵌套 text 组件。

text 常用属性

user-select 属性

video 组件

微信小程序提供了 video 组件用来播放视频，video 组件的默认宽度为 300px，高度为 225px，可通过 WXSS 代码设置宽高。

video 常见属性

# 3. 页面路径的配置方法，能够运用该方法对页面进行管理

开发一个功能完整的微信小程序时，一般需要制作多个页面。

在微信小程序中可以通过 app.json 全局配置文件中的 pages 配置项来配置微信小程序的页面路径。

pages 配置项是一个数组，该数组用于指定微信小程序由哪些页面组成，数组中的每一个元素都对应一个页面的路径信息。

"pages": [

  "pages/index/index",

  "pages/logs/logs"

],

上述代码中共配置了两个页面，分别是 pages/index/index 页面和 pages/logs/logs 页面。

默认情况下，pages 数组中的第一项为微信小程序的初始页面，即 pages/index/index 页面。如果想将其他页面设置为初始页面，读者可以手动调整数组中元素的顺序，将需要设为初始页面的页面路径设为第一项即可。

pages/index/index 中的 pages 表示存放页面的目录，index/index 中第一个 index 表示 index 目录，第二个 index 表示文件名。 同理，pages/logs/logs 中的 pages 表示存放页面的目录，logs/logs 中第一 logs 表示 logs 目录，第二个 logs 表示文件名。

注意：文件名不需要写后缀名，以 pages/index/index 页面为例，配置成功后，微信开发者工具会自动生成 index.wxml 文件、index.wxss 文件、index.js 文件和 index.json 文件

# *4. 掌握 swiper 和 swiper-item 组件的使用方法，能灵活运用 swiper 和 swiper 组件完成轮播图的制作

重点内容！！！

概念：swiper 组件表示滑块视图容器，用于创建一块可以滑动的区域。

swiper 组件内部需要嵌套 swiper-item 组件，swiper-item 组件表示滑块视图内容。

<swiper>

  <swiper-item>1</swiper-item>

  <swiper-item>2</swiper-item>

  <swiper-item>3</swiper-item>

</swiper>

swiper 组件为外层容器，内层有 3 个 swiper-item 组件，表示当前滑块视图内容一共有 3 项。

滑块视图内容在初始状态下只显示第 1 项，向左滑动显示第 2 项，再向右滑动可以返回第 1 项。

swiper 组件的常用属性:

# *5. 掌握导航栏的配置方法

通过页面配置文件或全局配置文件对导航栏的样式进行配置

在页面配置文件中对导航栏进行配置

以 pages/index/index.json 页面配置文件为例，通过 navigationBarTitleText 配置项设置导航栏标题为 “微信小程序”。

{

  "navigationBarTitleText": "微信小程序"

}

在全局配置文件中对导航栏进行配置

在全局配置文件 app.json 中，通过 window 配置项可以对全局默认窗口进行配置，配置后会对所有页面都会生效，且优先级低于页面级配置。例如，将导航栏的相关配置项写在 app.json 文件的 window 配置项中作为全局配置使用。

"navigationBarTitleText":  "微信小程序"

# 6. 掌握标签栏的配置方法，能够完成页面标签栏的配置

通过标签栏可以很方便地在多个页面之间进行切换。

在微信小程序的全局配置文件 app.json 中添加 tabBar 配置项即可实现标签栏配置。

tabBar 常用属性：

标签栏数量：微信小程序中的标签栏分为顶部标签栏和底部标签栏，标签数量一般在 2~5 个之间。

// 演示 tabBar 配置项的属性使用

"tabBar": {

  "color": "#ccc",

  "selectedColor": "#ff4c91",

  "borderStyle": "black",

  "backgroundColor": "#fff",

  "list": [

  ]

},

//list 数组中的每个元素都是一个代表标签按钮的对象，通过配置该对象的属性可以对标签栏中的每个标签按钮进行配置。

//list 数组中最少需要配置 2 个标签按钮，最多只能配置 5 个标签按钮。

标签按钮的相关属性:

//tabBar 配置项的属性使用

"list": [{

  "pagePath": "pages/index/index",

  "iconPath": "images/home.png",

  "selectedIconPath": "images/home-active.png",

  "text": "首页"

}, {

  "pagePath": "pages/list/list",

  "iconPath": "images/contact.png",

  "selectedIconPath": "images/contact-active.png",

  "text": "联系我们"

}]

// 需要注意的是，pages/index/index 和 pages/list/list 这两个页面都必须在 pages 数组中配置并提前创建好对应的文件。

标签栏的效果如下：

# 7. 掌握表单组件的使用方法，能够灵活运用常用的表单组件完成页面的制作

微信小程序在 HTML 基础上做了封装，并且增加了一些组件。

表单组件通常用于用户信息的填写，以便于把用户填写的信息提交给服务器。

form 组件

form 组件表示表单容器，没有任何样式，需要配合其他表单组件一起使用，用于提交用户输入的信息和选择的选项。

form 组件内部可以包含若干个供用户输入或选择的表单组件，允许提交的表单组件为 switch、input、 checkbox、slider、radio 和 picker 组件。

表单中携带数据的组件（如输入框）必须带有 name 属性值，否则无法识别提交的内容。

button 组件

button 组件表示按钮，功能比 HTML 中的 button 按钮丰富。

button 组件的常用属性:

input 组件

input 组件与 HTML 中的 <input> 标签作用类似，都用于接收用户的输入。在微信小程序中，input 组件增加了很多属性，使 input 组件使用起来更加简单、方便。

input 组件的 type 属性:

checkbox 和 checkbox-group 组件

checkbox 组件表示多选项目，在进行多项选择时会用到。

checkbox 组件一般与 checkbox-group 组件搭配使用，checkbox-group 组件表示多项选择器，内部由多个 checkbox 组件组成。

建议将不同组的 checkbox 组件嵌套在不同的 checkbox-group 组件中，从而方便管理和区分。

<!-- checkbox 和 checkbox-group 组件的使用 -->

<checkbox-group>

  <checkbox>蛋糕</checkbox>

  <checkbox>甜甜圈</checkbox>

  <checkbox>巧克力</checkbox>

</checkbox-group>

radio 和 radio-group 组件

radio 组件为单选项目，是表单中常用的组件，用于在从多个选项中选出一个，选项之间是互斥关系。

radio 组件一般与 radio-group 组件搭配使用，radio-group 组件表示单项选择器，内部由多个 radio 组件组成。

建议将不同组的 radio 组件分别嵌套在不同的 radio-group 组件中，从而方便管理和区分。

<!-- radio 和 radio-group 组件 -->

<!-- 通过 radio 和 radio-group 组件实现性别的单项选择 -->

<radio-group>

  <radio>男</radio>

  <radio>女</radio>

</radio-group>

# 8. 习题

主要考察为选择、判断、填空

一、 填空题

1. image 组件的 ____属性用于设置图片的展示模式。
2. swiper 组件内部只可以放置____组件。
3. 在 Flex 布局中，____属性能够设置项目在主轴方向的排列方式。
4. text 组件的 ____属性用于实现长按选中文本内容的效果。
5. 在实现底部标签栏时，tabBar 配置项应在 ____文件中设置。

二、 判断题

1. 给父元素设置 display:flex 后，可以使用 flex 的相关属性，例如通过 flex-direction 属性设置主轴方向。（ ）
2. 微信小程序中样式文件为 WXSS 文件，只支持 rpx 一种尺寸单位。（ ）
3. swiper 组件可以实现页面的轮播图效果。（ ）
4. video 组件专门用于播放音频。（ ）

三、 选择题

1. 下列选项中，用于配置微信小程序所有的页面地址的文件是（ ）

   A. app.js B. app.json C. app.wxss D. project.config.json

2. 下列选项中，不属于表单组件的是（ ）

   A. input 组件 B. checkbox 组件 C. form 组件 D. swiper 组件

3. 下列选项中，不属于 Flex 布局的是（ ）

   A. display:flex;

   B. flex:1;

   C. float:left;

   D. flex-flow:column nowrap;

4. 下列选项中，app.json 文件中的 tabBar 配置项最多允许的页数为（ ）。

   A. 3 B. 4 C. 5 D. 6

四、 简答题

1. 简述 WXML 和 HTML 的区别。
2. 简述 WXSS 和 CSS 的区别。
3. 简述 Flex 布局的概念。

# 第三章 微信小程序的页面交互

# 1. 熟悉 Page () 函数，能够归纳 Page () 函数及其各个参数的作用

Page () 函数概念：在微信小程序中，页面交互的代码写在页面的 JS 文件中，每个页面都需要通过 Page () 函数进行注册。

需要注意的是，Page ( ) 函数只能写在微信小程序每个页面对应的 JS 文件中，并且每个页面只能注册一个。

Page () 函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。

// 调用 Page () 函数的示例代码

Page({

  // 页面初始数据

  data: {},

  // 页面生命周期回调函数，以 onLoad () 为例

  onLoad: function () {  console.log('onLoad()函数执行了') },

  // 页面事件处理函数，以 onPullDownRefresh () 为例

  onPullDownRefresh: function () {

      console.log('onPullDownRefresh()函数执行了') 

  }

})

页面初始数据

页面初始数据是指页面第一次渲染时所用到的数据。

// 定义页面初始数据，示例代码如下：

data: {

  msg1: 'Hello',

  msg2: 'World'

},

页面生命周期回调函数

页面的生命周期是指每个页面 “加载→渲染→销毁” 的过程，每个页面都有生命周期

如果想要在某个特定的时机进行特定的处理，则可以通过页面生命周期回调函数来完成。

页面生命周期回调函数用于实现在特定的时间点执行特定的操作，随着页面生命周期的变化，页面生命周期回调函数会自动执行。

页面生命周期回调函数：

页面事件处理函数

在微信小程序中，用户可能会在页面上进行一些操作，例如上拉、下拉、滚动页面等，如何在发生这些操作的时候进行处理呢？可以通过页面事件处理函数来完成。

页面事件处理函数用于监听用户的行为。

常见的页面事件处理函数：

# 2. 掌握数据绑定，事件绑定，事件对象，this 关键字的使用以及 setData 方法的使用

数据绑定

概念：微信小程序提供了 Mustache 语法（又称为双大括号语法）用于实现数据绑定，可将 data 中的数据通过 Mustache 语法输出到页面上。

通过数据绑定将数据显示在页面中案例：

1. 打开 pages/index/index.js 文件，在 data 中定义一个 message 数据。

   	Page({
   	data: {
   	message: 'Hello World'
   	}
   	})

2. 在 pages/index/index.wxml 文件中编写页面结构。

   	<view></view>
   	<!-- 通过 Mustache {} 语法将 data 中的数据显示在页面中 -->

页面上显示了 message 变量对应的值，也就是把 “Hello World” 渲染到页面代码中所在的位置，实现了从逻辑层到视图层的数据显示。

事件绑定

概念：在微信小程序中，事件是视图层到逻辑层的通信方式，通过给组件绑定事件，可以监听用户的操作行为，然后在对应的事件处理函数中进行相应的业务处理。例如，为页面中的按钮绑定事件，当用户点击按钮时，就产生了事件。

常见的事件：

事件分类：

• 冒泡事件：指当一个组件上的事件被触发后，该事件会向父组件传递。
• 非冒泡事件：指当一个组件上的事件被触发后，该事件不会向父组件传递。

注意：点击事件、长按事件、触摸事件都属于冒泡事件，其他事件属于非冒泡事件。

为组件绑定事件

• 若要为组件绑定事件，可以通过为组件添加 “bind + 事件名称” 属性或 “catch + 事件名称” 属性来完成，属性的值为事件处理函数，当组件的事件被触发时，会主动执行事件处理函数。

bind 和 catch 的区别在于，bind 不会阻止冒泡事件向上冒泡，而 catch 可以阻止冒泡事件向上冒泡。

为组件绑定事件案例：

1. 在 pages/index/index.wxml 文件中给 button 组件绑定 tap 事件，事件处理函数为 compare () 函数。

   <button bindtap="compare">比较</button>

   bindtap 表示绑定 tap 事件。
   在触屏手机中，tap 事件在用户手指触摸 button 组件离开后触发，而在微信开发者工具中，tap 事件在鼠标单击 button 组件时触发。

2. 在 pages/index/index.js 文件的 Page ({}) 中定义 compare () 函数。

   	compare: function () {
   	console.log('比较按钮被点击了')
   	},

   事件处理函数的简写形式

   由于 compare () 函数是 {} 对象的方法，所以可以将 compare () 函数写成方法的简写形式，即省略 compare 后面的冒号和 function 关键字

   示例代码如下

   	compare () {
   	console.log('比较按钮被点击了')
   	},

事件对象

概念：在开发微信小程序的过程中，有时需要获取事件发生时的一些信息，例如事件类型、事件发生的时间、触发事件的对象等，此时可以通过事件对象来获取。

当事件处理函数被调用时，微信小程序会将事件对象以参数的形式传给事件处理函数。

事件对象的属性：

事件对象的使用

修改 pages/index/index.js 文件中的 compare () 函数，通过参数接收事件对象，并将事件对象输出到控制台。

compare: function (e) {     

 console.log(e)  },  

 // 函数参数 e 表示事件对象

事件对象属性中的 target 和 currentTarget 属性的对比。

• target 表示获取触发事件的组件的一些属性值集合
• currentTarget 表示获取当前组件的一些的属性值集合

事件对象属性中 target 和 currentTarget 的区别案例：

1. 在 pages/index/index.wxml 文件中编写页面结构。

   	<view bindtap="viewtap" id="outer">
   	outer
   	<view id="inner">
   	inner
   	</view>
   	</view>

2. 在 pages/index/index.js 文件中添加 viewtap () 事件处理函数。

   	viewtap: function (e) {
   	console.log(e.target.id + '-' + e.currentTarget.id)
   	},
   	// 使用 e.target.id 或 e.currentTarget.id 都可以获取发生事件的组件的 id，由于 outer 和 inner 的 id 不同，因此可以区分这两个组件。

运行程序测试，当单击 outer 时，控制台中的输出结果为 outer-outer，而单击 inner 时，控制台中的输出结果为 inner-outer。

由此可见，e.target 获取的是子元素的属性值集合，而 e.currentTarget 获取到的是父元素的属性值集合。

this 关键字

在微信小程序开发过程中，有时需要在函数中访问页面中定义的一些数据，或者调用页面中定义的一些函数，此时可以通过 this 关键字来实现。

this 关键字代表当前页面对象。

this 关键字的使用

Page({

  data: { num: 1 },		// 定义 data 数据

  test: function () {		// 定义 test () 函数

    console.log('test()函数执行了')

  }, 

  onLoad: function () {

    console.log(this.data.num)	// 通过 this 关键字访问 data 中的 num 数据

    this.test()			// 通过 this 关键字调用 test () 函数

  }

})

setData () 方法

概念：在微信小程序开发过程中，虽然通过数据绑定可以将 data 中定义的数据渲染到页面，但是如果数据发生了变化，页面并不会同步更新数据。

为了实现在数据变化时使页面同步更新，微信小程序提供了 setData () 方法，该方法可以立即改变 data 中的数据，并通过异步的方式将数据渲染到页面上。

setData () 方法通过 this 关键字调用，该方法的基本语法格式如下：

this.setData(data[, callback])

setData () 方法的参数

注意：

• 第 1 个参数 data 是 object 类型的数据，以 key: value 的形式将 data 中的 key 对应值设置成 value；
• 第 2 个参数 callback 是回调函数，可以省略。

setData () 方法的使用：

1. 在 pages/index/index.js 文件中编写页面中所需的数据 message 和事件处理函数 changeText ()。

   	Page({
   	data: { message: 'Hello World' },
   	changeText: function () {
   	this.setData({ message: 'hello 微信小程序' })
   	}
   	})

2. 在 pages/index/index.wxml 文件中编写页面结构。

   	<view bindtap="changeText"></view>
   	<!-- 给 view 组件绑定了 tap 事件，事件处理函数为 changeText () -->

# 3. 掌握 data-* 自定义属性，能够完成 data-* 自定义数据的设置与获取

概念：微信小程序可以通过自定义属性来进行传参。

微信小程序中的 data-* 是一个自定义属性，data-* 自定义属性实际上是由 data - 前缀加上一个自定义的属性名组成的，属性名中如果有多个单词，用连字符 “-” 连接。

data-* 自定义属性的属性值表示要传参的数据。

在事件处理函数中通过 target 或 currentTarget 对象的 dataset 属性可以获取数据。

dataset 属性是一个对象，该对象的属性与 data-* 自定义属性相对应。

通过设置 data-* 自定义属性实现参数的传递：

1. 在 pages/index/index.wxml 文件中编写页面结构。

   	<view bindtap="demo" data-name="xiaochengxu" data-age="6">
   	获取姓名和年龄
   	</view>
   	<view>姓名：</view>
   	<view>年龄：</view>

2. 在 pages/index/index.js 文件中编写页面逻辑。

   	Page({
   	data: { name: '初始名字', age: 0 },
   	demo: function (e) {
   	this.setData({
   	name: e.target.dataset.name,
   	age: e.target.dataset.age
   	})
   	}
   	})

# 4. 掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件

概念：在微信小程序开发过程中，如果需要根据不同的判断结果显示不同的组件，可以使用条件渲染来实现。

条件渲染通过标签的 wx:if 控制属性来完成。

使用 wx:if=“” 来判断是否需要渲染标签对应的组件，如果变量 val 的值为 true，则渲染组件并输出；变量 val 的值为 false，则不渲染组件

示例代码如下：

<view wx:if="">True</view>

通过变量 condition 的值来控制是否渲染 view 组件

给标签设置了 wx:if 控制属性后，可以为后面的标签设置 wx:elif、wx:else 控制属性。

• wx:elif 控制属性表示当前面标签的 if 条件不满足时，继续判断 elif（else if）的条件；
• wx:else 控制属性表示当前面的 if 条件不满足时，渲染 else 对应的组件。
• wx:else 控制属性也可以直接出现在 wx:if 控制属性的后面

示例代码如下：

<view wx:if="false">0</view>

<view wx:elif="false">1</view>

<view wx:else>2</view>

# 5. 掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中

概念：列表渲染通过 wx:for 控制属性来实现。

微信小程序进行列表渲染时，会根据列表中数据的数量渲染相应数量的内容。

在 wx:for 控制属性所在标签的内部，可以使用 item 变量获取当前项的值，使用 index 变量获取当前项的数组索引或对象属性名。

如果不想使用 item 和 index 这两个变量名，还可以通过 wx:for-item 控制属性更改 item 的变量名；通过 wx:for-index 控制属性更改 index 的变量名。

wx:key 控制属性

• wx:for 控制属性通常搭配 wx:key 控制属性使用。
• wx:key 控制属性用于为每一项设置唯一标识，这样可以在数据改变后页面重新渲染时，使原有组件保持自身的状态，而不是重新创建，这样可以提高列表渲染的效率。

设置 wx:key

1. 如果 item 本身就是一个具有唯一性的字符串或数字，则可以将 wx:key 的值设置为 * this，*this 表示 item 本身。
2. 如果给定的数据是一个由对象作为数组元素构成的数组，那么可以将 wx:key 的值设置为对象中的一个 “值具有唯一性” 的属性的名称。

数组的列表渲染案例：

1. 在 pages/index/index.js 文件的 Page ({}) 中编写页面数据。

   	data: {
   	arr: [ 'a', 'b', 'c']
   	}

2. 在 pages/index/index.wxml 文件中编写页面结构，通过列表渲染的方式将 arr 数组渲染到页面中。

   <view wx:for="{{ arr }}" wx:key="*this">
     {{ index }} {{ item }}
   </view>
   

数组中包含对象情况下的列表渲染案例：

1. 在 pages/index/index.js 文件的 Page ({}) 中编写页面数据。

   	data: {
   	list: [
   	{ message: '梅' , id: 1 }, { message: '兰' , id: 2 },
   	{ message: '竹' , id: 3 }, { message: '菊' , id: 4 }
   	]
   	}
   	//id 是每条数据的唯一标识

2. 在 pages/index/index.wxml 文件中编写页面结构，将 list 数组中的数据在页面中显示出来。

   	<view wx:for="" wx:key="id">
   	-----=======
   	</view>

   数组中包含对象情况下的列表渲染的页面效果如下图所示：

3. 在 pages/index/index.wxml 文件中修改页面结构，实现通过 wx:for-item、wx:for-index 更改 item 和 index 的变量名。

   	<view wx:for="" wx:for-item="item2" wx:for-index="index2" wx:key="id">
   	：
   	</view>
   	<!-- 通过 wx:for-item 更改 item 的变量名为 item2，通过 wx:for-index 更改 index 的变量名为 index2 -->

   更名后列表渲染的页面效果如下图所示：

# 6. 掌握网络请求实现，能够通过网络请求与服务器进行交互

客户端与服务器进行交互时，客户端请求服务器的过程称为网络请求。

例如，获取用户的头像信息，需要客户端向服务器发送请求，服务器查询到数据后把数据传递给客户端。

在微信小程序中实现网络请求时，需要服务器给微信小程序提供服务器接口。

在微信小程序中发起网络请求可以通过调用 wx.request () 方法来实现。

wx.request () 方法的常见选项

注意：method 选项的合法值包括 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE 和 CONNECT，具体使用哪个，以服务器接口的要求为准。

每个 wx:request () 方法都是一个请求任务，可以通过 abort () 方法将其取消。

示例代码如下：

// 发起网络请求

var requestTask = wx.request({

  url: 'URL地址',

  //wx.request () 的常见参数……

})

// 取消请求任务

requestTask.abort()

// 调用 wx.request () 方法发起网络请求

// 调用 abort () 方法取消请求任务

通过 wx.request () 方法发起一个 GET 方式的请求

wx.request({

  url: 'URL地址',   // 表示服务器接口地址

  method: 'GET',     // 表示 HTTP 请求方式为 GET

  data: { name: 'zs' },   // 设置了请求参数 name

  success: res => {

    console.log(res)       // 定义了接口调用成功的回调函数 success 

  }

})

# 7. 掌握上拉触底与下拉刷新的实现.

上拉触底：

概念：在原生应用或者网页的交互中，经常会有上拉加载这个功能。用户在浏览列表页面时，手指在手机屏幕上进行上拉滑动操作，通过上拉加载请求数据，增加列表数据。

微信小程序提供了 onReachBottom () 事件处理函数，即页面上拉触底事件处理函数，用于监听当前页面的上拉触底事件。

onReachBottom () 事件处理函数的示例代码如下：

onReachBottom: function () {

  console.log('触发了上拉触底的事件')

},

在默认情况下，触发上拉触底事件时，滚动条距离页面底部的距离为 50px，即上拉触底距离为 50px。在实际开发中，开发人员可以根据实际需求，在全局或页面的 JSON 配置文件中通过 onReachBottomDistance 属性修改上拉触底的距离。

在页面的 JSON 文件中配置上拉触底的距离为 200px：

{

  "onReachBottomDistance": 200

}

下拉刷新

在原生应用的交互中，经常会有下拉刷新操作，即当用户下拉页面到达顶部时，再进行下拉可以将数据重新加载。

启用下拉刷新的方式:

1. 全局开启下拉刷新
   • 在 app.json 文件的 window 节点中，将 enablePullDownRefresh 设置为 true。
2. 局部开启下拉刷新
   • 在页面的 JSON 文件中，将 enablePullDownRefresh 设置为 true。

开启下拉刷新后，当下拉操作执行时，就会触发 onPullDownRefresh () 事件处理函数。

onPullDownRefresh () 事件处理函数的示例代码如下。

onPullDownRefresh: function () {

  console.log('触发了下拉刷新的事件') 

}

执行下拉刷新操作后，页面顶部会出现加载提示，并且页面需要延迟一段时间才会弹回去。

为了优化用户体验，可以在完成下拉刷新的数据加载后，立即调用 wx.stopPullDownRefresh () 方法停止使用当前页面的下拉刷新加载效果

示例代码如下：

wx.stopPullDownRefresh()

# 8. 习题

主要考察为选择、判断、填空

一、 填空题

1. 在页面结构渲染过程中，通过____控制属性完成页面的条件渲染。
2. 在列表渲染中，通过____控制属性可以循环数组中的每一项。
3. 在列表渲染中，使用____可以指定当前项的变量名。
4. 在 JS 文件中，通过____ 获取 data-* 自定义属性的值。
5. 在微信小程序中，页面加载完成后执行的生命周期函数为 ____。

二、 判断题

1. 在微信小程序中，可以通过 data-* 自定义属性来进行传参。（ ）
2. ‌所有绑定的数据都必须在 data 中进行初始化。（ ）
3. 设置 enablePullDownRefresh 为 false 时，表示禁止下拉。（ ）
4. 通过调用 wx.request () 方法可以发起网络请求。（ ）
5. 通过调用 wx.showLoading () 方法可以弹出加载提示框。（ ）

三、 选择题

1. 下列选项中，关于列表渲染说法正确的是（ ）。

   A.   wx:for-index可以用于重新定义当前项的变量名
   
   B.   在列表渲染中，可以使用item变量获取当前项的值
   
   C.   wx:for可以用于实现页面中的列表渲染
   
   D.   wx:for-item可以用于设置当前索引变量的属性名
   

2. 下列选项中，用于监听页面初次渲染成功的回调函数是（ ）。

   A. onHide   B. onLoad     C. onShow     D. onReady
   

3. 下列选项中，可以在 wx:for 中指定当前项索引的变量名的一项是（ ）。

   A. wx:for-i  B.  wx:for-j    C.  wx:for-item    D.  wx:for-index
   

4. 下列选项中，wx.showToast () 函数的参数属性中包含的回调函数有（ ）。

   A.  title、icon和mask
   
   B.  success、fail和title
   
   C.  duration、mask和success
   
   D.  success、fail和complete
   

5. 下列选项中，将页面的 JS 文件中定义的数据绑定到页面上的语法是（ ）。

   A. {{ }}    B. [ ]     C. { }    D. [[ ]]
   

四、 简答题

1. 简述页面生命周期函数包括哪些。
2. 简述 wx:if 控制属性和 hidden 属性的区别。
3. 简述微信小程序如何实现下拉刷新。
4. 简述微信小程序如何实现上拉触底。

# 第四章 微信小程序常用 API（上）

# 1. 掌握 scroll-view 组件，能够运用 scroll-view 组件完成视图区域的横向与纵向滚动

scroll-view 组件

概念：当一个容器中的内容有很多时，如果容器无法完整显示内容，则可以通过滚动操作来查看完整内容。

在微信小程序中，可以通过 scroll-view 组件来实现滚动效果，它支持横向滚动和纵向滚动，默认是不滚动的，需要通过 scroll-x 和 scroll-y 属性允许横向和纵向滚动。

scroll-view 组件的常用属性：

在允许横向滚动、纵向滚动后，还需要使 scroll-view 组件中内容的宽度和高度大于 scroll-view 组件本身的宽度和高度，这样才能滚动。

在实际开发中，由于 scroll-view 组件的默认宽度为 100%，会占满整个屏幕，所以当内容的宽度超出屏幕宽度显示范围时，即可横向滚动。若要实现纵向滚动，则需要在样式中为 scroll-view 组件设置一个固定高度，否则 scroll-view 组件会被内容撑大，导致无法纵向滚动。

scroll-view 组件的使用案例：

①在 pages/index/index.wxml 文件中编写页面结构。

<scroll-view scroll-x="true" scroll-y="true" style="height: 200px;" bindscroll="scroll">

  <view style="width: 200%; height: 400px; background-image: linear-gradient(to bottom right, red, yellow);"></view>

</scroll-view>

<!-- scroll-view 组件设置了允许横向滚动和纵向滚动。-->

②在 pages/index/index.js 文件中添加 scroll () 事件处理函数输出 e.detail 的值。

scroll: function (e) {

  console.log(e.detail)

}

// 通过 e.detail 获取滚动时的位置信息。

拖曳滚动条使 scroll () 函数执行，然后在控制台中查看输出结果如下图所示：

e.detail 为自定义事件所携带的数据，下面对上图中获取到的信息进行讲解，具体如下。

• scrollLeft：横向滚动条左侧到视图左边的距离。
• scrollTop：纵向滚动条上端到视图顶部的距离。
• scrollHeight：纵向滚动条在 Y 轴上最大滚动距离。
• scrollWidth：横向滚动条在 X 轴上最大的滚动距离。
• deltaX：横向滚动条的滚动状态。
• deltaY：纵向滚动条的滚动状态。

# 2. 掌握 slider 组件，能够运用 slider 组件完成滑动选择器的制作

slider 组件

概念：在微信小程序中，通过 slider 组件可以定义一个滑动选择器。

slider 组件是微信小程序表单组件中的一种，用于滑动选择某一个值。用户可以通过拖曳滑块在一个固定区间内进行选择。

slider 组件的常用属性：

slider 组件的使用

①在 pages/index/index.wxml 文件中编写页面结构。

<slider bindchanging="sliderChanging" show-value="true" />

<!-- 当拖曳 slider 组件的滑块时，会执行 sliderChanging () 事件处理函数 -->

<!-- 通过设置 show-value 属性可将当前值显示出来 -->

②在 pages/index/index.js 文件中编写事件处理函数 sliderChanging ()。

sliderChanging: function (e){

  console.log(e.detail.value)

}

//e.detail.value 表示当前 slider 组件的值

保存代码后，会看到页面中显示了一个滑动选择器。拖曳滑块到 13 的页面效果

如下图所示：

# 3. 掌握背景音频 API, 了解背景音频 API 的常用属性和方法

音频 API

概念：在微信小程序中，使用背景音频 API 可以实现音频的后台播放。

在使用背景音频 API 前，需要在 app.json 文件中配置 requiredBackgroundModes 属性，开启微信小程序后台音频播放功能，示例代码如下。

"requiredBackgroundModes":  ["audio"]  //requiredBackgroundModes 属性值为数组类型，在数组中添加 audio 项表示开启后台音频播放功能。

背景音频 API 的使用方法如下：

第一步：通过 wx.getBackgroundAudioManager () 方法获取到一个 BackgroundAudioManager 实例；

var audioGbam =  wx.getBackgroundAudioManager()  //BackgroundAudioManager 实例

第二步：通过 BackgroundAudioManager 实例的相关属性和方法实现背景音频的播放。

BackgroundAudioManager 实例常用的属性和方法：

背景音频 API 的使用案例：

在 pages/index/index.js 文件中的 onReady () 函数中编写如下代码。

onReady: function () {    

      // 创建 BackgroundAudioManager 实例     

      var audio = wx.getBackgroundAudioManager()     

      // 当开始播放音乐时，输出调试信息     

      audio.onPlay(function () { console.log('开始播放') })   

      // 设置背景音频的标题     

      audio.title = '音乐标题'     

      // 设置背景音频的资源地址     

      audio.src = 'http://127.0.0.1:3000/1.mp3'  

  }

# 4. 掌握录音 API, 了解录音 API 的常用方法

录音 API

概念：录音功能在日常生活中使用很广泛，使用该功能可以记录重要的工作内容、优美的歌声等。那么在微信小程序中如何实现录音功能呢？微信小程序为开发者提供了录音 API。

录音 API 的使用方法如下：

第一步：通过 wx.getRecorderManager () 方法获取到一个 RecorderManager 实例，该实例是一个全局唯一的录音管理器，用于实现录音功能；

var recorderManager =  wx.getRecorderManager()  //RecorderManager 实例

第二步：通过 RecorderManager 实例的方法实现录音功能。

RecorderManager 实例的常用方法如下表所示。

录音 API 的使用案例：

在 pages/index/index.js 文件中的 onReady () 函数中编写如下代码。

// 获取全局唯一的录音管理器 RecorderManager  

var recorderManager =  wx.getRecorderManager()  

// 监听录音开始事件  

recorderManager.onStart(() => {     

    console.log('录音开始');  

})  

// 监听录音停止事件  

recorderManager.onStop(res => {     

    console.log('录音停止')     

    console.log(res.tempFilePath)  

})  // 开始录音  

recorderManager.start()  

// 5 秒后自动停止录音  

setTimeout(() => {     

    recorderManager.stop()  

}, 5000)

# 5. 掌握音频 API, 了解音频 API 的常用属性和方法

音频 API

概念：在微信小程序中，除了背景音频 API 可以实现播放音频的功能外，还可以通过音频 API 来播放音乐。

背景音频 API 与音频 API 的区别在于背景音频 API 支持后台播放，而音频 API 不支持后台播放。

音频 API 的使用方法如下：

第一步：通过 wx.createInnerAudioContext () 方法获取到一个 InnerAudioContext 实例；

var audioCtx =  wx.createInnerAudioContext()  //InnerAudioContext 实例

第二步：通过 InnerAudioContext 实例的属性和方法实现音频播放功能。

InnerAudioContext 实例常用的属性和方法与 BackgroundAudioManager 实例常用的属性和方法相同，但是 InnerAudioContext 实例没有 title 属性。InnerAudioContext 实例特有的属性和方法如下表所示

音频 API 的使用案例：

// 创建 InnerAudioContext 实例  

var audioCtx =  wx.createInnerAudioContext()  

// 设置音频资源地址  

audioCtx.src =  'http://127.0.0.1:3000/1.mp3'  

// 当开始播放音频时，输出调试信息  

audioCtx.onPlay(() => {     

    console.log('开始播放')  

})  // 开始播放  audioCtx.play ()

# 6. 掌握文件上传 API, 能够运用 wx.uploadFile () 方法实现将本地资源上传到服务器中

上传 API

概念：在生活中，经常需要进行文件上传操作，例如更改头像需要将新的头像上传到服务器中。微信小程序提供了文件上传 API，使用文件上传 API 可以在微信小程序中发起一个 POST 请求，将本地资源上传到服务器。通过调用 wx.uploadFile () 方法即可使用文件上传 API。

wx.uploadFile () 方法的常用选项：

文件上传 API 的使用案例：

wx.uploadFile({  

      filePath: '文件路径',   

      name: 'image',   

      url: 'http://127.0.0.1:3000/upload',   

      success: res => {    

          console.log(res)   

      }  

  })

# 7. 掌握文件下载 API, 能够运行 wx.downloadFile () 方法实现资源文件的下载

下载 API

概念：在生活中，经常需要下载一些文件，例如将网络中某个参考资料下载到本地进行查看。

微信小程序提供了文件下载 API，使用文件下载 API 可以实现文件下载功能。通过调用 wx.downloadFile () 方法即可使用文件下载 API。

wx.downloadFile () 方法的常用选项如下表：

文件下载 API 的使用案例：

wx.downloadFile({  

    url: 'http://127.0.0.1:3000/tree.jpg',   

    success: res => {    

        // 判断服务器响应的状态码    

        if (res.statusCode === 200) {     

            console.log(res.tempFilePath)    

        }   

    }  

})

# 8. 掌握 canvas 组件，了解画布 API 以及如何使用画布 API 进行绘图的基本步骤

canvas 组件

概念：在 HTML 中，标签可用于图形的绘制，也可用于创建图片特效和动画。在微信小程序中，canvas 组件也起着类似作用，可用于自定义绘制图形，该组件支持 2D 和 WebGL 的绘图。

canvas 组件的常用属性如下表：

canvas 组件的使用案例：

①在 pages/index/index.wxml 文件中编写页面结构。

<canvas id="myCanvas" type="2d"></canvas>  

<!-- 定义了 canvas 组件，用于创建画布。其中，type 属性值为 2d，表示使用 Canvas 2D 接口。 -->

②在 pages/index/index.wxss 文件中编写 canvas 组件的页面样式。

#myCanvas {     

    display: block;     

    width: 300px;     

    height: 150px;     

    position: relative;    

    border: 1px solid red;  

}

为了方便查看默认 canvas 组件的大小，设置了 1px 的红色实心边框，页面效果如下图所示。

画布 API

概念：通过 canvas 组件创建画布后，要想在画布中绘制图案，需要通过画布 API 来完成。

画布 API 的使用方法如下：

1. 第一步：获取 Canvas 实例；
2. 第二步：通过 Canvas 实例获取 RenderingContext（渲染上下文）实例；
3. 第三步：通过 RenderingContext 实例的属性和方法完成绘图操作。

获取 Canvas 实例的示例代码如下：

wx.createSelectorQuery()  

.select('#myCanvas')             

// 页面中 & lt;canvas > 标签的 id  

.fields({ node: true, size: true })  

.exec(res => {     

    // 获取 Canvas 实例     

    const canvas = res[0].node     

    // 调用 getContext () 方法获取 RenderingContext 实例     

    const ctx = canvas.getContext('2d')  

    })

RenderingContext 实例的常用属性和方法如下表所示：

方法表

Canvas 绘制的基本步骤

①在 pages/index/index.wxml 文件中编写页面结构。

<canvas  id="draw" type="2d"></canvas>  

<!-- 定义了 canvas 组件，用于创建画布。其中，type 属性值为 2d，表示使用 Canvas  2D 接口。-->

②在 pages/index/index.js 文件中编写代码获取 Canvas 实例。

onReady:  function () {

    wx.createSelectorQuery().select('#draw')   

    .fields({ node: true, size: true })   

     .exec(res => {    

        const canvas = res[0].node    

        const ctx = canvas.getContext('2d')    

        this.drawRect(ctx)    

        this.drawSmile(ctx)   

    }) 

},  

drawRect:  function (ctx) {   

    // 绘制矩形，在后面的步骤中实现  

},  

drawSmile:  function (ctx) {   

    // 绘制笑脸，在后面的步骤中实现  

}

③编写绘制矩形函数 drawRect ()。

drawRect:  function (ctx) {   

      ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'   

    ctx.fillRect(10, 10, 150, 50)  

},

矩形的绘制效果如下图所示

④接下来绘制笑脸，先把调用绘制矩形的方法注释起来。

// this.drawRect(ctx)

⑤编写绘制笑脸函数 drawSmile ()。

drawSmile: function (ctx) {   

      // 设置线条颜色为红色，线条宽度为 2px     

      ctx.strokeStyle = '#f00'     

      ctx.lineWidth = '2'   

      // 移动画笔坐标位置，绘制外部大圆    

      ctx.moveTo(160, 80)     

      ctx.arc(100, 80, 60, 0, 2 * Math.PI, true)   

      // 移动画笔坐标位置，绘制外部嘴巴线条     

      ctx.moveTo(140, 80)     

      ctx.arc(100, 80, 40, 0, Math.PI, false)  }             drawSmile: function (ctx) {

  原有代码……

  // 移动画笔坐标位置，绘制左眼圆圈

  ctx.moveTo(85, 60)

  ctx.arc(80, 60, 5, 0, 2 * Math.PI, true)

  // 移动画笔坐标位置，绘制右眼圆圈

  ctx.moveTo(125, 60)

  ctx.arc(120, 60, 5, 0, 2 * Math.PI, true)

  ctx.stroke()

}

笑脸的绘制效果如下图所示：

# 9. 习题

一、 填空题

1. 上传文件的 API 是___。
2. 下载文件的 API 是___。
3. scroll-view 组件可以实现___效果。
4. 在 scroll-view 组件中，用 ___属性用于设置横向滚动条的位置。
5. 在 slider 组件的属性中，___属性用于设置进度条的最大值。

二、 判断题

1. 在 canvas 组件中，canvas-id 属性是其唯一标识符。（ ）
2. 在组件上添加 bindchanging="sliderChanging" 后，当滑块被拖曳时就会执行 sliderChanging () 事件处理函数。（ ）
3. canvas 组件将 type 属性值设置为 2D 表示使用 Canvas 2D 接口。（ ）
4. 文件上传 API 使用的方法是 wx.uploadFile ()。（ ）

三、 选择题

1. 下列选项中，用于滑动选择某一个值的组件是（ ）。

A. view     B. slider    C. input      D. audio

2. 下列 BackgroundAudioManager 实例的方法中，可以将音乐跳转到指定位置的是（ ）。

A. stop()     B. seek()    C. pause()     D. play()

3. 下列关于 canvas 组件的说法中，错误的是（ ）。

A. CSS动画对canvas组件无效

B. canvas-id是canvas组件的唯一标识符

C. canvas组件用于自定义绘制图形

D. 在同一个页面中，canvas-id是唯一的

4. 下列选项中，关于 wx.getRecorderManager () 方法说法错误的是（ ）。

A. start()方法表示开始录音

B. pause()方法表示暂停录音
    
C. resume()方法表示继续录音

D. onError()方法表示停止录音，点击开始录音后会从中断的地方接着继续录音

四、 简答题

1. 简述 BackgroundAudioManager 实例的属性和方法。
2. 简述使用画布 API 进行绘图的基本步骤。
3. 简述如何实现文件上传和文件下载。

# 第五章 微信小程序常用 API（下）

# 1. 掌握动画 API，了解如何获取 Animation 实例，导出动画队列所用的方法，能够完成动画的制作

动画 API

概念：动画 API 用于在微信小程序中完成动画效果的制作。在微信小程序中添加动画效果，可以让页面中的内容动起来。动画效果对浏览者的视觉冲击力远远高于静态画面，更能吸引浏览者。

动画 API 的使用方法如下：

第一步：通过 wx.createAnimation () 方法获取 Animation 实例；

var animation = wx.createAnimation(Object  object)  

 // Animation 实例

wx.createAnimation () 方法的常用选项：

wx.createAnimation () 方法的 timingFunction 选项有多个合法值，具体如下表所示：

Animation 实例的常用方法如下表所示：

动画 API 的使用方法如下：

第一步：通过 wx.createAnimation () 方法获取 Animation 实例；

var  animation = wx.createAnimation(Object object)  

 //  Animation 实例

第二步：调用 Animation 实例的方法实现动画效果。

动画 API 的使用案例：

①在 pages/index/index.js 文件的 Page ({}) 中定义页面初始数据 move。

data: {

  move: {}

},

//move 对象用于保存动画队列

②在 pages/index/index.wxml 文件编写页面结构。

<view animation="">hello world</view>

<button bindtap="translate">动画</button>

<!-- 绑定事件处理函数为 translate () -->

③在 pages/index/index.js 文件的 Page ({}) 中定义 translate () 函数实现动画效果。

translate: function () {

  var animation = wx.createAnimation({

    duration: 4000,

    timingFunction: 'ease'

  })

  animation.translate(50, 70).step()

  this.setData({

    move: animation.export()

  })

}

④完成上述代码后，运行程序，单击 “动画” 按钮后，“hello world” 向右下角平移，单击按钮前后的对比效果图如下。

# 2. 熟悉登录流程时序，教材 152 页图 5-7

登录流程时序

概念：登录流程时序由微信小程序官方文档提供，通过对登录流程时序的学习，可以完成登录功能的开发。微信官方提供的登录功能可以方便地获取微信提供的用户身份标识，从而使开发者服务器能够识别每个微信小程序用户。

微信小程序官方文档提供的登录流程时序图如下所示。

用户登录流程的参与角色：

小程序：用户使用的客户端，即微信小程序。

开发者服务器：微信小程序的后端服务器，用于为微信小程序用户提供服务。

微信接口服务：微信为开发者服务器提供的接口。

登录流程：

①获取 code

• 在微信小程序中通过 wx.login () 方法获取临时登录凭证 code。

②将 code 发送给开发者服务器

• 在获取 code 后，使用 wx.request () 方法将 code 发送给开发者服务器。

③校验登录凭证

• 开发者服务器将 appid、appsecret 和 code 发送给微信接口服务进行登录凭证校验，如果校验成功，微信接口服务会返回 session_key、openid、unionid 等信息。

④开发者服务器自定义登录态

• 在开发者服务器中为登录成功的用户生成一个 token，然后通过验证 token 的有效性来识别用户的登录状态。

# 3. 掌握登录 API, 能够运用 wx.login 方法实现用户登录

作用：登录 API 可以完成登录功能的开发。微信小程序提供了登录 API，其使用方法是，调用 wx.login () 方法获取用户登录凭证 code，获取后，将它发送给开发者服务器。

wx.login () 方法的常用选项

success 回调函数执行后，其参数会接收到一个对象，对象中有一个 code 属性，如下表所示。

注意：code 即为调用 wx.login () 方法获取的用户登录凭证。

wx.login () 方法的具体用法

wx.login({

  success: res => {

    if (res.code) {		//res.code 为登录获取的 code   

      wx.request({	// 登录成功之后发起网络请求

        url: 'http://127.0.0.1:3000/login',

        method: 'post',

        data: { code: res.code	// 设置参数，把 code 传递给服务器}

      })

    } else {		// 登录失败，在控制台输出错误信息

      console.log('登录失败！' + res.errMsg)

    }

  }

})

# 4. 掌握头像填写功能，能够实现头像选择和昵称填写

头像昵称填写：

概念：头像昵称是在用户登录小程序后，显示在页面中的头像和昵称。目前，微信小程序不允许开发者在未获得用户同意的情况下展示用户的头像和昵称，当需要展示时，应使用微信小程序的头像昵称填写功能。

头像选择的使用方法

将 button 组件的 open-type 属性值设置为 chooseAvatar，当用户选择头像之后，可通过 bindchooseavatar 绑定的事件处理函数获取头像信息的临时路径。

昵称填写的使用方法

将 input 组件的 type 属性值设置为 nickname，当用户在此 input 进行输入时，键盘上方会展示用户的微信昵称，用户可以使用该昵称，也可以手动填写昵称。

演示头像昵称填写功能的使用

①在 pages/index/index.js 文件中编写页面所需的数据。

const defaultAvatar = '/images/avatar.png'

Page({

  data: {

    avatarUrl: defaultAvatar

  },

})

//defaultAvatar 默认头像途径

②在 pages/index/index.wxml 文件中编写页面结构。

<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">

  <image class="avatar" src="" />

</button>

<input type="nickname" class="nickname" placeholder="请输入昵称" />

③在 pages/index/index.wxss 文件中编写样式。

.avatar-wrapper {

  width: 160rpx;

  height: 160rpx;

  padding: 0;

  background: none;

}

.avatar {

  width: 160rpx;

  height: 160rpx;

  border-radius: 20rpx;

}

.nickname {

  width: 80%;

  height: 100rpx;

  margin: 20px auto;

  border: 1px solid #000000;

  text-align: center;

}

④在 pages/index/index.js 文件中编写 onChooseAvatar () 函数，获取头像信息的临时路径。

onChooseAvatar: function (e) {

  const { avatarUrl } = e.detail

  this.setData({ avatarUrl })

}

# 5. 什么是 WebSocket 以及如何创建 WebSocket 连接

WebSocket API：允许服务器主动向微信小程序发送消息。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它会在客户端与服务器之间专门建立一条通道，使客户端与服务器之间的数据交换变得简单。客户端与服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

通过 wx.connectSocket () 方法可以创建一个 WebSocket 连接，该方法的常用选项如下表所示。

wx.connectSocket () 方法的使用

调用 wx.connectSocket () 方法创建 WebSocket 连接

wx.connectSocket({
  // 服务器地址
  url: 'ws://127.0.0.1:3000'      	
})   

# 6. 本地缓存异步，同步的区别，主要 API 及其作用，教材 154 页表 5-6

数据缓存 API：

作用：数据缓存 API 可以实现数据的缓存，从而加快读取数据的速度。在微信小程序中，需要保存一些临时数据时，例如，保存用户登录后获取到的 token，或保存一些经常需要从服务器中下载的数据，提高微信小程序下次打开时的加载速度。

常见的数据缓存方法如下表所示：

存储的最大数据长度：单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

wx.setStorage () 方法的常用选项如下表所示：

异步与同步的区别：

异步方法：

• 不会阻塞当前任务
• 异步方法需要通过传入回调函数获取结果
• 在发生错误时，异步方法会执行 fail () 回调函数返回错误

同步方法：

• 同步方法名以 Sync 结尾
• 同步方法直到处理完之后才能继续向下执行
• 同步方法通过返回值获取结果
• 在发生错误时，同步方法通过 try...catch 捕获异常来获取错误信息

使用异步方法存储、获取缓存数据示例：

wx.setStorage({		// 存储缓存数据

  key: 'key',		// 本地缓存中指定的 key

  data: 'value',		// 需要存储的内容（支持对象或字符串）

  success: res => {},	// 接口调用成功的回调函数

  fail: res => {}		// 接口调用失败的回调函数

})

wx.getStorage({		// 获取缓存数据

  key: 'key',		// 本地缓存中指定的 key

  success: res => {		// 接口调用成功的回调函数

    console.log(res.data)

  },

  fail: res => {}		// 接口调用失败的回调函数

})

# 7. 登录凭证 code 所使用的方法

在微信小程序中通过 wx.login () 方法获取临时登录凭证 code。

登录 API 可以完成登录功能的开发。微信小程序提供了登录 API，其使用方法是，调用 wx.login () 方法获取用户登录凭证 code，获取后，将它发送给开发者服务器。

success 回调函数执行后，其参数会接收到一个对象，对象中有一个 code 属性，如下表所示。

code 即为调用 wx.login () 方法获取的用户登录凭证。

# 8. 能够用 wx.navigateTo () 实现非标签页跳转

路由 API 的作用：用于实现页面跳转。

常用的路由 API 方法：

wx.navigateTo()

• 用于跳转到另一个页面，跳转后原来的页面会保留，并在导航栏左侧提供一个返回按钮，用户可以返回到之前的页面。该方法不能用于标签页切换。

wx.redirectTo()

• 用于关闭当前页面，跳转到一个新页面。该方法不能用于标签页切换。

wx.switchTab()

• 用于跳转到某个标签页，并关闭其他所有非标签页的页面。

路由 API 方法的常用选项如下表所示

路由 API 的使用

①在 pages/index/index.wxml 文件中编写一个按钮，实现点击按钮时触发 navigateTo () 函数。

<button  bindtap="navigateTo">路由</button>  

<!--绑定事件处理函数为navigateTo()

②在 app.json 文件中创建 pages/list/list 页面，然后在 pages/index/index.js 文件中编写 navigateTo () 函数，实现跳转到 pages/list/list 页面。

Page({

  navigateTo: function () {

    wx.navigateTo({

      url: '/pages/list/list?id=1',

      success: () => {console.log('跳转成功')},

      fail: () => {console.log('跳转失败')},

      complete: () => {console.log('跳转完成')}

    })

  },

})

③在 pages/list/list.js 文件中编写 onLoad () 函数，输出 options 参数的值。

onLoad: function(options) {

  console.log(options)

},

④保存上述代码后，运行程序，单击 “路由” 按钮后，在控制台中输出结果。

通过查看控制台中的结果，可以看出从 index 页面成功跳转到 list 页面，并传递了参数 id。

# 9. 习题

一、 填空题

1. 从本地缓存中异步获取指定 key 的内容使用____方法。
2. 微信小程序通过 ____方法获取登录凭证 code。
3. 微信接口服务返回的信息中， ____ 是用户的会话密钥，需要存储在开发者服务器中。
4. map 组件中地图视野发生变化时触发 ____ 事件。
5. 在 Animation 实例的常用方法中， ____ 用于导出动画队列。
6. 微信小程序通过 ____ 方法创建一个 WebSocket 连接。
7. 微信小程序通过 ____ 方法可以通过 WebSocket 发送数据。
8. 微信小程序通过 ____ 方法监听 WebSocket 接收到服务器的消息事件。

二、 判断题

1. 在微信小程序中，调用 wx.login () 方法可以获取临时登录凭证 code。（ ）
2. 同一个微信用户在 AppID 不同的微信小程序中的 openid 是不同的。（ ）
3. openid 是微信小程序的唯一标识。（ ）
4. 使用 wx.setStorageSync () 方法可以将数据同步存储在本地缓存指定的 key 中。（ ）
5. animation.export () 方法每次调用后仍保留之前的动画操作。（ ）

三、 选择题

1. 下列选项中，用于实现非标签页之间的跳转的方法是（ ）。

A.  wx.navigateTo()

B.   wx.navigate()

C.   wx.navigatorTo()

D.  wx.navigator()

2. 下列选项中，关于 map 组件属性说法错误的是（ ）。

A.  longitude为中心经度

B.   scale为缩放级别，取值范围为1~20

C.   latitude为中心纬度

D.  markers为标记点数组

3. 下列选项中，关于 openid 的说法错误的是（ ）。

A.  openid是用户的唯一标识

B.   openid不等同于微信用户id

C.   同一个微信用户在不同AppID的微信小程序中的openid是不同的

D.  openid是微信小程序的唯一标识

4. 下列选项中，关于 marker 对象的属性说法错误的是（ ）。

A.  title标注点名称

B.   zIndex表示显示层级

C.   alpha表示标注的透明度

D.  userInfo表示用户信息对象

5. 下列选项中，关于数据缓存说法错误的是（ ）。

A.  wx.getStorage()方法用于从本地缓存中异步获取指定key内容

B.   wx.removeStorageSync()方法用于以异步的方式从本地缓存中移除指定key

C.   wx.setStorage()方法用于将数据异步存储在本地缓存指定的key

D.  在实现数据缓存的方法中，方法名以Sync结尾的都是同步方法

四、 简答题

1. 简述如何获取 Animation 实例。
2. 简述微信小程序中应用生命周期回调函数 onLaunch ()、onShow ()、onError ()、onHide () 和 onPageNotFound () 的作用。
3. 简述如何创建 WebSocket 连接。