2026年前端开发工程师（Uni-app）专项技能考核试题及答案

2026年前端开发工程师（Uni-app）专项技能考核试题及答案一、单项选择题（每题2分，共20分）1.在Uni-app中，以下哪一项不是pages.json的合法配置项？A.navigationBarTitleTextB.enablePullDownRefreshC.usingComponentsD.windowBackgroundColor答案：C解析：usingComponents是微信小程序的页面级配置，Uni-app将其统一放在components目录下自动注册，pages.json不识别该字段。2.使用Uni-app编译到App端时，若需调用原生支付宝SDK，正确做法是：A.在manifest.json的app-plus节点下配置sdkConfigsB.在main.js中直接import支付宝npm包C.在pages.json中声明alipay字段D.在vue.config.js中配置externals答案：A解析：App端原生SDK依赖需在manifest.json→app-plus→sdkConfigs中声明，打包时引擎才会把对应aar/framework打进去。3.关于Uni-app的Vuex使用，下列说法正确的是：A.H5端无法使用VuexB.小程序端必须使用vuex-persistedstate才能持久化C.在App端，Vuex数据在应用杀死后默认会丢失D.在uni-simple-router中无法获取Vuex实例答案：C解析：App端内存回收机制与原生一致，进程被杀后内存数据丢失；持久化需自行写入plus.storage或sqlite。4.在Uni-app中，若希望某页面在小程序中表现为“tabBar页面”，需要：A.在pages.json的tabBar→list中声明该页面路径B.在页面根节点写<tab-bar/>C.在main.js注册tabBar组件D.在路由守卫中redirect到tabBar答案：A解析：tabBar页面必须在pages.json→tabBar→list数组中注册，且路径需与pages数组中完全一致。5.使用uni.request上传文件时，若后端要求Content-Type为multipart/form-data，应：A.设置header:{'Content-Type':'multipart/form-data'}B.使用uni.uploadFile而不是uni.requestC.在data中传FormData实例D.将method设为POST即可自动识别答案：B解析：uni.request不支持真正的multipart编码，需用uni.uploadFile，其内部自动构造boundary。6.在App端，若需监听设备音量键，应使用：A.uni.onKeyDownB.plus.key.addEventListenerC.uni.addInterceptorD.App.vue的onKeyPress生命周期答案：B解析：5+App引擎提供plus.key对象，可监听硬件按键；uni前缀API无此能力。7.在Vue3语法糖<scriptsetup>中，以下哪段代码可在Uni-app中正确获取页面实例？A.getCurrentPages()[0]B.this.$scopeC.uni.getPageInstance()D.constpage=getCurrentInstance().proxy答案：A解析：<scriptsetup>无this，需用getCurrentPages()[getCurrentPages().length-1]拿到当前页面对象；getCurrentInstance返回组件实例，不含页面方法。8.在小程序端，若需实现“分享到朋友圈”功能，正确做法是：A.配置onShareTimeline生命周期B.在按钮上open-type="share"C.调用uni.share并设置channel:"timeline"D.小程序默认支持，无需额外配置答案：A解析：微信小程序需页面声明onShareTimeline才会出现“分享到朋友圈”按钮；uni-app直接映射该生命周期。9.在Uni-app中使用uViewUI，若需自定义主题色，应修改：A.uni.scss中的$u-primaryB.App.vue的style标签C.pages.json的globalStyleD.manifest.json的themeLocation答案：A解析：uView通过sass变量控制主题，源码变量定义在uni.scss，覆盖即可全局生效。10.在App端，若需实现应用内更新wgt资源包，第一步应：A.调用plus.runtime.getProperty获取当前版本B.直接下载wgt并plus.runtime.installC.在manifest.json中配置autoUpdateD.使用uni-simple-update插件的check()答案：A解析：更新前需拿到本地版本号与远端比对，plus.runtime.getProperty提供appid、version、versionCode等信息。二、多项选择题（每题3分，共15分）11.下列哪些生命周期在Uni-app的App端与H5端均会触发？A.onLaunchB.onShowC.onHideD.onUnload答案：ABC解析：onUnload仅在页面关闭时触发，App端退出应用不会触发；其余三项在两端均会执行。12.在Uni-app中，以下哪些方式可以跨端兼容地获取系统信息？A.uni.getSystemInfoSync()B.plus.device.uuidC.uni.getDeviceInfo()D.uni.getSystemInfo()答案：AD解析：plus仅App端可用；getDeviceInfo为扩展API，非官方跨端；官方跨端为getSystemInfo(Sync)。13.在Vue3+Uni-app项目中，以下哪些写法可正确实现全局属性注入？A.app.config.globalProperties.$http=requestB.provide('http',request)C.uni.$http=requestD.vide('$http',request)答案：AC解析：B选项provide需配合inject使用，非全局；D语法错误；A为Vue3标准；C为Uni-app附加的global对象。14.在小程序端，以下哪些做法可以有效降低首屏渲染时间？A.启用分包加载B.图片使用cdn+webpC.减少app.vue的globalDataD.把大型npm库放在node_modules外层答案：ABC解析：D无效，打包工具仍会全量分析；分包、webp、减少初始化数据均可提速。15.在Uni-app中使用TypeScript，若需对uni对象进行类型扩展，正确的做法有：A.在src下新建types/uni.d.ts并declaremodule'@dcloudio/uni-app'B.在shims-uni.d.ts中interfaceUni{$u:any}C.在tsconfig.json的types数组添加'@dcloudio/types'D.在main.ts中写(uniasany).$u=uView答案：ABC解析：D为运行时赋值，非类型扩展；前三项均可补充类型定义。三、判断题（每题1分，共10分）16.Uni-app的H5端可以使用标准的window.addEventListener监听hashchange。答案：√解析：H5端路由模式为hash时可监听。17.在App端，plus.navigator.setStatusBarStyle可动态切换状态栏文字颜色。答案：√解析：5+API提供该能力，需真机运行。18.Uni-app的Vue3项目不支持过滤器filter。答案：√解析：Vue3已移除过滤器，官方推荐用方法调用或计算属性。19.在小程序端，pages.json中配置usingComponents可注册vant-weapp组件。答案：×解析：Uni-app使用easycom机制，无需usingComponents，放对目录即可自动引入。20.uni-simple-router在H5端使用history模式时，需服务器配置fallback。答案：√解析：history模式下刷新404，需服务端重写到index.html。21.在App端，plus.push创建本地通知必须申请push权限。答案：×解析：本地通知无需网络权限，但需plus.android.requestPermissions申请android.permission.VIBRATE等。22.Uni-app的sass变量在小程序端会被编译为wxss的变量。答案：×解析：sass变量在编译期被替换，wxss不支持css变量。23.在Vue3的<scriptsetup>中，defineExpose暴露的方法可在父组件通过ref调用。答案：√解析：defineExpose显式暴露，父组件获取ref后可调用。24.使用uni.uploadFile时，同时上传多个文件应循环调用，无法一次批量。答案：√解析：官方API仅支持单文件，需循环或后端支持多file字段。25.在manifest.json中配置"optimization":{"subPackages":true}可启用分包优化。答案：√解析：该字段为官方分包预加载优化开关。四、填空题（每空2分，共20分）26.在Uni-app中，若需获取胶囊按钮信息，可使用API：__________。答案：uni.getMenuButtonBoundingClientRect()27.在App端，若需隐藏系统导航栏，应在manifest.json的app-plus节点下设置__________字段为false。答案：titleNView28.在Vue3的<scriptsetup>中，若需定义页面级分享函数，应声明生命周期：__________。答案：onShareAppMessage29.在Uni-app的easycom规则中，组件名前缀为u时，对应目录规则为__________。答案：components/u-/u-.vue30.在小程序端，若需实现下拉刷新，需在pages.json对应页面配置__________为true。答案：enablePullDownRefresh31.在App端，若需监听网络变化，应使用plus的__________对象。答案：workinfo32.在Uni-app的sass文件中，定义全局主色调变量一般命名为__________。答案：$uni-color-primary33.在H5端，若需解决跨域问题，可在vue.config.js中配置devServer的__________属性。答案：proxy34.在Uni-app中，若需实现国际化，推荐使用的官方插件是__________。答案：uni-i18n35.在App端，若需调用原生蓝牙，应使用plus.bluetooth的__________方法初始化适配器。答案：openBluetoothAdapter五、代码阅读题（每题10分，共20分）36.阅读以下代码，回答问题：```javascript//main.jsimport{createSSRApp}from'vue'importAppfrom'./App.vue'exportfunctioncreateApp(){constapp=createSSRApp(App)app.config.globalProperties.$api={get(url){returnuni.request({url,method:'GET'})}}return{app}}//pages/index/index.vue<scriptsetup>import{getCurrentInstance}from'vue'const{proxy}=getCurrentInstance()asyncfunctionload(){constres=awaitproxy.$api.get('/user')console.log(res)}</script>```问题：（1）在H5端，proxy.$api能否正常调用？（2）若将createSSRApp换成createApp，小程序端表现有何差异？（3）如何在不改动main.js的前提下，让IDE正确识别$api的类型？答案与解析：（1）可以。H5端运行环境与Vue3一致，globalProperties注入成功。（2）createApp不会生成ssr上下文，小程序端无差异，均正常运行；但使用createSSRApp可在未来支持同构渲染。（3）在src/types下新建vue.d.ts：```typescriptimport'@vue/runtime-core'interfaceApiInstance{get(url:string):Promise<any>}declaremodule'@vue/runtime-core'{interfaceComponentCustomProperties{$api:ApiInstance}}```重新启动VSCode即可获得类型提示。37.阅读以下代码，指出其中三处潜在问题并给出修复方案：```html<template><view><imagev-for="imginlist":src="img"mode="aspectFit"@click="preview(img)"/></view></template><scriptsetup>letlist=reactive(['/1.jpg','/2.jpg'])functionpreview(current){uni.previewImage({urls:list,current})}</script>```问题与修复：1.list使用let声明，丢失响应性，应改为const。2.图片未开启懒加载，长列表耗性能，应加lazy-load属性。3.图片域名未配置download域名，小程序端预览失败，需在小程序后台配置合法域名。修复后：```html<template><scroll-viewscroll-y><imagev-for="(img,i)inlist":key="i":src="img"mode="aspectFit"lazy-load@click="preview(img)"/></scroll-view></template><scriptsetup>constlist=reactive([...])</script>```六、编程题（共35分）38.请基于Uni-app+Vue3+TypeScript实现一个“离线缓存文章列表”功能，要求如下：（1）进入页面优先读取本地sqlite数据，无数据或下拉刷新时请求远端接口；（2）使用sqlite存储文章id、标题、摘要、更新时间；（3）列表项左滑出现“删除”按钮，点击后同步删除本地与远端；（4）上拉加载更多，远端返回空数组时显示“没有更多”；（5）兼容App、H5、微信小程序三端。请写出核心代码并附简要注释，要求结构清晰，异常处理完整。答案与解析：```typescript//types/article.d.tsexportinterfaceArticle{id:numbertitle:stringsummary:stringupdatedAt:string}//db/index.tsimportplusfrom'@dcloudio/types'constdbName='article.db'letdb:PlusSqliteDatabase|null=nullexportasyncfunctionopenDB(){returnnewPromise<PlusSqliteDatabase>((resolve,reject)=>{plus.sqlite.openDatabase({name:dbName,path:`_doc/${dbName}`,success:resolve,fail:reject})})}exportasyncfunctioninitTable(){if(!db)db=awaitopenDB()constsql=`createtableifnotexistsarticle(idintegerprimarykey,titletext,summarytext,updatedAttext)`returnnewPromise<void>((resolve,reject)=>{db!.executeSql({sql,success:()=>resolve(),fail:reject})})}exportasyncfunctionqueryArticles(offset=0,limit=20){if(!db)db=awaitopenDB()constsql=`selectfromarticleorderbyupdatedAtdesclimitlireturnnewPromise<Article[]>((resolve,reject)=>{db!.selectSql({sql,success:(e:any)=>resolve(easArticle[]),fail:reject})})}exportasyncfunctioninsertArticles(list:Article[]){if(!db)db=awaitopenDB()constsql=`replaceintoarticle(id,title,summary,updatedAt)values(?,?,?,?)`consttasks=list.map(a=>newPromise<void>((resolve,reject)=>{db!.executeSql({sql,param:[a.id,a.title,a.summary,a.updatedAt],success:()=>resolve(),fail:reject})}))returnPromise.all(tasks)}exportasyncfunctiondeleteArticle(id:number){if(!db)db=awaitopenDB()constsql=`deletefromarticlewhereid=?`returnnewPromise<void>((resolve,reject)=>{db!.executeSql({sql,param:[id],success:()=>resolve(),fail:reject})})}//pages/list/index.vue<scriptsetuplang="ts">import{onMounted,reactive}from'vue'import{initTable,queryArticles,insertArticles,deleteArticle}from'@/db'import{getArticles,deleteRemote}from'@/api/article'importtype{Article}from'@/types/article'constlist=reactive<Article[]>([])letpage=0constpageSize=20letnomore=falseletrefreshing=falseasyncfunctionloadLocal(){constdata=awaitqueryArticles(pagepageSize,pageSize)if(page===0)list.length=0list.push(...data)}asyncfunctionloadRemote(){if(refreshing)returnrefreshing=truetry{const{data}=awaitgetArticles({page,pageSize})if(page===0)list.length=0list.push(...data)awaitinsertArticles(data)nomore=data.length<pageSize}catch(e){uni.showToast({title:'网络错误',icon:'none'})}finally{refreshing=falseuni.stopPullDownRefresh()}}asyncfunctiononPullDownRefresh(){page=0nomore=falseawaitloadRemote()}asyncfunctiononReachBottom(){if(nomore)returnpage++awaitloadRemote()}asyncfunctionswipeDelete(id:number){uni.showModal({title:'提示',content:'确定删除？',success:async(res)=>{if(!res.confirm)returntry{awaitdeleteRemote(id)awaitdeleteArticle(id)constidx=list.findIndex(a=>a.id===id)if(idx>-1)list.splice(idx,1)}catch{uni