// 目录结构
1. components // 自定义组件的目录
2. pages // 页面存放的目录
3. static // 静态资源文件目录(图片、视频等),静态资源只能存放于此
4. unpackage // 编译后的文件存放的目录
5. utils // 公用的工具类
6. common // 公用的文件
7. app.vue // 相当于微信小程序的app.js,应用的生命周期和全局样式
8. main.js // 应用入口
9. manifest.json // 项目配置(应用名称、logo、appid等)
10. pages.json // 页面配置(路由、导航条、选项卡等)
11. readme.md // 描述项目的文件
12. uni.scss // 全局的scss文件,可直接使用,不需要引入
13. cloudfunctions // 云函数服务空间
----------------------------------------------------------------------------------------------
// 尺寸单位
1. uni-app的基准宽度为750px
2. 元素宽 = 750px * 元素在设计稿中的宽度 / 设计稿基准宽度
3. 若设计稿宽640px,元素A在设计稿的宽为100px,那么元素A在uni-app的宽就是 750 * 100 / 640 = 117px
----------------------------------------------------------------------------------------------
1. 生命周期:
应用生命周期:
onLaunch() // 应用初始化完成触发,全局只触发一次
onShow() // 应用启动时,或从后台进入前台触发
onHide() // 应用从前台进入后台触发
onError() // 应用发生错误触发
页面生命周期:
onLoad() // 监听页面加载, 拿不到DOM
onShow() // 监听页面显示
onReady() // 监听页面的初次渲染完成,如果渲染速度快会在页面进入动画完成前触发
onHide() // 监听页面隐藏
onUnload() // 监听页面卸载
组件生命周期:
beforeCreate() // 在实例初始化之后,options配置之前被调用
created() // 实例创建完成之后立即调用,还没挂载
beforeMount() // 页面挂载之前
mounted() // 页面挂载之后
beforeUpdate() // 数据更新之前
updated() //数据更新之后
activeted() // keep-alive组件激活之前,App和小程序无效
deactivated() // keep-alive组件停用时,App和小程序无效
beforeDestroy() // 实例销毁之前
destroyed() // 实例销毁之后
errorCaptured() // 收集错误,会向上冒泡,正式环境可以使用
2. 组件到页面的生命周期执行顺序:
App onLaunch()
App onShow()
component beforeCreate()
component created()
page onLoad()
page onShow()
component mounted()
page onReady()
3. 页面中也可以写组件的生命周期:
beforeCreate()
onLoad()
onShow()
created()
beforeMount()
onReady()
mounted()
4. 组件内(页面除外)不支持onLoad、onShow等页面生命周期
5. 在配置了tabbar后, 第二次点击不会重新执行onLoad, 如果要做一些重新刷新页面的操作需要在 onTabItemTap 这个生命周期操作
----------------------------------------------------------------------------------------------
// 路由跳转
1. uni.navigateTo()、<navigator open-type="navigate" /> // 打开新页面
2. uni.redirectTo()、<navigator open-type="redirectTo" /> // 页面重定向
3. uni.navigateBack()、<navigator open-type="navigateBack" /> // 页面返回
4. uni.switchTab()、<navigator open-type="switchTab" /> // Tab切换
5. uni.reLaunch()、<navigator open-type="reLaunch" /> // 重加载
----------------------------------------------------------------------------------------------
// 条件编译和tabbar配置
1. 条件编译:
#ifdef H5 需要条件编译的代码 #endif // 只会在H5时编译
#ifndef H5 需要条件编译的代码 #endif // 除了H5不会编译,其他平台都会编译
#ifdef H5 || APP-PLUS 需要条件编译的代码 #endif // 在H5或App平台下才会编译,这里只有||,不会出现&&,因为没有交集
2. tabbar配置:
选中的图片应为本地图片、大小不超过40kb、尺寸建议 81px*81px
点击tabbar后的页面会被缓存不会重新执行onLoad(),但会执行onShow()
可以通过onTabItemTap(e)这个生命周期函数监听哪个tabbar被触发
----------------------------------------------------------------------------------------------
// uniClound云开发
1. 创建项目时勾选云开发
2. 新建云服务空间(在网页中实现),创建云服务空间
3. 新建云函数部署
4. 在cloundfunctions右击选择进入uniCloud的Web控制台
5. 在控制台中可以管理云函数、云数据库、云存储(图片、文件)、H5域名配置
6. unicloud.uploadFile() // 上传图片、文件
7. unicloud.deleteFile() // 删除图片、文件
8. unicloud.callFunction({ // 调用云函数
name: '云函数名',
data: {
name: 'cj' // 要传的参数
},
success(res) {
code
}
})
9. 使用localhost不会跨域,uni-app已处理好,使用其他H5的则需要用H5域名配置
10. 云函数是运行在云端的node环境中
11. 云函数的2个参数:
event: 为客户端上传的参数
context: 包含了调用信息和运行状态,获取每次调用的上下文 // 不能return,否则会出现循环引用报错
有一个return则是需要返回给客户端的数据
12. 修改云函数后需要上传部署才能正确被调用,如果是要测试则上传并运行
13. 云数据库是json形式的文档型数据库,一张表对应一个集合,一条记录对应一个json对象
14. 对云数据库的更改只能在云函数中进行
15. 数据库操作:
const db = uniCloud.database() // 获取数据库引用
const dbcmd = db.command // 对数组、字符串的数据库操作符
const collection = db.collection('表名') // 获取表的引用
const res = await collection.add([{ name: 'cj'}, { age: 23 }]) // 新增记录,通过判断res可知道是否新增成功
collection.doc('id') // 查找条件id
const res = await collection.doc('1').remove() // 删除记录,通过判断res可知道是否删除成功
const res = await collection.doc('1').update({ name: 'cj' }) // 更新记录,只能更新存在的记录,通过判断res可知道是否更新成功
const res = await collection.doc('1').set({ name: 'cj' }) // 更新记录,如果记录存在就更新,如果不存在就添加,通过判断res可知道是否更新成功
const res = await collection.doc('1').get() // 查找,通过判断res可知道有没有这条数据
const res = await collection.doc('1')field({ '字段名': false }).get() // 如果不加field则全部返回,如果加了为true表示只返回这个字段,false表示不返回这个字段
const res = await collection.where({ name: 'cj' }).get() // 查找字段名为cj的记录,doc只能用为id
const res = await collection // 聚合
.aggregate() // 获取聚合实例
.match({ '字段名': 'cj' }) // 查询字段名为cj的记录
.project({ '字段名': false }) // 让这个字段不返回与上面的field类似
.skip(10) // 跳过多少数据(分页)
.limit(10) // 返回多少条数据(分页)
.addFields({ flg: true }) // 追加flg: true这个字段
.end() // 聚合完成
16. 在cloudfunctions云服务空间下右击创建'db_init_json'文件可以直接在云数据库中生成数据表,在'db_init_json'文件中右键初始化即可
----------------------------------------------------------------------------------------------
// 其他
1. uni-app 如果是调用非浏览器端的 API，如有兼容问题则需要看对应端的官方问题，uni-app 官方说明不完整
2. uni.showToast 在 2.14.1 版本的微信模拟器中，icon 设置为 error 时无效，都会显示 success
3. uni.getStorage 如果 success 和 fail 是异步函数，complete 有时会不执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
