开发笔记
# 壁纸小程序项目
# 前言
视频课程地址：零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端 (opens new window)
课程配套资料：uniappVue3版本+咸虾米壁纸: uniappVue3版本基础demo及咸虾米壁纸项目的开源代码 (opens new window)
uni-app官方文档：uni-app官网 (opens new window)
介绍 -> 教程 -> 组件 -> API
利用好 控制台打印 的方法调试，查看函数方法接收到的参数会是什么
# uniapp 相关
# 目录简介
- 工程简介 | uni-app官网 (opens new window)
- 内含 static 目录说明
# 全局文件
page.json 文件
涉及到启动页的设置
- 可设置
condition属性 - 或者
pages数组中第一项表示应用启动页
# Vue 相关
Vue3 官方文档：简介 | Vue.js (opens new window)
- vue2 - 选项式，vue3 - 组合式
生命周期图示
含接收页面参数 API
// 接收页面参数
onLoad((e)=>{
console.log(e);
})
1
2
3
4
2
3
4
# css 相关
scoped 属性
uni.scss 文件说明
- 这里是 uni-app 内置的常用样式变量
- 是 预编译 文件
- 可引入其他目录下的文件：
@import "@/common/scss/self.scss";
使用示例：
<!-- xxx.vue 文件 -->
<!-- scoped：约束只有组件自己可以用这个 css 样式 -->
<style lang="scss" scoped>
.box{
// width: 60%;
// width: 40vw;
// width: 400px;
width: 130rpx; // rpx响应式px（根据750宽的图纸定义比例，可利用工具等比例缩放)
height: 130rpx;
background: orange;
font-size: 28rpx;
}
.text{
font-size: 52rpx;
color:$custom-color-1; // 引用属性
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
尺寸单位 rpx 说明
# 自动按需导入插件
# 写法技巧
...展开符的使用
示例：
const pets = ref([1,2,3]);
const res = ref([4,5,6]);
// 利用展开符合并数组元素
pets.value = [...pets.value, ...res.value]
console.log(pets.value); // 1,2,3,4,5,6
1
2
3
4
5
6
2
3
4
5
6
# 问题解析
为什么 Vue3 写响应式编程多用
const而不是let定义呢？
- 通常情况下，
let定义变量，const定义常量。
原因：在 Vue3 中，响应式变量 建议用 const 是因为你不会重新赋值它本身，而只是修改它内部的值（如 .value）。
举个例子：
import { ref } from 'vue'
const count = ref(0)
count.value++ // 修改的是 count 内部的值
1
2
3
4
2
3
4
你可能会疑惑：count 不是变量吗？我还要改它的值，为什么用 const？
其实这里：
const count = ref(0)：count是一个引用（Ref）对象，它不会变。- 改的是
count.value，不是count本身。
换句话说：我们只要不去 count = ref(100) 重新赋值，就不违反 const 的语义。
为什么推荐用 const 而不是 let：
| 语法层面 | Vue 编码习惯 |
|---|---|
const 只声明一次，不能被重新赋值，更安全 | 避免误操作（如不小心 xxx = yyy） |
const 定义的变量在编译时更容易被优化 | Tree-shaking、性能更好 |
| 语义更明确，告诉团队“这个变量的引用不会变” | 更易读、更清晰 |
用 let 会导致误解或误操作：
let count = ref(0)
// 后面不小心写：
count = ref(100) // 不一定有 bug，但容易逻辑错乱
1
2
3
2
3
上次更新: 2025/4/10 17:30:07