微信小程序复习题

article/2025/5/14 20:03:07

文章目录

  • 填空题
  • 选择题
  • 判断题
  • 分析题(20)
    • 分析代码显示效果
  • 页面设计题(40)

填空题

  1. 微信小程序创始人是 张小龙 ,英文缩写 Mini Program
  2. 小程序是一种无需下载和无需安装即可使用的应用,它实现了应用“ 触手可得 ”的梦想,也体现了“ 用完即走 ”的理念
  3. 张小龙说过,小程序会取代市场上 80% 的APP
  4. 高频率、高时长 的服务并不太适合进驻微信小程序,比如直播、游戏、视频等
  5. 调试 Console 面板是后端控制台,在小程序编译或运行有误时会进行warning或e rror的信息提示;
  6. Sources 面板显示编译后的脚本文件;
  7. AppData 用于显示当前项目运行时小程序具体数据,实时地反映项目数据情况;
  8. Wxml 面板用于查看wxml 转化后的真实的页面结构以及属性;Storage 面板用于显示使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况;
  9. Network 面板用于观察和显示 request 和 socket 的请求情况
  10. 创建page时,可以在 app.json 文件中 属性里添加对应的页面路径
  11. app.json 是小程序全局配置文件, app.js 是小程序主体逻辑,app.wxss 是全局样式表
  12. 一个page通常包含四种文件,js 是页面逻辑文件,wxml 是页面结构文件,json 是页面配置文件,wxss 是页面样式表文件
  13. entryPagePath 用于指定小程序的默认启动路径(首页),如果不填,将默认为 pages列表第一项
  14. 生命周期函数 onLoad 在页面创建时执行的第一个函数, onUnload 函数在页面销毁时执行
  15. 生命周期函数 onShow 在页面出现在前台时执行,生命周期函数 onHide 在页面从前台变为后台时执行
  16. 微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置
  17. 通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面,最少 2 个,最多 5
  18. 使用 wx.setStorage 设置本地缓存时,单个 key 允许存储的最大数据长度为 1 MB,所有数据存储上限为 10 MB
  19. Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性,通过“ display:flex ”指定为Flex布局
  20. swiper 是用于显示轮播图的滑块视图容器,其中只可放置 < swiper-item > 组件,否则会导致未定义的行为
  21. WXML 提供两种文件引用方式,即 importinclude
  22. 微信小程序事件绑定的两种方法: bindcatch
  23. 微信小程序事件分为 冒泡事件非冒泡事件
  24. 调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,页面栈最多 10
  25. 开发者可以通过 app.json 文件里的字段 permission 设置小程序接口权限
  26. 通过 networkTimeout 可配置各类网络请求的超时时间,单位均为 毫秒

选择题

  1. 在调用wx.getLocation获取位置时,需要通过app.json里的字段permission设置以下小程序接口权限: B
    A.scope.userInfo
    B.scope.userLocation
    C.scope.address
    D.scope.userLocationBackground

  2. 以下哪种不属于networkTimeout可配置项 B
    A、request、B、 Socket、C 、uploadFile、D、downloadFile

  3. WXML列表渲染wx:for中,可以通过以下关键字指定循环变量:B
    A、wx:item
    B、wx:for-item
    C、wx:index
    D、wx:for-index

  4. 样式定义的三种方式,1-类class,2-内联样式style,3-组件名,以下排序正确的:A
    A、Style>class>组件名
    B、Style>组件名>class
    C、组件名>class>Style>
    D、class>Style>组件名

  5. 以下哪种不属于小程序回调函数 D
    A、success、B fail、C complete、D error

  6. 页面启动时页面生命周期函数执行顺序:B
    A、onShow->onLoad->onReady
    B、onLoad -> onReady -> onShow
    C、onLoad ->onShow ->onReady
    D、onShow -> onReady -> onLoad

  7. 以下哪个不是正确的小程序入口 B
    A、微信对话分享进入
    B、点击url地址进入
    C、扫码进入
    D、附近小程序

  8. 在小程序的其他JS文件中均可以使用全局的函数获取小程序实例 A
    A、getApp()
    B、getGlobalApp()
    C、App()
    D、new APP()

  9. 以下哪个不是正确的小程序入口 B
    A、微信对话分享进入
    B、点击url地址进入
    C、扫码进入
    D、附近小程序

  10. 小程序对于服务器返回值使用的是何种编码方式? C
    A、GB2312
    B、GBK
    C、UTF-8
    D、Unicode

  11. 小程序网络API在发起网络请求时使用何种格式的文本进行数据交换? B
    A、XML
    B、JSON
    C、TXT
    D、PHP

  12. 以下哪个域名符合小程序网络请求的域名配置要求? C
    A、https://localhost
    B、http://www.test.com
    C、https://www.test.com
    D、https://210.45.192.101

  13. 已知网络请求时url参数值是https://www.test.com, data参数值是key:‘123456’,以及location:‘shanghai’,那么用浏览器模拟测试时地址栏需要输入以下何种内容? A
    A、https://www.test.com?key=123456&location=shanghai
    B、https://www.test.com?key=123456,location=shanghai
    C、https://www.test.com/key=123456&location=shanghai
    D、https://www.test.com/key=123456,location=shanghai

  14. 在wx.request中的success称为回调函数。关于回调函数,以下说法不正确的是? B
    A、当接口调用失败时,进入fail回调函数
    B、只有statusCode为200时,才进入success回调函数
    C、只要成功接收到服务器返回,无论statusCode是多少,都会进入success回调函数。
    D、无论接口调用成功与否,都可以进入complete回调函数

  15. 视频组件的哪个属性可以用于自动播放? C
    A、controls
    B、loop
    C、autoplay
    D、enable-danmu

  16. 如何指定视频播放的来源? C
    A、视频组件的source属性值
    B、视频组件的id属性值
    C、视频组件的src属性值
    D、视频组件的name属性值

  17. InnerAudioContext 实例,可通过 wx.createInnerAudioContext 接口获取,以下哪个方法可以实现跳转到指定位置播放音乐 D
    InnerAudioContext.play()
    InnerAudioContext.pause()
    InnerAudioContext.stop()
    InnerAudioContext.seek(position)

  18. 在数据API中,wx.getStorageSync的后缀Sync代表什么含义? A
    A、同步的
    B、异步的
    C、无意义
    D、都不正确

  19. 以下哪个可以用于清空全部数据? D
    A、wx.deleteStorage
    B、wx.flushStorage
    C、wx.removeStorage
    D、wx.clearStorage

  20. 小程序使用以下哪种方法获取当前地理位置信息? A
    A、wx.getLocation
    B、wx.gainLocation
    C、wx.catchLocation
    D、wx.chooseLocation

  21. 以下哪个方法用于打开地图查看指定的位置? A
    A、wx.openLocation
    B、wx.checkLocation
    C、wx.readLocation
    D、wx.findLocation

  22. 以下哪个方法用于获取系统剪贴板的内容? B
    A、wx.setClipboardData(OBJECT)
    B、wx.getClipboardData(OBJECT)
    C、wx.gainClipboardData(OBJECT)
    D、wx.captureClipboardData(OBJECT)

  23. 小程序使用wx.getNetworkType(OBJECT)获取网络类型,以下哪个不属于获取的网络类型有效值? A
    A、null
    B、none
    C、wifi
    D、5g

  24. 以下哪个方法可以用于长时间监听罗盘数据? C
    A、wx.listenCompass(OBJECT)
    B、wx.startCompass(OBJECT)
    C、wx.onCompassChange(CALLBACK)
    D、wx.stopCompass(OBJECT)

判断题

  1. 微信小程序能够取代市场上全部的APP
  2. wx.clearStorage() 可以同步清理本地数据缓存
  3. WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方采用import调用
  4. Import和Include均可以引入模板
  5. wx.setStorageSync(KEY,DATA)将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口
  6. 页面之间可以使用URL进行参数传递,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2
  7. template组件可以绑定事件
  8. wx.navigateTo()可以跳到 tabbar 页面
  9. bind 事件绑定会阻止冒泡事件向上冒泡
  10. 调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会
  11. App() 必须在 app.js 中调用,必须调用且只能调用一次,不然会出现无法预期的后果
  12. 组件节点中可以附加一些自定义数据,这些自定义数据以 data- 开头,多个单词由连字符-连接, 在js中使用dataset获得附加属性值
  13. 调用 redirectTo 跳转时,会关闭当前页面
  14. 调用wx.switchTab跳转到 tabBar 页面时,路径可以带参数
  15. touchstart、touchmove、touchcancel、touchend、tap都属于冒泡事件

分析题(20)

分析代码显示效果

<view class="flex-wrp" style="flex-direction:column;"><view class="flex-item bg_A">A</view><view class="flex-item bg_B">B</view><view class="flex-item bg_C">C</view>
</view>
.flex-wrp{margin-top: 60rpx;display:flex;flex-direction:row}.flex-item{width: 200rpx;height: 300rpx;font-size: 26rpx;}.bg_A{background-color: #1AAD19;}.bg_B{background-color: #2782D7;}.bg_C{background-color: #F1F1F1;}

在这里插入图片描述

在这里插入图片描述

<!--index.wxml-->
<view class="container"><view id="outer" bindtap="out">outer view<view id="middle" bindtap="middle">middle view<view id="inner" bindtap="inner">inner view</view></view></view>
</view>
Page({//事件处理函数out: function (e) {console.log("--out bindtap click")},middle: function (e) {console.log("--middle bindtap click")},inner: function (e) {console.log("--inner bindtap click")}})

在这里插入图片描述

点击out view打印出⼀条log , --out bindtap click
点击middle view打印出两条log, --middle bindtap click --out bindtap click
点击innew view打印出两条log, --inner bindtap click --middle bindtap click --out bindtap click

冒泡事件的不同绑定方式
在这里插入图片描述

页面设计题(40)

在这里插入图片描述
需要使用那些组件?

<view class="music-player"><view class="mp-btns"><view wx:if="{{isplay==false}}" class="mp-cover " bindtap='play'>></view><view wx:if="{{isplay==true}}" class="mp-cover-rotate" bindtap='stop'></view></view><view class="mp-slider"><slider value="{{myAudioPos}}" bindchange="hanle_slider_change"></slider><view class="current-time">{{myAudioCurrent}}</view><view class="duration-time">{{myAudioDuration}}</view></view>
</view>

在这里插入图片描述

<form bindsubmit="formSubmit" bindreset="formReset"><view class="section section_gap"><view class="section__title">是否公开信息</view><switch name="isPub" /></view><view class="section"><view class="section__title">⼿机号</view><input name="phone" placeholder="⼿机号" /></view><view class="section"><view class="section__title">密码</view><input name="pwd" placeholder="密码" password /></view><view class="section section_gap"><view class="section__title">性别</view><radio-group name="sex"><label><radio value="" checked /></label><label><radio value="" /></label></radio-group></view><view class="btn-area"><button formType="submit" type="primary">提交</button><button formType="reset">重置</button></view>
</form>
<view wx:if="{{isSubmit}}">{{warn ? warn : "是否公开信息:"+isPub+",⼿机号:"+phone+",密码:"+pwd+",性别:"+sex}} </view>
let app = getApp();
Page({data: {isSubmit: false,warn: "",phone: "",pwd: "",isPub: false,sex: "男"},formSubmit: function (e) {console.log('form发⽣了submit事件,携带数据为:', e.detail.value);let {phone,pwd,isPub,sex} = e.detail.value;this.setData({warn: "",isSubmit: true,phone,pwd,isPub,sex})if (!phone || !pwd) {this.setData({warn: "⼿机号或密码为空!",isSubmit: true})return;}},formReset: function () {console.log('form发⽣了reset事件')}
})
wx.request({url: url,data: data,method: method,success: function (res) {},fail: function () {},complete: function () {wx.hideLoading();}
})

在这里插入图片描述

<template name="postItemTpl"><view class="post-container"><view class="post-author-date"><image src="{{avatar}}" /><text>{{date}}</text></view><text class="post-title">{{title}}</text><image class="post-image" src="{{postImg}}" mode="aspectFill" /><text class="post-content">{{content}}</text></view>
</template>
<import src="post-item/post-item-tpl.wxml" />
<view><swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000" circular="true"><swiper-item><image src="/images/post/post-1@text.jpg" data-post-id='3' /></swiper-item><swiper-item><image src="/images/post/post-2@text.jpg" data-post-id='4' /></swiper-item><swiper-item><image src="/images/post/post-3@text.jpg" data-post-id='5' /></swiper-item></swiper><block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx"><view catchtap="onTapToDetail" data-post-id="{{item.postId}}"><template is="postItemTpl" data="{{...item}}" /></view></block>
</view>
// pages/detail/detail.js
Page({
data: {docId: 0},
onLoad: function (options) {
var docId = options.docId
}
})
onTapToDetail(event) {
var postId = event.currentTarget.dataset.postId;
console.log(postId);
wx.navigateTo({
url: 'post-detail/post-detail?id=' + postId,
})
},
var postList = [
{
date: "Jan 29 2017"
,
title: "记忆⾥的春节"
,
postImg: "/images/post/post-1.jpg"
,
avatar: "/images/avatar/avatar-3.png"
,
content: "年少时,..."
},
{
date: "Jan 9 2017"
,
title: "从童年呼啸⽽过的⽕⻋"
,
postImg: "/images/post/post-5.jpg"
,
avatar: "/images/avatar/avatar-1.png"
,
content: "⼩时候,家的后⾯有⼀条铁路..."
}
]

http://chatgpt.dhexx.cn/article/LSkHCDck.shtml

相关文章

小程序获取附近IBeacon设备

实现逻辑&#xff1a; 该功能实现需要使用以下API&#xff1a; wx.startBeaconDiscovery(OBJECT)&#xff1a;开始搜索附近的iBeacon设备 wx.stopBeaconDiscovery(OBJECT)&#xff1a;停止搜索附近的iBeacon设备 wx.onBeaconUpdate(CALLBACK)&#xff1a;监听 iBeacon 设备…

微信小程序面试题大全

1、简述微信小程序的相关文件类型&#xff1f; WXML 搭建页面的结构WXSS 页面样式文件js 逻辑处理&#xff0c;网络请求json 配置当前页面标题和引入组件等app.js 可以在里边监听生命周期函数、声明全局变量app.json 小程序的全局配置&#xff08;页面路径、网络超时时间、底部…

微信小程序常见问题汇总

1、如何避免微信小程序中 app.js中 onshow事件的n次触发的问题? 问题 在开发中&#xff0c;遇到了一个小难题&#xff0c;就是app.js中 onshow事件总是会因调用其它API而触发&#xff0c;例如:wx.chooseImage&#xff0c;wx.makephonecall、wx. previewImage等。 解决办法 目…

怪兽充电小程序

第一首先看中心点上有个小图标 实现方式&#xff0c;我们可以使用map 结合一个图片覆盖物实现&#xff0c;在结合定位 <map id"myMap" show-locationenable-poienable-building :latitude"latitude":longitude"longitude":markers"marke…

扫盲篇 | 你真的懂附近的小程序吗?

“附近的小程序”功能是指用户进入微信小程序界面以后,可以直接看到所在地周围5公里左右的所有“小程序”。 包括实体店,服务店,商场等,微信小程序上线之初就曾提及该功能,而它几乎成了零售领域最期待的一项功能。 所以许多行业人士指出,小程序会给零售行业发展带来巨大…

有哪些常见的微信小程序推广引流方法?

如何对小程序进行推广引流。只有如此&#xff0c;才能为小程序获取到更多忠实用户&#xff0c;使小程序实现更大的价值。今天就为大家介绍一下微信小程序常见有效的推广方式。 1、附近的小程序&#xff08;免费&#xff09; 在小程序后台&#xff0c;开通“附近的小程序”&am…

微信附近的人小程序怎么开(开通附近小程序的方法)

1、进入微信公众号平台进入&#xff0c;输入小程序账号和密码&#xff0c;点击登录&#xff1b; 2、在左侧菜单中找到“附近的小程序”&#xff0c;点击开通。&#xff08;个体小程序不支持开通&#xff09; 3、验证管理员身份后按照要求填写资料&#xff0c;点击定位&#xf…

C语言/C++初学 问题

编程及C/C初学者 FAQ 本文原为本人在论坛所发若干帖&#xff0c;意在集中解决新手学习C/C语言时将遭遇到的各类问题&#xff0c;网友反馈情况良好&#xff0c;集合修订后作为个人作品贴于此处。 本贴主要分析概念原理和解决方案&#xff0c;不讨论具体程序语法&#xff0c;立足…

matlab2c使用c++实现matlab函数系列教程-randint函数

全栈工程师开发手册 &#xff08;作者&#xff1a;栾鹏&#xff09; matlab2c动态链接库下载 matlab库函数大全 matlab2c基础教程 matlab2c开发全解教程 matlab2c调用方法&#xff1a; 1、下载动态链接库 2、将Matlab2c.dll拷贝到exe同目录下 3、将Matlab2c.h、Matlab2c.lib放…

MATLAB只randint函数

srandint(M,N,range); 生成MxN的矩阵&#xff0c;矩阵中元素的取值为小于range的整数。 M4; N3; range3; srandint(M,N,range) 注意&#xff1a; randi函数生成元素取值为1&#xff1a;M的N*range的矩阵。

python中randint_python中randint函数的用法是什么?_后端开发

php的数据库怎么安装?_后端开发 安装步骤:1、在官网上下载数据库软件,然后双击下载好的数据库软件,打开后点击右下角的“下一步”,选择第一个选项“我接受”;2、默认勾选所有插件;3、选择安装数据库位置,点击“安装”;4、点击“完成”,这时php数据库就安装成功了。 …

Random.Randint 函数--Numpy

Numpy.Random.Randint 函数功能&#xff1a; Return random integers from low (inclusive) to high (exclusive)。 Return random integers from the “discrete uniform” distribution of the specified dtype in the “half-open” interval [low, high). If high is None…

Random库中的8个函数

random库包括两类函数&#xff0c;常用共8个 基本随机函数&#xff1a;seed() 、random()&#xff1b;扩展随机函数&#xff1a;randint()、getrandbits()、uniform()、randrange()、choice()、shuffle() 基本随机函数&#xff1a; seed()函数&#xff1a;初始化给定的随机数…

maven下载安装及IDEA配置、使用maven导出项目jar包并部署到服务器上

目录 1.下载安装 2.增加maven镜像仓库和修改仓库下载位置 镜像配置 修改仓库下载位置 3.小试&#xff1a;在idea中创建一个新maven项目 4.IDEA上配置maven 5.maven导出项目jar包 6.导出的项目jar包部署到服务器上 1.下载安装 &#xff08;1&#xff09;进入下载地址Ma…

maven的下载安装配置教程

maven的下载安装配置教程&#xff08;详细图文&#xff09; **各有各的选择&#xff0c;这也是一种过程**想要实现一个优秀的项目&#xff0c;光靠自己一个码农是很难的&#xff0c;我们需要引入别人已经集成好的类包来帮助我们优化项目&#xff0c;这个时候就需要使用maven了。…

Maven 的下载安装教程

Maven 3.6.3 下载安装教程 笔者的环境&#xff1a; JDK 13.0.2 Maven 3.6.3 IntelliJ IDEA 2020.1.2 (Ultimate Edition) 在继续阅读本教程之前&#xff0c;需要先完成 JDK 的安装。关于 JDK 的安装&#xff0c;可见笔者的另一篇博客&#xff1a; Java 的下载安装教程&…

Maven的下载安装与使用(idea)

Maven是什么 Maven是一款服务于Java平台的自动化构建工具。Maven 作为 Java 项目管理工具&#xff0c;它不仅可以用作包管理&#xff0c;还有许多的插件&#xff0c;可以支持整个项目的开发、打包、测试及部署等一系列行为。 传统工程我们直按把jar包放置在项目中&#xff0c; …

maven下载安装配置远程本地仓库

一、简介 maven最主要体现在两个词上&#xff1a;项目和管理。maven给我们整个开发团队找出了一种能够更加科学的去管理我们项目的思想。maven通过使用配置文件的方式使得项目在管理和交接的过程中成本变得非常低。maven提出了一种叫做maven仓库的概念,使得我们可以将第三方和我…

maven 下载安装及配置

Maven 下载及配置 1.Maven 下载 Maven官网地址&#xff1a;https://maven.apache.org/download.cgi 1.1 进入Maven官网&#xff0c;点击 archives 1.2 选择你需要的版本点击下载&#xff0c;此处以3.6.2示例1.3 找到下载的压缩包&#xff0c;并解压2.配置环境变量 2.1 首先在…

maven下载安装

1、下载maven maven官网下载地址&#xff1a; https://maven.apache.org/download.cgi 2、将下载好的 maven压缩包 解压到自己要安装的目录 3、给maven配置环境变量 3.1、 3.2、 3.3、添加系统变量 添加MAVEN_HOME变量 添加M2_HOME变量 因为在springboot中引用到该路径&#…