uni-app
# 目录结构
.
├── docs
│ ├── components 组件
│ ├── pages 页面
│ ├── static 静态资源
│ ├── App.vue 根组件
│ ├── index.html 主页，项目入口
│ ├── main.js js入口文件
│ ├── manifest.json 应用配置
│ ├── pages.json 页面配置
│ ├── uni.scss 全局样式文件
. .
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 生命周期
pages目录下的.vue .vue文件拥有组件生命周期和页面生命周期
# 应用生命周期
onLaunch 当uni-app初始化完成时触发(全局只触发一次)
onShow 当uni-app启动, 或从后台进入前台显示
onHide 当uni-app从前台进入后台
onError 当uni-app报错时触发;
1
2
3
4
2
3
4
# 页面生命周期
onLoad 第一次进入页面所执行的生命周期(会接受页面传递过来的参数)
onShow 每一次进入页面所执行的生命周期
onReady 页面渲染完成(可以获取dom)
onHide 页面隐藏
onUnload 页面卸载
1
2
3
4
5
2
3
4
5
# 组件生命周期
beforeCreate 实例初始化之后调用
created 在实例创建完成后立即被调用
beforeMount 在挂载开始之前调用
mounted 挂载到实例上去之后调用
1
2
3
4
2
3
4
# 路由
uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
# 页面传值
1.路由跳转接收
A页面
uni.navigateTo({
url:`/pages/search/index?key=${this.key}`
})
B页面接收
onLoad(options){
console.log(options);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
2.父传子(同vue一样)
// 父组件传值
<list :name="name"></list>
// 子组件props接收
props:{
name:{
type:String,
default:''
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
3.其他
//触发全局的自定义事件，附加参数都会传给监听器回调函数。
uni.$emit('名称','值')
//监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
#uni.$on(eventName,(值)=>{})
1
2
3
4
2
3
4
# pages.json页面路由配置
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。
{
// 配置应用页面组成
"pages": [],
// 配置项指定一级导航栏
"tabBar":{},
//设置默认页面的窗口表现
"globalStyle":{},
// 组件自动引入规则
"easycom":{},
//用于解决宽屏适配问题
"topWindow": {}
// 具体请看官网配置
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
上次更新: 2024/10/09, 16:59:47
