uniapp 面试题总结常考

uniapp

文件详情

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

globalStyle 属性

tabBar属性

tarbar

list

"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 组件用法

text组件用法

space值的意义

生命周期函数

应用的生命函数

页面的生命函数

下拉刷新

在pages文件中

style:{
	enablePullDownRefresh:true
}

使用函数

uni.startPullDownRefresh()

监听下拉刷新函数

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

上拉刷新

监听上拉刷新函数

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

style:{
	onReachBottomDistance:200
}

网络请求

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

传值说明

请求情况返回数据

本地数据缓存

存储数据------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

crop

success 返回参数说明

File 对象结构如下

预览图片------previewImage

longPressActions 参数说明

success 返回参数说明

条件注释实现跨端兼容

注释 #ifdef 平台值 开头

注释 #endif 平台值 结尾

页面跳转

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

open-type 有效值

• 跳转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打电话。

编程式导航跳转