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

# 第一章、微信小程序入门

一、填空题

1. 微信小程序是运行在______之上的应用。

   微信

   微信小程序是运行在微信中的应用，是一种不需要下载即可使用的应用

2. 微信小程序开发完成后需要通过 “上传” 按钮将代码上传到______。

   小程序管理后台

   微信小程序开发完成后，需要通过 “上传” 按钮将代码上传到微信小程序的开发者平台，即小程序管理后台

3. 微信小程序项目中的______文件是全局配置文件。

   app.json

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

4. 微信开发者工具中用于保存文件的快捷键是______。

   Ctrl+S

   快捷键 Ctrl + S 表示保存

5. 在微信小程序中，每个页面由 4 个文件组成，分别是______文件、______文件、______文件和 JS 文件

   WXML WXSS JSON

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

   JSON：用于利用 JSON 语法对页面进行配置，文件扩展名为.json。

   WXML：用于构建页面结构，文件扩展名为.wxml。

   WXSS：用于设置页面样式，文件扩展名为.wxss。

二、判断题

1. 在微信小程序中，AppID 是每个小程序的唯一标识，每个小程序账号只有一个 AppID。（√ ）

   AppID 又称为小程序 ID，是每个小程序的唯一标识，每个小程序账号只有一个 AppID

2. 微信小程序项目中 app.js 文件是全局样式文件。（× ）

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

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

3. 通常称微信客户端为微信小程序提供的环境为微信小程序的宿主环境。（ √）

   微信小程序是运行在微信客户端上的应用。微信客户端给微信小程序提供的环境就是微信小程序的宿主环境。

4. 微信小程序具有无须安装、触手可及、用完即走、无须卸载等特点。（ √）

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

5. 项目成员表示参与微信小程序开发、运行的成员。（ √）

   项目成员：表示参与微信小程序开发、运行的成员，可登录微信小程序管理后台，包括运营者、开发者及和数据分析者。

三、选择题

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

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

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

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

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

   这一说法是错误的，因为微信小序本身是基于微信平台的，但通过跨平台开发工具如 uni-app，可以实现代码一次编写，多端运行，从而达到跨平台的效果。

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

   A. 无须安装 B. 无须卸载 C. 体积大 D. 入口丰富

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

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

   A.Wxml

   B.Console

   C.Sources

   D.Network

   Wxml：Wxml 面板，用于查看和调试 WXML 和 WXSS。

   Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。

   Sources：源代码面板，用于显示当前项目的脚本文件，在该面板中开发者看到的文件是经过处理之后的脚本文件。

   Network：网络面板，用于记录网络请求和响应信息，根据它可以进行网络性能优化。

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

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

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

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

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

   微信小程序的全局配置文件是 app.json，而不是 sitemap.json。

   app.json 是全局配置文件，主要用于配置小程序的全局属性、页面路径、窗口样式等。

   sitemap.json 是页面配置文件，用于配置小程序的页面路径、页面的标题、页面是否允许分享等。

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

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

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

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

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

   微信开发者工具的编辑器支持同时打开和切换多个文件，以便于开发者进行多任务编辑和查看。

四、简答题

1. 请简述微信小程序的特点。

   ①微信小程序具有无须安装、触手可及、用完即走、无须卸载

   ②体积小，加载速度快，不占用存储空间。

   ③名称唯一、入口丰富和传播能力强

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

   ①打开微信开发者工具时，使用微信扫码登录微信开发者工具

   ②进入微信开发者工具的项目选择界面，单击 “+” 进入微信小程序项目的创建页面。

   ③将微信小程序项目的创建页面中项目名称、目录、AppID、开发模式、后端服务和模板选择等内容填写完成

   ④单击 “确定” 按钮创建微信小程序项

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

一、填空题

1. image 组件的____属性用于设置图片的展示模式。

   mode

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

2. swiper 组件内部只可以放置____组件。

   swiper-item

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

3. 在 Flex 布局中， ____属性能够设置项目在主轴方向的排列方式。

   justify-content

   justify-content 设置排列方式

   flex-direction 设置主轴方向

   justify-content 定义了项目在主轴上的对齐方式，默认值为 flex-start，即项目在主轴方向上，与主轴起始位置对齐

4. text 组件的 ____属性用于实现长按选中文本内容的效果。

   user-select

   user-select 文本是否可选，该属性会使文本节点显示为 inline-block

5. 在实现底部标签栏时，tabBar 配置项应在 ____文件中设置。

   app.json

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

二、判断题

1. 给父元素设置 display:flex 后，可以使用 flex 的相关属性，例如通过 flex-direction 属性设置主轴方向。（√ ）

   flex-direction 决定主轴的方向（即项目的排列方向），默认值为 row，即主轴为从左到右的水平方向，项目按照主轴方向排列

2. 微信小程序中样式文件为 WXSS 文件，只支持 rpx 一种尺寸单位。（× ）

   微信小程序中的样式文件是 WXSS 文件，但是支持多种尺寸单位，包括 rpx、px、vw、vh 等

   rpx（Responsive Pixel，自适应像素）。

3. swiper 组件可以实现页面的轮播图效果。（ √）

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

4. video 组件专门用于播放音频。（ × ）

   video 视频

   audio 音频

三、选择题

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

   A. app.js

   B. app.json

   C. app.wxss

   D. project.config.json

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

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

   A. input 组件

   B. checkbox 组件

   C. form 组件

   D. swiper 组件

   常见表单组件如下：

   组件	功能
   form	表单
   checkbox-group	多项选择器
   radio-group	单项选择器
   textarea	多行输入框
   button	按钮
   checkbox	多选项目
   radio	单选项目
   input	输入框

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

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

   A. display:flex;

   B. flex:1;

   C. float:left;

   D. flex-flow:column nowrap;

   Flex 布局允许开发者沿着主轴（main axis）和交叉轴（cross axis）这两个维度来控制元素的布局，其中主轴是由 flex-direction 属性决定的，可以是水平或垂直方向。

   选项 A display:flex; 是启用 Flex 布局的基本属性，它指定了某个元素作为 Flex 容器。

   选项 B 中的 flex:1; 则是在 Flex 容器的子项上定义的，表示该项目相对于其他项目的扩展比例。

   C 中的 float:left; , float 属性在某些布局场景下仍然有其应用，但它并不属于 Flex 布局的属性范畴

   选项 D 中的 flex-flow:column nowrap; 是一个简写属性，结合了 flex-direction 和 flex-wrap 两个属性的值，用于控制项目的排列方向和是否换行。

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

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

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

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

四、简答题

1. 简述 WXML 和 HTML 的区别。

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

   ② WXML 提供了和 Vue.js 中模板语法类似的模板语法，例如数据绑定、列表渲染、条件渲染等，而 HTML 中没有。

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

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

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

2. 简述 WXSS 和 CSS 的区别。

   ① 不同的手机屏幕分辨率不同，如果用 CSS 中的 px 单位，会遇到屏幕适配的问题，需要手动进行像素单位换算。而微信小程序提供了一个新的单位 rpx，使用 rpx 单位可以很轻松地适配各种手机屏幕。

   ② 在微信小程序中，项目根目录中的 app.wxss 文件作为全局样式，会作用于当前微信小程序的所有页面，而局部页面的 WXSS 样式仅对当前页面生效，CSS 则没有这样的功能。

   ③ 在 WXSS 中设置背景图片的时候，可以使用网络图片或者以 Base64 格式编码的图片，不能使用本地图片，例如，“background-image:url ('/images/1.png');” 是无效的，而 CSS 可以使用本地图片来设置背景图片。

3. 简述 Flex 布局的概念。

   Flex 布局又称为弹性盒（Flexible Box）布局，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为 Flex 布局。采用 Flex 布局的元素，称为 Flex 容器（简称容器）。 它的所有子元素自动成为容器成员，称为 Flex 项目（简称项目）。容器内有两根轴：主轴（Main Axis）和交叉轴（Cross Axis）, 默认情况下主轴为水平方向，交叉轴为垂直方向，项目默认沿主轴排列，根据实际需要可以更改项目的排列方式。

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

一、填空题

1. 在页面结构渲染过程中，通过____控制属性完成页面的条件渲染。

   wx:if

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

2. 在列表渲染中，通过____控制属性可以循环数组中的每一项。

   wx:for

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

3. 在列表渲染中，使用____可以指定当前项的变量名。

   wx:for-item

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

4. 在 JS 文件中，通过____ 获取 data-* 自定义属性的值。

   e.target.dataset

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

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

5. 在微信小程序中，页面加载完成后执行的生命周期函数为 ____。

   onReady()

   onLoad () : 监听页面加载，且一个页面只会在创建完成后触发一次

   onShow (): 监听页面显示，只要页面显示就会触发此函数

   onReady (): 监听页面初次渲染完成，一个页面只会调用一次

   onHide (): 监听页面隐藏，只要页面隐藏就会触发此函数

   onUnload (): 监听页面卸载，只要页面被释放就会触发此函数

二、判断题

1. 在微信小程序中，可以通过 data-* 自定义属性来进行传参。（ √）

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

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

2. ‌所有绑定的数据都必须在 data 中进行初始化。（× ）

   绝大多数情况下，页面上需要动态显示或操作的数据确实需要在对应的 JavaScript 文件中的 page 实例的 data 属性里定义和初始化，但也存在一些特例情况

   对于那些不经常变化或者不需要动态响应式更新的数据，可能会选择直接在 WXML 文件中硬编码，而不是在 data 中定义

3. 设置 enablePullDownRefresh 为 false 时，表示禁止下拉。（√ ）

   onPullDownRefresh () : 监听用户下拉刷新事件

   启用下拉刷新的方式:

   ①全局开启下拉刷新：在 app.json 文件的 window 节点中，将 enablePullDownRefresh 设置为 true。

   ②局部开启下拉刷新：在页面的 JSON 文件中，将 enablePullDownRefresh 设置为 true。

4. 通过调用 wx.request () 方法可以发起网络请求。（ √）

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

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

5. 通过调用 wx.showLoading () 方法可以弹出加载提示框。（ √）

   在微信小程序中，如果想实现点击一个按钮弹出一个提示框的效果，可以使用以下 2 种方式。

   ①wx.showLoading () 方法

   ②wx.showToast () 方法

三、选择题

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

   A. wx:for-index 可以用于重新定义当前项的变量名

   B. 在列表渲染中，可以使用 item 变量获取当前项的值

   C. wx:for 可以用于实现页面中的列表渲染

   D. wx:for-item 可以用于设置当前索引变量的属性名

   答案 BC 应该都是对的，但老师给的答案是选 B

   A. 错误：wx:for-index 确实用于重新定义当前项索引变量的名字，默认情况下是 index，例如 wx:for-index="idx"，但题目描述的是 “当前项的变量名”，这是错误的，应为 item。

   B. 正确：在列表渲染中，使用 wx:for-item="item" 可以定义一个变量来获取当前项的值，然后在 wxml 模板中通过访问当前项的内容。

   C. 正确：wx:for 指令可以用于实现页面中的列表渲染，其基本语法格式是 wx:for=""。

   D. 错误：wx:for-item 用于设置当前数据项的变量名，默认是 item，例如 wx:for-item="itemName"，而不是用于设置当前索引变量的属性名。

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

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

   onLoad () : 监听页面加载，且一个页面只会在创建完成后触发一次

   onShow (): 监听页面显示，只要页面显示就会触发此函数

   onReady (): 监听页面初次渲染完成，一个页面只会调用一次

   onHide (): 监听页面隐藏，只要页面隐藏就会触发此函数

   onUnload (): 监听页面卸载，只要页面被释放就会触发此函数

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

   A. wx:for-i

   B. wx:for-j

   C. wx:for-item

   D. wx:for-index

   在微信小程序开发中， wx:for 是一种控制属性，它允许开发者通过绑定一个数组到组件上，从而使用数组中的每一项数据重复渲染该组件

   wx:for-index 属性允许开发者为当前元素的下标指定一个自定义的变量名

   wx:for-item 属性，用于指定当前元素的变量名

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

   A. title、icon 和 mask

   B. success、fail 和 title

   C. duration、mask 和 success

   D. success、fail 和 complete

   注意：老师答案为 A

   wx.showToast() 函数是一个常用的 API，用于向用户显示一个简单的提示消息

   该函数的参数属性：

   title：这是提示的内容，是 wx.showToast() 函数的必填参数。

   icon：这是一个可选参数，用于设置提示框的图标类型。支持的图标类型包括'success'、'loading' 等。

   duration：这也是一个可选参数，定义了提示框显示的持续时间，以毫秒为单位。

   mask：一个布尔值，表示是否显示透明蒙层以防止触摸穿透，默认为 false。

   success：这是接口调用成功的回调函数，它是一个可选参数。

   fail：这是接口调用失败的回调函数，同样是一个可选参数。

   complete：无论接口调用成功还是失败，这个回调函数都会被执行。它也属于可选参数

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

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

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

四、简答题

1. 简述页面生命周期函数包括哪些。

   页面生命周期回调函数包含以下 5 个。

   ① onLoad () 函数用于监听页面加载，且一个页面只会在创建完成后触发一次。

   ② onShow () 函数用于监听页面显示，只要页面显示就会触发此函数。

   ③ onReady () 函数用于监听页面初次渲染完成，一个页面只会调用一次。

   ④ onHide () 函数用于监听页面隐藏，只要页面隐藏就会触发此函数。

   ⑤ onUnload () 函数用于监听页面卸载，只要页面被释放就会触发此函数。

2. 简述 wx:if 控制属性和 hidden 属性的区别。

   wx:if 和 hidden 不同之处在于，wx:if 初始渲染条件为 false，只有条件第一次变为 true 的时候才开始渲染，而 hidden 所在的组件始终会被渲染，只是简单的控制显示与隐藏。

   一般来说，wx:if 有更大的切换开销而 hidden 有更高的初次渲染开销。因此，在需要频繁切换的情境下，用 hidden 更好，而如果运行时条件不太可能会改变，用 wx:if 更好。

3. 简述微信小程序如何实现下拉刷新。

   微信小程序实现下拉刷新分为 2 个步骤。

   ① 开启下拉刷新。在 app.json 的 window 节点中或在页面的 JSON 文件中，将 enablePullDownRefresh 设置为 true。

   ② 调用 onPullDownRefresh () 事件处理函数实现下拉操作执行时的操作。

4. 简述微信小程序如何实现上拉触底。

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

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

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

一、 填空题

1. 上传文件的 API 是 ____。

   wx.uploadFile()

   微信小程序提供了文件上传 API，使用文件上传 API 可以在微信小程序中发起一个 POST 请求，将本地资源上传到服务器。通过调用 wx.uploadFile () 方法即可使用文件上传 API。

2. 下载文件的 API 是 ___。

   wx.downloadFile()

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

3. scroll-view 组件可以实现 ___ 效果。

   滚动

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

4. 在 scroll-view 组件中，用 ___ 属性用于设置横向滚动条的位置。

   scroll-left

   scroll-x: 允许横向滚动，默认值为 false
   scroll-y: 允许纵向滚动，默认值为 false
   scroll-top: 设置竖向滚动条的位置，默认值为空，类型：number/string
   scroll-left：设置横向滚动条的位置，默认值为空，类型：number/string
   scroll-into-view：当前可在哪个方向滚动，则在哪个方向滚动到该元素。值为某子元素 id (id 不能以数字开头)，类型：string
   scroll-with-animation: 在设置滚动条位置时是否使用动画过渡，默认值为 false

5. 在 slider 组件的属性中，___ 属性用于设置进度条的最大值。

   max

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

   slider 组件的常用属性:

   min: 进度条的最小值，默认值为 0

   max: 进度条的最大值，默认值为 100

   step：步长，取值大于 0，可被 max-min 整除，默认值为 1

   value：当前取值，默认为 0

   activeColor：已选择的颜色，默认值为 #1aad19

   backgroundColor ：背景条的颜色，默认值为 #e9e9e9

   block-size：滑块大小，取值范围为 12∼2812∼28 , 默认值为 28

   block-color： 滑块颜色，默认值为 #ffffff

二、 判断题

1. 在 canvas 组件中，canvas-id 属性是其唯一标识符。（√ ）

   canvas 组件可用于自定义绘制图形，该组件支持 2D 和 WebGL 的绘图。

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

   属性	类型	说明
   type	string	指定 canvas 组件的类型，支持 2D 和 WebGL
   canvas-id	string	canvas 组件的唯一标识符，若指定了 type 属性则无须再指定该属性
   disable-scroll	boolean	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动及下拉刷新，默认值为 false
   bindtouchstart	eventhandle	手指触摸动作开始
   bindtouchmove	eventhandle	手指触摸后移动
   bindtouchend	eventhandle	手指触摸动作结束
   bindtouchcancel	eventhandle	手指触摸动作被打断，例如来电提醒，弹窗等
   bindlongtap	eventhandle	手指长按 500 毫秒之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
   binderror Grill	eventhandle	当发生错误时触发 error 事件

2. 在 <slider> 组件上添加 bindchanging="sliderChanging" 后，当滑块被拖曳时就会执行 sliderChanging () 事件处理函数。（ √ ）

   bindchange: 完成一次拖曳后触发的事件

   bindchanging: 拖曳过程中触发的事件

3. canvas 组件将 type 属性值设置为 2D 表示使用 Canvas 2D 接口。（√ ）

   type 指定 canvas 组件的类型，支持 2D 和 WebGL

4. 文件上传 API 使用的方法是 wx.uploadFile ()。（ √ ）

   微信小程序提供了文件上传 API，调用 wx.uploadFile () 方法即可使用文件上传 API。

5. 通过调用 wx.previewImage () 方法可以使用选择媒体 API。（ × ）

   通过调用 wx.chooseMedia () 方法即可使用选择媒体 API，该方法执行后，会提示用户拍摄图片或视频，或从手机相册中选择图片或视频。

三、选择题

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

   A. view

   B. slider

   C. input

   D. audio

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

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

   A. stop()

   B. seek()

   C. pause()

   D. play()

   A. stop () 停止背景音频 *

   B. seek () 跳转到指定位置

   C. pause () 暂停背景音频

   D. play () 播放背景音频

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

   A. CSS 动画对 canvas 组件无效

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

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

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

   CSS 动画和 <canvas> 元素的结合使用可以创建复杂的视觉效果。

   然而，<canvas> 是一个基于 JavaScript 的图形绘制工具，它不直接支持 CSS 动画。你需要使用 JavaScript 配合 < canvas > 来实现动画。

   canvas-id:canvas 组件的唯一标识符，若指定了 type 属性则无须再指定该属性

   canvas 组件可用于自定义绘制图形，该组件支持 2D 和 WebGL 的绘图。

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

   A. canvas 组件通过标签定义

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

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

   D. Canvas 组件的 type 属性用于指定 canvas 类型

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

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

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

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

   实际上，onError () 方法并不表示停止录音。它是用于处理录音过程中发生错误的回调函数，当录音发生错误时会触发该方法。与录音的开始、暂停、继续等操作无关。因此，D 选项中的描述是错误的。

四、简答题

1. 简述 BackgroundAudioManager 实例的属性和方法。

   BackgroundAudioMauager 实例的常用属性包含 src（背景音频的数据源）、startTime（背景音频开始播放的位置）、title（背景音频标题）、duration（当前背景音频的长度）、currentTime（当前背景音频的播放位置）和 paused（当前是否暂停或停止）。

   BackgroundAudioMauager 实例的常用方法包含 play ()（播放背景音频）、pause ()（暂停背景音频）、seek ()（跳转到指定位置）和 stop ()（停止背景音频）。

2. 简述使用画布 API 进行绘图的基本步骤。

   若要使用画布 API，需要先获取 Canvas 实例，然后通过 Canvas 实例获取 RenderingContext（渲染上下文）实例，最后通过 RenderingContext 实例的属性和方法完成绘图操作。

3. 简述如何实现文件上传和文件下载。

   微信小程序提供了文件上传 API，通过调用 wx.uploadFile () 方法可以实现文件上传；同时也提供了文件下载 API，通过调用 wx.downloadFile () 方法即可使用文件下载 API。

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

一、填空题

1. 从本地缓存中异步获取指定 key 的内容使用 ____ 方法。

   wx.getStorage()

   异步方法	说明
   wx.setStorage()	将数据存储在本地缓存指定的 key 中
   wx.getStorage()	从本地缓存中异步获取指定 key 的内容
   wx.getStorageInfo()	异步获取当前 storage 的相关信息
   wx.removeStorage()	从本地缓存中移除指定 key
   wx.setStorageSync()	wx.setStorage () 方法的同步版本

2. 微信小程序通过 ____ 方法获取登录凭证 code。

   wx.login()

   微信小程序提供了登录 API，调用 wx.login () 方法获取用户登录凭证 code

   选项	类型	说明
   timeout	number	超时时间，单位毫秒
   success	function	调用成功的回调函数
   fail	function	调用失败的回调函数
   complete	function	调用结束的回调函数

3. 微信接口服务返回的信息中， ____ 是用户的会话密钥，需要存储在开发者服务器中。

   session_key

   调用 login () 方法，获取到 login code 和 session，并且 session 中包含 session_key 和 openid，说明用户登录凭证 code 验证成功。

   session_key 是用户的会话密钥，需要存储在开发者服务器中。

4. map 组件中地图视野发生变化时触发 ____ 事件。

   bindregionchange

   map 组件可以为用户提供地图功能。map 组件可以在页面中显示地图，并且支持移动、缩放、添加标记点等功能。

   属性	类型	说明
   longitude	number	中心经度，为必填项
   latitude	number	中心纬度，为必填项
   scale	number	缩放级别，取值范围为 3~20，默认值为 16
   markers	Array.	标记点数组
   show-location	boolean	是否显示带有方向的当前定位点，默认值为 false
   bindregionchange	eventhandle	视野发生变化时触发的事件处理函数

5. 在 Animation 实例的常用方法中， ____ 用于导出动画队列。

   export()

   export (): 导出动画队列。export () 方法每次调用后会清掉之前的动画操作

   scale: 缩放

   translate：平移变化

   skew：倾斜

6. 微信小程序通过 ____ 方法创建一个 WebSocket 连接。

   wx.connectWebSocket

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

   通过 wx.connectSocket () 方法可以创建一个 WebSocket 连接

7. 微信小程序通过 ____ 方法可以通过 WebSocket 发送数据。

   send()

   微信小程序通过 socket.send() 方法可以通过 WebSocket 发送数据。在微信小程序中建立 WebSocket 连接后，可以使用 send 函数来发送数据

8. 微信小程序通过 ____ 方法监听 WebSocket 接收到服务器的消息事件。

   onMessage()

   微信小程序通过 wx.onSocketMessage 方法监听 WebSocket 接收到服务器的消息事件。当 WebSocket 接收到服务器发送的数据时，这个回调函数会被触发。

二、判断题

1. 在微信小程序中，调用 wx.login () 方法可以获取临时登录凭证 code。（√ ）

   微信小程序提供了登录 API，调用 wx.login () 方法获取用户登录凭证 code

2. 同一个微信用户在 AppID 不同的微信小程序中的 openid 是不同的。（ √ ）

   openid 是用户在某个小程序中的唯一标识，而当开发者拥有多个小程序时，同一个微信用户在不同的小程序中的 openid 是不一样的。

3. openid 是微信小程序的唯一标识。（ × ）

   在单个小程序内，openid 确实是该用户的唯一标识，但如果跨小程序来看，就不能说 openid 是唯一的，因为它在不同小程序中会有所不同。

4. 使用 wx.setStorageSync () 方法可以将数据同步存储在本地缓存指定的 key 中。（√ ）

   使用 wx.setStorageSync() 方法可以将数据同步存储在本地缓存指定的 key 中，这也是正确的。这个方法用于在本地同步地设置或获取数据，非常适合用来保存一些简单的配置信息或用户的登录态。

5. animation.export () 方法每次调用后仍保留之前的动画操作。（ × ）

   微信小程序的 API 设计， animation.export() 方法每次调用后并不会保留之前的动画操作。

   相反， export 方法每次调用后会清掉之前的动画操作。

   这意味着如果你想要创建一个新的动画序列或者更新现有动画，你需要重新初始化和配置动画实例。这是为了确保动画数据的更新能够正确反映最新的动画设置，避免动画状态的混乱。

三、选择题

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

   A. wx.navigateTo()

   B. wx.navigate()

   C. wx.navigatorTo()

   D. wx.navigator()

   用于实现非标签页之间的跳转的方法是 A. wx.navigateTo ()。在微信小程序中，页面跳转是一个常见的操作，它允许用户在应用的不同页面之间流畅地切换

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

   A. longitude 为中心经度

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

   C. latitude 为中心纬度

   D. markers 为标记点数组

   A. longitude 为中心经度：这个陈述是正确的。在地图应用中，经度（longitude）确实表示地图中心的经度值。在微信小程序的 map 组件中，longitude 属性用于设置地图中心的经度，以确定地图初始显示的地理位置。

   B.scale 为缩放级别，取值范围为 1~20：这个陈述是错误的。在微信小程序的 map 组件中，scale 属性实际上是用来设置地图的缩放比例的，而不是缩放级别。而且，scale 的取值范围并不是 1 到 20，而是任意有效的正数。scale 的值越小，地图的显示范围越大，反之则显示范围越小。

   C.latitude 为中心纬度：这个陈述也是正确的。纬度（latitude）在地理坐标系统中用来表示一个地点的北南位置。在微信小程序的 map 组件中，latitude 属性用于设置地图中心的纬度值，与 longitude 一起确定地图的初始中心位置。

   D.markers 为标记点数组：这个陈述同样是正确的。markers 属性用于在地图上添加标记点。它是一个数组，每个元素代表一个标记点的信息，包括经纬度、名称等。通过 markers 属性，开发者可以在地图上标出特定的地理位置或兴趣点。

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

   A. openid 是用户的唯一标识

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

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

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

   openid 的定义与作用：openid 是微信用户在单个小程序中的唯一标识符。这意味着每个用户在一个特定的小程序中都有一个独特的 openid，这个标识符用于在该小程序内部区分不同的用户。

   openid 的获取方式：通常通过调用 wx.login() 方法获取一个临时登录凭证，然后再通过服务器请求微信接口 auth.code2Session 来换取 openid。

   openid 的范围限制：openid 仅在获得它的小程序中有效。如果用户同时使用了开发者的多个小程序，那么在不同的小程序中，用户的 openid 是不同的。

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

   A. title 标注点名称

   B. zIndex 表示显示层级

   C. alpha 表示标注的透明度

   D. userInfo 表示用户信息对象

   D.userInfo 不是 marker 对象的属性，而是部分地图 API 中提供的一种用于保存用户信息的参数，可以通过自定义属性来实现类似功能。

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

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

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

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

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

   B 选项说 “wx.removeStorageSync () 方法用于以异步的方式从本地缓存中移除指定 key”，这是不正确的。

   实际上，wx.removeStorageSync () 方法是以同步的方式从本地缓存中移除指定 key 的内容。方法名中的 “Sync” 后缀表示这是一个同步方法，而不是异步方法。

   所以，B 选项的描述是错误的。

四、简答题

1. 简述如何获取 Animation 实例。

   通过 wx.createAnimation () 方法可以获取 Animation 实例。

2. 简述微信小程序中应用生命周期回调函数 onLaunch ()、onShow ()、onError ()、onHide () 和 onPageNotFound () 的作用。

   1. onHide () 和 onPageNotFound () 的作用。

   （1）onLaunch ()：监听微信小程序初始化，微信小程序初始化完成时触发，全局只触发一次。

   （2）onShow ()：监听微信小程序启动或切前台，微信小程序启动或从后台进入前台时触发。

   （3）onError ()：错误监听函数，微信小程序脚本错误或者 API 调用报错时触发。

   （4）onHide ()：监听微信小程序切后台，微信小程序从前台进入后台时触发。

   （5）onPageNotFound ()：页面不存在监听函数，微信小程序要打开的页面不存在时触发。

3. 简述如何创建 WebSocket 连接。

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

# 编程题 重点范围

程序题 6 题 * 4=24 分

# 1. 组件的概念及常用组件 (image，video，view 等组件)

例题 组件的概念及常用组件 --view、image、text、radio、button

<!--index.wxml-->

<!-- 配置状态栏 -->

<navigation-bar title="我的主页" back="false" color="blue" background="#bbf">

</navigation-bar>

<!-- 头像区域 -->

<view>

    <view class='container'>    

        <view class="top">        

            <image src="/images/avatar.png" mode='aspectFit'/>

        </view>

    </view>        

<!-- 详细信息区域 -->

<view class="menu">

	<view class="item">姓名：小丽</view>

	<view class="item">年龄：20</view>

	<view class="item">性别：女</view>

	<view class="item">特长：绘画、书法</view>

	<view class="item">爱好：编程</view>

	</view> 16 </view>

</view>

<!-- 配置页脚 -->

<view class="footer" hover-class='bgc' hover-start-time="1000" hover-stay-time="3000">

    <text>想联系我吗？</text><br/>

    <radio value=""/>发邮箱给我dd@qq.com

    <button>发送</button>

</view>

</view>

// WXSS配置

.top {

	background: #3A4861; 3	width: 100%;

	padding: 30rpx 0; 5 }

	.top .user-img {

	width: 252rpx;

	margin: 0 auto;

 }

.top image {

	width: 252rpx;

	height: 252rpx;

	border-radius: 50%;

	border: 6rpx solid #777F92; 15 

}

.menu .item {

	height: 96rpx;

	line-height: 96rpx;

	border-bottom: 2rpx solid #ccc;

	padding: 0 40rpx;

	font-size: 34rpx; 7 

}

.footer{

    padding: 50rpx 5rpx;

}

.footer button{

    border:5rpx solid #aaa;

    background-color:#bbf;

    margin-top:15rpx;

}

.bgc{

background-color:#cdd;      

}

例题 组件的概念及常用组件 -- video

<text>pages/life/life.wxml</text>

<view class="vd"

      <view classs="item"

         <video src="http://127.0.0.1:3000/01.mp4poster="http://127.0.0.1:3000/st2.pngcontrols="true" loop="true" />

<!-- autoplay="true-->

        </view>

</view>

.vd{

    border:2rpx solid #4ed;

    width: 80vw;

    height: 80vh;

}

.vd .item{

    border:2rpx solid #4ed;

    width: 60vw;

    height: 60vw;

    text-align: center;

    margin:0 auto;

    padding: 20rpx;

}

.item video{

    width:80%;

    height: 80%;

}

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

pages":[

   "pages/index/index"

   "pages/info/info"

   "pages/life/life"

],

"window":{

"navigationBarTextstyle":"black",

"backgroundTextstyle":"light". 

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"app.json"

},

"tabBar":{

"color":"#000”，

"selectedColor":"blue",

"borderStyle": "black",

"backgroundColor":"#eee",

"list":[{

"pagePath":"pages/index/index"

"text":"首页”，

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

"selectedIconPath":"images/invite.png'

}.

{

"pagePath":"pages/info/info",

"text":"个人信息” ,

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

}

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

<view style="height:50px; text-align: center, padding-top:30px;">本地生活</view>

<!-- 轮播图区域的页面结构 -->

<swiper indicator-dots="true" autoplay="true" interval="3000">

    <swiper-item>

        <image src="/images/swiper00.jpg" />

    </swiper-item>    

        <image src="/images/swiper01.jpg" />

    <swiper-item>

        <image src="/images/swiper02.jpg" />

    </swiper-item>

</swiper>

<!-- 九宫格区域 -->

<view class="grids">

    <view class="item">

        <image src="/images/shi.png" />

        <text>美食</text>

    </view>

    <view class="item">

        <image src="/images/xiu.png" />

        <text>装修</text>

    </view>

    <view class="item">

        <image src="/images/yu.png" />

        <text>洗浴</text>

    </view>

    <view class="item">

        <image src="/images/che.png" />

        <text>汽车</text>

    </view>

    <view class="item">       

        <image src="/images/chang.png" />

        <text>唱歌</text>

    </view>

    <view class="item">

        <image src="/images/fang.png" />

        <text>住宿</text>

    </view>

    <view class="item">

        <image src="/images/xue.png" />

        <text>学习</text>

    </view>

    <view class="item">

        <image src="/images/gong.png" />

        <text>工作</text>

    </view>

    <view class="item">

        <image src="/images/hun.png" />

        <text>结婚</text>

    </view> 38 </view>

swiper{

    height: 350rpx;

}

swiper image{

    width: 100%;      

    height: 100%;

    }

/* 九宫格 */

.grids{

    display:flex;

    flex-wrap: wrap;

    flex-direction: column;

    height:760rpx;

}

.grids .item image {

    width: 70rpx;

    height: 70rpx;

}

.grids .item text { 

    color: #999;

    font-size: 28rpx;

    margin-top: 20rpx; 9 

}

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

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

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

{

  "navigationBarTitleText": "微信小程序"

}

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

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

"navigationBarTitleText":  "微信小程序"

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

例题，页面路径的配置方法 / 标签栏的配置方法 / 导航栏的配置方法
2.3 知识点

"tabBar": {

"color": "#ccc",

"selectedColor": "#ff4c91",

"borderStyle": "white",

"backgroundColor": "#fff", 

"list": [{

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

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

"selectedIconPath": "images/invite.png",

"text": "邀请函" 

}, {

"pagePath": "pages/picture/picture",

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

"selectedIconPath": "images/marry.png",

"text": "照片" 

}, {

"pagePath": "pages/video/video",

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

"selectedIconPath": "images/video.png",

"text": "美好时光" 

}, {

"pagePath": "pages/guest/guest",

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

"selectedIconPath": "images/guest.png",

"text": "宾客信息" 

}]

{

    navigationBarTitleText": "邀请函"

}

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

form 表单组件

<form bindsubmit="">

    <text>1 输入文本</text>

    <input type="text"/>

    <text>2 输入数字</text>

    <input type="number" placeholder="数字键盘"/>

    <text>3 输入身份证号码</text>

    <input type="idcard"/>

    <text >4 带小数点的数字键盘</text>

    <input type="digit"/>

    <text>6 密码</text>

    <input type="text" password="true"/>

</form>

<button>普通按钮</button>

<button size="mini">mini普通按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button)

<radio value=""/>单个单选按钮

    <view>互斥按钮</view>

<radio-group bindchange="">

    <radio value="0"/>选择1

    <radio value="1" checked="true"/>选择2

</radio-group>

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

例题，事件绑定 /this，3.1 知识点

<view class="container">

<view>

    <button bind:tap="test()">按钮1-1</button>

    <button bind:tap="test">按钮1-2</button

    <button bindtap="test()">按钮2-1</button>

    <button bindtap="test">按钮2-2</button>

    <button bind:tap="changetext">按钮</button>

</view>

<view bind:tap="viewtap" id="out">out 

    <view id="inner" >inner</view>

</view>

<view wx:if="false">单独view1</view>

<view wx:elif="false">单独view2</view>

<view wx:else>单独view3</view>

test(){

    console.log('test');

},

viewtap:function(e){

    console.log(e);

    console.log(e.target.id+'/'+ e.currentTarget.id);

},

changetext(){

    this.setData({

        msg:'新标题

    },this.test());

}

例题，数据绑定（插值语法），3.1 知识点

Page({

data:{

    msg:'hello',

    flag:1,

    hid:1,

},

num1:0, // 保存第 1 个数字

    onLoad :function(){

        console.log(this.num1);

    }

<view class="container">

<view>

    <button bind:tap="test()">按钮1-1</button>

    <button bind:tap="test">按钮1-2</button

    <button bindtap="test()">按钮2-1</button>

    <button bindtap="test">按钮2-2</button>

    <button bind:tap="changetext">按钮</button>

</view>

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

Page(

    data:{

    msg:'hello'

    flag:1,

    hid:1,

},

num1:0,// 保存第 1 个数字

onLoad:function(){

    console.log(this.num1);

    console.log(this.data.msg);

// 报错 //console.log (this.msg);

    console.log('onload');

onPullDownRefresh:function(){

    console.log('onPullDownRefresh');

this.setData({

    msg:'hello world

//num1:42 无效

});

console.log(this.num1);

test(){

    console.log('test');

},

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

例题，自定义属性 data- /setData，3.2 知识点

var hello = require('../../examplejs/hello')

Page({

    data:{

        name:'初始值'，

        age:0

    },

    onLoad:function(){

        console.log(hello.msg);

    demo(e){

        this.setData({

            name:e.target.dataset.name,

            age:e.target.dataset.infoAge

        });

    }

})

<navigation-bar title="Weixin" back="false"color="black" background="#FFF">

</navigation-bar>

<scroll-view class="scrollarea" scroll-y type="list">

    <view class="container"

          Weixin

    <view>

    <button bind:tap="demo" data-name="小程序"

            data-info-age="16">单击更新数据</button>

    <view></view><view></view>

    </view>

    </view>

</scroll-view>

例题，自定义属性 data- /setData，3.2 案例

numBtn:function(e) {

// 点击数字按钮，获取对应的数字，将其值赋给 num

    var num = .target.dataset.val

if(this.resultFlag){ 

    // 如果当前使用 = 计算了，则重置

    this.reset()

console.log('numbtn1',this.numChangeFlag,this.targetnum,this.numl,this.num2);

    if(this.numChangeFlag){

        this.numChangeFlag = false

        this.execFlag= true 

        // 代表已输入第 2 个数字

        this.data.num ='0’

        // 将 num 设为 0，避免数字进行拼接

        this.targetnum ='num2'

        // 将 target 切换到第 2 个数

    }

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

例题，条件渲染，3.1 知识点

<view wx:if="false">单独view1</view>

<view wx:elif="false">单独view2</view>

<view wx:else>单独view3</view>

<block wx:if="">

<view>第1个</view>

<view>第2个</view>

</block>

<text hidden="">文本hidden</text>

Page({

    data:{

        msg:'hello',

        flag:1,

        hid:1,

    }

num1:0，// 保存第 1 个数字

    onLoad:function(){

       console.log(this.num1);console.log(this.data.msg);

       //console.log (this.msg);   // 报错

       console.log('onload');

},

    onPullDownRefresh:function(){

        console.log('onPullDownRefresh');

        this.setData({

            msg:'hello world'

            //num1:42 无效

        });

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

例题，列表渲染 / 网络请求 / 信息框，3.3 知识点 / 案例

<view wx:for=""wx: key="*this">                

</view>

<viel>-----------</view>

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

     --  -- 

</view>

<viel>-----------</view>

<view wx:for="" wx:for-item="item2"

      wx : for-index="index2" wx:key="id">

    ----

</view>

<view>--------</view>

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

    ,,

</view>

<view>

<button bind:tap="sload">showLoading--持续1秒</button><button bind:tap="sload2">showLoading--持续3秒</button>

</view>

Page({

    data:{

        arr:['a

        list:[

             {message:'梅',id:1},

             {message:'兰',id: 2},

             {message:'竹',id:3},

             {message:'菊',id:4}

     },

     contract:[]

onLoad:function(){

    console.log('页面加载')

    this.getContract()

},

getContract:function(){

    wx.request({

        url:"http://127.0.0.1:3000/data2'

        method:'GET'

        data:{}

<view>

<button bind:tap="sload">showLoading--持续1秒</button><button bind:tap="sload2">showLoading--持续3秒</button><button bind:tap="stoast">wx.showToast</button>

</view>

sload(){

    wx.showLoading({

        title:'加载框'

        duration:1000 // 默认 1500 毫秒

    })

}

sload2(){

    wx.showLoading({

        title:'加载框'                   

        setTimeout(function(){

        wx.hideLoading()

    }，3000)

},

stoast(){

    wx.showToast({

        title:'提示框'

        duration:3000，// 默认 1500 毫秒

        icon:"error"// 默认为 successicon:

    })

},

例题，3.3 美食列表，上划 / 下拉

onPullDownRefresh:function(){

// 需要重置的数据

    Tthis.setData({

    shoplist:[]

    })

    this.listData.page = 1

    this.listData.total =0// 重新发起数据请求

    this.getshopList(()=>{

        wx.stopPullDownRefresh()

    })

}

onLoad(){

    console.log('页面加载，开始获取数据')

    this.getshopList()

},

// 上拉触底

onReachBottom:function(){

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

if(this.listData.page * this.listData.pagesize >= this.listData.total){

    // 没有下一页的数据了

    return wx.showToast({

        title:"数据加载完毕!

        icon:'none

    if(this.isLoading){

        return

    }

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

例题，登录 API, 能够运用 wx.login 方法实现用户登录 5.1

login: function(){

    wx.login({

        success:res =>{

            console.log('login code:'+ res.code)

            wx.request({                               url:'http://127.0.0.1:3000/login',

            method:'post'

            data :

            code: res.code

            success:res =>{

                        console.log('token:+ res.data.token)

           // 将 token 保存为公共 数据，用于在所有页面中共享 token

                        this.globalData.token = res.data.token

                        // 将 token 保存到数据缓存

                        wx.setStorage({

                        key:'token

                        data: res.data.token

                       })

        }

    })

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

例题，头像填写功能，能够实现头像选择和昵称填写 5.1

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

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

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

<button bindtap="credit">获取用户的积分</button>

<view style="text-align: center;" wx:if="">当前用户积分:</view>

例题，用 wx.navigateTo () 实现非标签页跳转

navigateTo:function(){

    wx .navigateTo({

        url:"/pages/target/target?id=1'

        success:()=>{

        console.log('跳转成功')

    },

        fail:()=>{

            console.log('跳转失败')

        }

        complete:()=>{

                console.log('跳转完成')

        }

})

}

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

# 简答题 重点范围

简答题 2 题 * 15=30 分

预测：

1. 简述使用画布 API 进行绘图的基本步骤。
2. 简述微信小程序中应用生命周期回调函数 onLaunch ()、onShow ()、onError ()、onHide () 和 onPageNotFound () 的作用。

分点答题，字迹清晰，逻辑清楚！

1. 简述 BackgroundAudioManager 实例的属性和方法。

   ①BackgroundAudioMauager 实例的常用属性包含 src（背景音频的数据源）、startTime（背景音频开始播放的位置）、title（背景音频标题）、duration（当前背景音频的长度）、currentTime（当前背景音频的播放位置）和 paused（当前是否暂停或停止）。

   ②BackgroundAudioMauager 实例的常用方法包含 play ()（播放背景音频）、pause ()（暂停背景音频）、seek ()（跳转到指定位置）和 stop ()（停止背景音频）。

2. 简述使用画布 API 进行绘图的基本步骤。

   ①获取 Canvas 实例

   ②通过 Canvas 实例获取 RenderingContext（渲染上下文）实例

   ③最后通过 RenderingContext 实例的属性和方法完成绘图操作。

3. 简述如何实现文件上传和文件下载。

   ①微信小程序提供了文件上传 API，通过调用 wx.uploadFile () 方法可以实现文件上传；

   ②同时也提供了文件下载 API，通过调用 wx.downloadFile () 方法即可使用文件下载 API。

4. 简述如何获取 Animation 实例。

   通过 wx.createAnimation () 方法可以获取 Animation 实例。

5. 简述微信小程序中应用生命周期回调函数 onLaunch ()、onShow ()、onError ()、onHide () 和 onPageNotFound () 的作用。

   1. onHide () 和 onPageNotFound () 的作用。

   （1）onLaunch ()：监听微信小程序初始化，微信小程序初始化完成时触发，全局只触发一次。

   （2）onShow ()：监听微信小程序启动或切前台，微信小程序启动或从后台进入前台时触发。

   （3）onError ()：错误监听函数，微信小程序脚本错误或者 API 调用报错时触发。

   （4）onHide ()：监听微信小程序切后台，微信小程序从前台进入后台时触发。

   （5）onPageNotFound ()：页面不存在监听函数，微信小程序要打开的页面不存在时触发。

6. 简述如何创建 WebSocket 连接。

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