【期末复习】微信小程序复习大纲_在页面结构渲染过程中,通过 控制属性完成页面的条件渲染

前言：

        这周开始进入期末复习周，没时间看C/C++、linux等知识了，先把期末考试必考的知识捋一遍。

目录

第一章        微信小程序入门

一、填空题

二、判断题

三、选择题

四、简答题

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

一、填空题

二、判断题

三、选择题

四、简答题

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

一、填空题

二、判断题

三、选择题

四、简答题

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

一、填空题

二、判断题

三、选择题

四、简答题

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

一、填空题

二、判断题

三、选择题

四、简答题

---

第一章        微信小程序入门

一、填空题

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

二、判断题

• 在微信小程序中，AppID是每个小程序的唯一标识，每个小程序账号只有一个AppID.（√  ）
• 微信小程序项目中app.js文件是全局样式文件。（ × ）

解析：在微信小程序项目中，app.js文件是小程序的全局逻辑文件，用于定义小程序的全局行为和生命周期函数。全局样式文件是app.wxss文件。

• 通常称微信客户端为微信小程序提供的环境为微信小程序的宿主环境。（ √  ）
• 微信小程序具有无须安装、触手可及、用完即走、无须卸载等特点。（ √  ）
• 项目成员表示参与微信小程序开发、运行的成员。（√ ）

三、选择题

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

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

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

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

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

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

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

        C.体积大                     D.入口丰富

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

         A.Wxml                          B.Console

        C.Sources                     D.Network

解析：

Console面板是微信开发者工具中的一个调试工具，用于显示小程序的输出信息、错误信息等。

        此外，Wxml面板用于查看页面结构和属性，Sources面板用于显示脚本文件，Network面板用于观察和显示接口的请求情况

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

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

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

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

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

解析：

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

app.json是全局配置文件，主要用于配置小程序的全局属性、页面路径、窗口样式等。而sitemap.json是页面配置文件，用于配置小程序的页面路径、页面的标题、页面是否允许分享等。

拓展知识：

• .wxml文件用于描述小程序页面的结构和布局。
• .wxss文件用于定义小程序页面的样式。
• .json文件用于配置小程序的全局配置和页面配置。
• .js文件用于编写小程序的逻辑代码。

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

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

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

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

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

四、简答题

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

        1️⃣无需安装和卸载，通过微信即可直接使用。

        2️⃣体积小，加载速度快。

        3️⃣便于分享和传播，通过微信社交网络进行。

        4️⃣支持丰富的API，可以访问手机硬件等。

        5️⃣有利于快速迭代和更新，因为所有用户都使用服务器上的最新版本。

2.请简述微信小程序开发环境的搭建。

1️⃣注册微信小程序账号，并获取AppID。

2️⃣下载并安装微信开发者工具。

3️⃣在开发者工具中创建新的小程序项目，输入AppID。

4️⃣设置项目目录结构，包括添加页面、配置文件等。

5️⃣编写代码和设计界面。

6️⃣使用开发者工具进行

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

一、填空题

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

二、判断题

• 给父元素设置display:flex后，可以使用flex的相关属性，例如通过flex-direction属性设置主轴方向。（ √ ）
• 微信小程序中样式文件为WXSS文件，只支持rpx一种尺寸单位。（ × ）

解析：

微信小程序中的样式文件是WXSS文件，但是支持多种尺寸单位，包括rpx、px、vw、vh等。其中，rpx是相对长度单位，可以根据屏幕宽度进行自适应布局。

• swiper组件可以实现页面的轮播图效果。（ √ ）
• video组件专门用于播放音频。（ × ）

解析：video组件是微信小程序中用于播放视频的组件，可以播放视频文件，而非专门用于播放音频文件。对于音频文件的播放，可以使用audio组件。

三、选择题

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

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

解析：

A. app.js - 这个文件是微信小程序的入口文件，主要用于定义全局变量和配置小程序的生命周期函数等，但它不是用于配置页面地址的文件。

C. app.wxss - 这个文件用于定义微信小程序项目的全局样式，而不是用于配置页面地址。

D. project.config.json - 这个文件主要用于微信开发者工具的项目配置，包括项目名称、路径、编译配置等，但它也不是专门用于配置页面地址的文件。

正确答案：B

app.json文件是一个全局配置文件，用于配置小程序的所有页面路径、窗口外观、界面表现以及底部tab等

具体来说，app.json 文件中的内容可以控制小程序的界面表现，如窗口背景色、默认标题等。此外，它还可以定义小程序页面的路径和页面结构。

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

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

A、B、C均为表单组件

A. input组件 - 这是一个文本输入框组件，用户可以输入文本信息，它属于表单组件。

B. checkbox组件 - 这是一个复选框组件，用户可以通过勾选来选择某个选项，它也是表单组件的一部分。

C. form组件 - 这是表单的容器组件，用于包裹其他表单组件，并处理表单的提交事件，显然它属于表单组件。

正确答案是：D

D. swiper组件 - 这是一个轮播图组件，用于展示一系列图片或内容，并允许用户通过滑动来切换显示的内容。这个组件主要用于界面布局和展示内容，而不是用于收集用户输入，因此它不属于表单组件。

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

A.display:flex;

B.flex:1;

C.float:left;

D.flex-flow:column nowrap;

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

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

四、简答题

1.简述WXML和HTML的区别。

答：

• WXML是微信小程序的标记语言，专门用于微信小程序的界面布局。

• WXML具有数据绑定和事件处理的功能，这些特性在HTML中通常需要配合JavaScript来实现。

• WXML中使用wx:if、wx:for等特有的指令，而HTML中没有这些指令。

2.简述WXSS和CSS的区别。

• WXSS是微信小程序的样式表语言，类似于CSS，但专用于微信小程序。

• WXSS支持尺寸单位rpx（响应式像素），而CSS不支持rpx。

• WXSS可以引用全局样式和局部样式，而CSS通常不区分全局和局部样式。

3.简述Flex布局的概念。

• Flex布局是一种CSS布局模式，用于提供一个更加有效的方式来布置、对齐和分配容器内项目的空间，即使项目大小未知或是动态变化的。

• Flex布局主要包括容器（flex container）和项目（flex items）。

• Flex布局可以方便地控制项目的排列方向、对齐方式、顺序等，非常适用于响应式设计。

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

一、填空题

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

二、判断题

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

三、选择题

1.下列选项中，关于列表渲染说法正确的是（ C ）。
A.wx:for-index可以用于重新定义当前项的变量名
B.在列表渲染中，可以使用item变量获取当前项的值
C.wx:for可以用于实现页面中的列表渲染
D.wx:for-item可以用于设置当前索引变量的属性名

解析:

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

在微信小程序中，用于实现列表渲染的正确选项是：

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

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

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

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

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

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

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

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

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

A.  title、icon和mask

B.  success、fail和title

C.  duration、mask和success

D.  success、fail和complete

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

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

四、简答题

一、简述页面生命周期函数包括哪些。

• onLoad(options): 监听页面加载，通常用于获取页面启动时的参数。

• onReady(): 监听页面初次渲染完成，此时页面已经准备好，但可能还在加载子组件。

• onShow(): 监听页面显示，页面出现在前台时调用。

• onHide(): 监听页面隐藏，当页面从前台转到后台时调用。

• onUnload(): 监听页面卸载，当页面被关闭时调用。

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

wx:if 是遇 true 显示，hidden 是遇 false 显示。

wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

wx:if有更高的切换消耗。hidden 有更高的初始渲染消耗

所以：

如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候它都会渲染，每次隐藏的时候，它都会销毁，用hiden更好。

如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。

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

1. 在小程序的.json配置文件中设置 "enablePullDownRefresh": true 启用下拉刷新。
2. 在页面的JS文件中使用 onPullDownRefresh() 函数监听下拉动作。
3. 完成数据刷新等操作后，调用 wx.stopPullDownRefresh() 函数停止下拉刷新。

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

• 在页面的JSON配置中设置滚动区域的高度，并确保内容可以滚动。

• 使用页面的 onReachBottom() 生命周期函数来监听用户上拉触底的行为。

• 在 onReachBottom() 函数中实现加载更多数据的逻辑，如分页加载等。

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

一、填空题

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

二、判断题

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

三、选择题

1.下列选项中，用于滑动选择某一个值的组件是（ B ）。
A. view B. slider C. input D. audio

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

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

3.下列关于canvas组件的说法中，错误的是（ D ）。
A.CSS动画对canvas组件无效
B.canvas-id是canvas组件的唯一标识符
C.canvas组件用于自定义绘制图形
D.在同一个页面中，canvas-id是唯一的

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

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

        B.pause()方法表示暂停录音

        C.resume()方法表示继续录音

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

解析：

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

四、简答题

1.BackgroundAudioManager实例的属性和方法包括：

• 属性：如src（音频的数据源），startTime（音频开始播放的位置），duration（音频总时长），volume（音量大小）等。
• 方法：如play（播放），pause（暂停），stop（停止），seek（跳转到指定位置），onPlay（监听播放事件），onStop（监听停止事件）等。

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

• 创建Canvas上下文：通过wx.createCanvasContext获取canvas的绘图上下文。
• 绘图指令：使用绘图上下文提供的方法进行绘图，如drawRect、drawCircle等。

• 将绘制的内容显示在Canvas上：通过调用上下文的draw方法将内容渲染到画布

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

• 文件上传：使用wx.uploadFile方法。需要指定上传的文件路径、服务器的接收地址等参数。
• 文件下载：使用wx.downloadFile方法。需要提供文件的网络地址，成功下载后会返回文件的临时路径，可以进行进一步的操作，如保存到相册等。

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

一、填空题

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

二、判断题

1. 在微信小程序中,调用wx.login()方法可以获取临时登录凭证code。(√)
2. 同一个微信用户在AppID不同的微信小程序中的openid是不同的。(√)
3. openid是微信小程序的唯一标识。( × ) 
4. 使用wx.setStorageSync()方法可以将数据同步存储在本地缓存指定的key中。(√)
5. animation.export()方法每次调用后仍保留之前的动画操作。(×)
6. 使用require(路径)函数引入模块代码时,不可以使用绝对路径。( × ) 
7. 使用‌wx.navigateTo()方法不能跳转到标签页。(√) ！
8. <block>标签不会在页面中做任何渲染。(√)
9. wx.showLoading()方法用于显示加载提示。(√)
10. 在使用wx:for实现页面列表渲染时,key表示每一项的唯一标识。(√)

解析：第7

wx.navigateTo()方法只能跳转到普通页面而无法跳转到标签页。若需要跳转到标签页，应该使用wx.switchTab()方法。 

三、选择题

1.下列选项中，用于实现非标签页之间的跳转的方法是（ A ）。
A.wx.navigateTo()
B.wx.navigate()
C.wx.navigatorTo()
D.wx.navigator()

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

A. longitude为中心经度

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

C. latitude为中心纬度

D. markers为标记点数组

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

A.openid是用户的唯一标识

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

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

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

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

A.title标注点名称

B.zIndex表示显示层级

C.alpha表示标注的透明度

D.userInfo表示用户信息对象

解析：

A.title标注点名称、B.zIndex表示显示层级、C.alpha表示标注的透明度都是正确的说法。

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选项的描述是错误的。

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

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

7.下列选项中，关于swiper组件的用法描述错误的是（ A ）。

A．若indicatorDots属性设置为false，则显示面板指示点

B．autoplay属性用于设置图片是否自动切换

C．interval属性用于设置自动切换的时间间隔

D . duration属性用于设置滑动动画时长

解析：

若indicatorDots属性设置为false，则不显示面板指示点所描述是错误的。

8.下列关于wx.request()方法常见选项的说法中，正确的是（ B ）。

A．method为HTTP请求方式，默认值为POST

B．url为开发者服务器接口地址

C．complete()回调函数只有在调用成功之后才会执行

D．responseType为返回的数据格式，默认值为json

9.下列关于Flex布局的说法中，错误的是（ B ）。

A．行内元素也可以使用Flex布局

B．设为Flex布局以后，子元素的float属性依然起作用

C．任何一个容器都可以指定为Flex布局

D．采用Flex布局的元素，称为Flex容器

解析：

在Flex容器中，子元素的float属性是不起作用的。

四、简答题

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

• 使用 wx.createAnimation 方法创建一个动画实例。可以传入一个配置对象，指定动画的持续时间、延迟等。

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

• onLaunch(): 当小程序初始化完成时触发，全局只触发一次。

• onShow(): 当小程序启动，或从后台进入前台显示时触发。

• onHide(): 当小程序从前台进入后台时触发。

• onError(): 当小程序发生脚本错误或者API调用失败时触发。

• onPageNotFound(): 当小程序要打开的页面不存在时触发。

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

1. 使用 wx.connectSocket 方法创建WebSocket连接。需要指定要连接的WebSocket服务器地址。
2. 通过监听 wx.onSocketOpen, wx.onSocketError, wx.onSocketMessage, 和 wx.onSocketClose 事件来管理WebSocket

4.简述微信小程序中实现页面之间切换的wx.navigateTo()、wx.redirectTo()和wx.switchTab()方法的区别。

wx.navigateTo()跳转到应用内某个页面，保留当前页面；

wx.redirectTo()跳转到应用内某个页面，关闭当前页面；

wx.switchTab()跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

5.简述微信小程序的登录流程

1. 用户进入小程序，点击登录按钮或需要登录的功能。
2. 小程序调用wx.login方法获取用户临时登录凭证code。
3. 小程序将code发送给开发者服务器。
4. 开发者服务器收到code后，调用微信接口服务校验登录凭证，获取用户的openid和session_key。
5. 开发者后台服务器将获取到的openid和session_key保存，并生成一个自定义登录态token，将token返回给小程序。
6. 小程序将token保存在本地，并将token发送给开发者服务器。

        如有错误，欢迎指正，感谢来访