uniapp 面试题总结常考

uniapp

文件详情

├── pages                      # 页面文件夹
│   │── index                  # index文件夹
│   │   │── index.vue          # index页面
├── static                     # 静态资源（类似于图片 字体图标等）
│   │── logo.png               # 图片，视频或字体图标
├── unpackage                  # 存放打包输出的文件
├── App.vue                    # 项目根组件
├── main.js                    # 项目入口文件
├── manifest.json              # 应用的配置文件
├── pages.json                 # 页面存放目录  page属性中第一项为项目启动页
├── uni.scss                   # 整体控制应用的风格

globalStyle 属性

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）	APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色	微信小程序
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light	微信小程序
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTop	HexColor	#ffffff	顶部窗口的背景色（bounce回弹区域）	仅 iOS 平台
backgroundColorBottom	HexColor	#ffffff	底部窗口的背景色（bounce回弹区域）	仅 iOS 平台
titleImage	String		导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址	支付宝小程序、H5、APP
transparentTitle	String	none	导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明	支付宝小程序、H5、APP
titlePenetrate	String	NO	导航栏点击穿透	支付宝小程序、H5
pageOrientation	String	portrait	横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见 响应显示区域变化	App 2.4.7+、微信小程序
animationType	String	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	300	窗口显示动画的持续时间，单位为 ms	App
app-plus	Object		设置编译到 App 平台的特定样式，配置项参考下方 app-plus	App
h5	Object		设置编译到 H5 平台的特定样式，配置项参考下方 H5	H5
mp-alipay	Object		设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY	支付宝小程序
mp-weixin	Object		设置编译到 mp-weixin 平台的特定样式	微信小程序
mp-baidu	Object		设置编译到 mp-baidu 平台的特定样式	百度小程序
mp-toutiao	Object		设置编译到 mp-toutiao 平台的特定样式	字节跳动小程序
mp-qq	Object		设置编译到 mp-qq 平台的特定样式	QQ小程序
usingComponents	Object		引用小程序组件，参考 小程序组件
renderingMode	String		同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层	微信小程序
leftWindow	Boolean	true	当存在 leftWindow 时，默认是否显示 leftWindow	H5
topWindow	Boolean	true	当存在 topWindow 时，默认是否显示 topWindow	H5
rightWindow	Boolean	true	当存在 rightWindow 时，默认是否显示 rightWindow	H5
rpxCalcMaxDeviceWidth	Number	960	rpx 计算所支持的最大设备宽度，单位 px	App、H5（2.8.12+）
rpxCalcBaseDeviceWidth	Number	375	rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px	App、H5（2.8.12+）
rpxCalcIncludeWidth	Number	750	rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx	App、H5（2.8.12+）
maxWidth	Number	1190	单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)	H5（2.9.9+）

tabBar属性

tarbar

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持 black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

list

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

"tabBar": {"list": [{"text": "首页","pagePath":"pages/index/index","iconPath":"static/tabs/home.png","selectedIconPath":"static/tabs/home-active.png"},{"text": "信息","pagePath":"pages/message/message","iconPath":"static/tabs/message.png","selectedIconPath":"static/tabs/message-active.png"},{"text": "我们","pagePath":"pages/contact/contact","iconPath":"static/tabs/contact.png","selectedIconPath":"static/tabs/contact-active.png"}]}

view 组件用法

属性名	说明
hover-class	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	按住后多久出现点击态，单位毫秒
hover-stay-time	手指松开后点击态保留时间，单位毫秒

text组件用法

属性	说明
selectable	文本是否可选
space	显示连续空格，可选参数：ensp、emsp、nbsp
decode	是否解码（&nbsp &lt &gt &amp &apos &ensp &emsp）

space值的意义

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

生命周期函数

应用的生命函数

函数名	说明
onLaunch	初始化完成时触发（全局只触发一次）
onShow	启动，或从后台进入前台显示
onHide	从前台进入后台
onError	报错时触发

页面的生命函数

数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面（页面切换不会触发onload函数，只会触发onshow）
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏
onUnload	监听页面卸载

下拉刷新

在pages文件中

style:{enablePullDownRefresh:true
}

使用函数

uni.startPullDownRefresh()

监听下拉刷新函数

onPullDownRefresh(){console.log('页面刷新了')
}

上拉刷新

监听上拉刷新函数

onReachBottom(){console.log('页面触底了')
}

属性	类型	默认值	描述
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px

style:{onReachBottomDistance:200
}

网络请求

uni.request({// 参数见下方
})

传值说明

参数名	类型	说明
url	String	开发者服务器接口地址
data	Object/String/ArrayBuffer	请求的参数
header	Object	设置请求的 header，header 中不能设置 Referer。
method	String	有效值详见下方说明
timeout	Number	超时时间，单位 ms
dataType	String	如果设为 json，会尝试对返回的数据做一次 JSON.parse
responseType	String	设置响应的数据类型。合法值：text、arraybuffer
sslVerify	Boolean	验证 ssl 证书
withCredentials	Boolean	跨域请求时是否携带凭证（cookies）
firstIpv4	Boolean	DNS解析时优先使用ipv4

请求情况返回数据

参数名	类型	说明
success	Function	收到开发者服务器成功返回的回调函数
fail	Function	接口调用失败的回调函数
complete	Function	接口调用结束的回调函数（调用成功、失败都会执行）

本地数据缓存

存储数据------setStorage------异步

uni.setStorage({key:'存储的键名',data:'存储的值',success(){'存储成功调用的函数'},fail(){'存储失败调用的函数'},complete(){'接口调用结束调用的函数'}
})

获取数据------getStorage------异步

uni.getStorage({key:'数据缓存中的键名',success(){'存储成功调用的函数'},fail(){'存储失败调用的函数'},complete(){'接口调用结束调用的函数'}
})

移除数据-----removeStorage------异步

uni.removeStorage({key:'数据缓存中的键名',success(){'删除成功调用的函数'},fail(){'删除失败调用的函数'},complete(){'接口调用结束调用的函数'}
})

清除本地所有数据------clearStorage------异步

uni.clearStorage()

存储数据------setStorageSync------同步

uni.setStorageSync('键名','值')

获取数据------getStorageSync------同步

const res = uni.getStorageSync('键名')

移除数据-----removeStorage------同步

uni.removeStorage('键名')

清除本地所有数据------clearStorage------同步

uni.clearStorageSync()

上传图片

从本地相册选择图片或使用相机拍照------chooseImage

参数名	说明
count	最多可以选择的图片张数，默认9
sizeType	original 原图，compressed 压缩图，默认二者都有
extension	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
sourceType	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	图像裁剪参数，设置后 sizeType 失效
success	成功则返回图片的本地文件路径列表 tempFilePaths
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

crop

参数名	说明
quality	取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
width	裁剪的宽度，单位为px，用于计算裁剪宽高比。
height	裁剪的高度，单位为px，用于计算裁剪宽高比。
resize	是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示

success 返回参数说明

参数	说明
tempFilePaths	图片的本地文件路径列表
tempFiles	图片的本地文件列表，每一项是一个 File 对象

File 对象结构如下

参数	说明
path	本地文件路径
size	本地文件大小，单位：B
name	包含扩展名的文件名称，仅H5支持
type	文件类型，仅H5支持

预览图片------previewImage

参数名	说明
current	详见下方说明
urls	需要预览的图片链接列表
indicator	图片指示器样式，可取值：“default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器。(只在App中适用)
loop	是否可循环预览，默认值为 false (只在App中适用)
longPressActions	长按图片显示操作菜单，如不填默认为保存相册==（只在App 1.9.5+适用）==
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

longPressActions 参数说明

参数	类型	必填	说明
itemList	Array	是	按钮的文字数组
itemColor	String	否	按钮的文字颜色，字符串格式，默认为"#000000"
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
index	Number	用户长按图片的索引值
tapIndex	Number	用户点击按钮列表的索引值

条件注释实现跨端兼容

注释 #ifdef 平台值 开头注释 #endif 平台值 结尾

值	平台
APP-PLUS	5+App
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

页面跳转

navigator------声明式导航跳转

属性名	说明
url	应用内的跳转链接，值为相对路径或绝对路径，如：“…/first/first”，“/pages/first/first”，注意不能加 .vue 后缀
open-type	跳转方式
delta	当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
animation-type	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，(只在App中适用)
animation-duration	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。(只在App中适用)
hover-class	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	指定是否阻止本节点的祖先节点出现点击态==(只在微信小程序中适用)==
hover-start-time	按住后多久出现点击态，单位毫秒
hover-stay-time	手指松开后点击态保留时间，单位毫秒
target	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram==(只在微信2.0.7+、百度2.5.2+、QQ中适用)==

open-type 有效值

值	说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能==（字节跳动小程序不支持）==
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效==（只在微信2.1.0+、百度2.5.2+、QQ1.4.7+适用）==

• 跳转tabbar页面，必须设置open-type=“switchTab”
• navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色。
• navigator-open-type属性 如果使用对应的值，则对应值的功能会高于对应跳转路径。
• app-nvue 平台只有纯nvue项目（render为native）才支持 <navigator>。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。
• app下退出应用，Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。
• uLink组件是navigator组件的增强版，样式上自带下划线，功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。

编程式导航跳转

函数	说明
navigateTo	保留当前页面，跳转到应用内的某个页面
redirectTo	关闭当前页面，跳转到应用内的某个页面。
reLaunch	关闭所有页面，打开到应用内的某个页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
navigateBack	关闭当前页面，返回上一页面或多级页面

参数	说明
url	需要跳转的应用内非 tabBar 的页面的路径 , ==或tabBar页面（仅限于switchTab）==路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	窗口动画效果==(只在App中适用)==
animationDuration	窗口动画持续时间，单位为 ms==(只在App中适用)==
events	页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）