小程序开发试题及答案

小程序开发试题及答案一、选择题（每题5分，共25分）1.小程序中，应用级生命周期函数执行顺序正确的是（）A.onLaunch→onShow→onHideB.onShow→onLaunch→onHideC.onLaunch→onHide→onShowD.onShow→onHide→onLaunch答案：A解析：小程序启动时先触发`App({})`中的`onLaunch`（全局只执行一次），应用进入前台时触发`onShow`，进入后台时触发`onHide`，因此顺序为`onLaunch→onShow→onHide`。2.页面级生命周期函数中，页面加载完成（首次渲染完成）时触发的函数是（）A.onLoadB.onShowC.onReadyD.onUnload答案：C解析：`onLoad`在页面加载时触发（参数传递），`onShow`在页面显示时触发（可能多次），`onReady`在页面初次渲染完成时触发（此时可操作DOM），`onUnload`在页面卸载时触发。3.小程序中，WXML数据绑定的正确语法是（）A.{{data}}B.[[data]]C.{data}D.[data]答案：A解析：小程序使用Mustache语法（双大括号）进行数据绑定，用于插值、属性绑定、逻辑判断等场景。4.小程序WXSS中，用于实现屏幕自适应的单位是（）A.pxB.rpxC.emD.vh答案：B解析：rpx（响应式像素）是小程序特有的单位，默认以750rpx为屏幕宽度，1rpx=屏幕宽度/750，可自动适配不同尺寸屏幕；px为固定像素，em基于字体大小，vh为视窗高度百分比。5.以下哪个是小程序异步网络请求API？（）A.wx.showToastB.wx.requestC.wx.setStorageSyncD.wx.navigateTo答案：B解析：`wx.request`是异步网络请求API（需配置合法域名）；`wx.showToast`是提示弹窗（同步），`wx.setStorageSync`是同步存储API，`wx.navigateTo`是路由跳转（同步）。二、简答题（每题10分，共30分）1.简述WXML与HTML的核心区别。答案：（1）标签集不同：WXML仅支持小程序内置组件（如`view`、`text`）及自定义组件，不支持HTML的`div`、`span`等通用标签；（2）数据绑定方式：WXML使用`{{}}`进行数据绑定（Mustache语法），HTML需依赖JS框架（如Vue的`{{}}`）；（3）条件与列表渲染：WXML通过`wx:if`/`wx:else`和`wx:for`实现条件与循环，HTML需通过JS动态操作DOM；（4）事件处理：WXML使用`bindtap`、`catchtap`等绑定事件，HTML使用`onclick`等原生事件；（5）模板与引用：WXML通过`template`定义模板，`import`/`include`引入外部文件，HTML通过`iframe`或JS拼接实现。2.小程序中路由跳转的常用方式有哪些？简述其区别。答案：（1）`wx.navigateTo`：保留当前页面，跳转到新页面（页面栈≤10层），可通过`onUnload`监听原页面卸载；（2）`wx.redirectTo`：关闭当前页面，跳转到新页面（原页面无法返回）；（3）`wx.reLaunch`：关闭所有页面，打开新页面（常用于登录后跳转首页）；（4）`wx.switchTab`：跳转到`tabBar`页面（会关闭非`tabBar`页面）；（5）`wx.navigateBack`：返回上一页或多级页面（通过`delta`参数指定返回层数）。区别核心在于页面栈的变化（是否保留原页面）及适用场景（如`tabBar`只能用`switchTab`）。3.列举至少5种小程序性能优化的方法。答案：（1）减少WXML节点数量和层级：避免嵌套过深（建议≤10层）或节点数过多（建议≤100个），降低渲染耗时；（2）合理使用`wx:if`与`hidden`：频繁切换的场景用`hidden`（仅控制显示），条件复杂或节点多时用`wx:if`（动态增删节点）；（3）优化`setData`调用：仅更新变化的数据（避免全量覆盖），减少`setData`次数（合并多次更新）；（4）图片优化：使用WebP格式替代JPG/PNG（体积更小），对长列表图片使用`lazy-load`属性；（5）避免在事件处理函数中执行复杂逻辑：如滚动事件`bindscroll`中频繁计算，可通过防抖（`setTimeout`）或节流优化；（6）使用缓存：对不常变化的数据（如用户信息）通过`wx.setStorage`缓存，减少重复请求；（7）减少同步API使用：优先用异步API（如`wx.request`）替代同步API（如`wx.requestSync`），避免阻塞主线程。三、编程题（45分）需求：实现一个商品列表页面，要求如下：（1）页面顶部有一个输入框，用于搜索商品名称；（2）下方渲染商品列表，显示商品名称、价格（保留2位小数）；（3）输入搜索词时，实时过滤商品列表（不区分大小写）；（4）初始数据：`[{id:1,name:"苹果",price:5.9},{id:2,name:"香蕉",price:3.5},{id:3,name:"Apple",price:8.9}]`。请写出对应的WXML、JS代码（需包含数据定义、事件处理、筛选逻辑）。答案：WXML代码：```xml<viewclass="container"><!-搜索输入框--><inputtype="text"placeholder="搜索商品名称"bindinput="onSearchInput"/><!-商品列表--><viewclass="goods-list"><viewclass="goods-item"wx:for="{{filteredGoods}}"wx:key="id"><textclass="name">{{}}</text><textclass="price">￥{{item.price.toFixed(2)}}</text></view><viewwx:if="{{filteredGoods.length===0}}"class="no-result">无匹配商品</view></view></view>```JS代码（页面文件）：```javascriptPage({data:{//原始商品数据originalGoods:[{id:1,name:"苹果",price:5.9},{id:2,name:"香蕉",price:3.5},{id:3,name:"Apple",price:8.9}],//过滤后的商品数据（初始为全部）filteredGoods:[],//输入框内容inputValue:''},onLoad(){//初始化时加载全部商品this.setData({filteredGoods:this.data.originalGoods});},//输入框输入事件处理onSearchInput(e){constvalue=e.detail.value.trim().toLowerCase();//输入内容转小写this.setData({inputValue:value});//过滤商品constfiltered=this.data.originalGoods.filter(item=>{return.toLowerCase().includes(value);//商品名称转小写后匹配});this.setData({filteredGoods:filtered});}});```关键逻辑说明：（1）`originalGoods