开发笔记
# 壁纸小程序项目
# 前言
视频课程地址：零基础入门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数组中第一项表示应用启动页
# 条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
简单来说，就是自动根据不同平台执行不同的代码（例如：H5、APP、小程序）
# 用户授权
openSetting调用客户端授权信息：uni.openSetting(OBJECT) | uni-app官网 (opens new window)
# Vue 相关
Vue3 官方文档：简介 | Vue.js (opens new window)
- vue2 - 选项式，vue3 - 组合式
生命周期图示
含接收页面参数 API
// 接收页面url参数
onLoad((e) => {
console.log(e);
})
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
尺寸单位 rpx 说明
# 插件
- 自动按需导入插件：项目首页 - unplugin-auto-import:unplugin-auto-import - 一个插件，用于在 Vite、Webpack、Rspack、Rollup 和 esbuild 中自动按需导入 API，支持 TypeScript，适合希望简化代码中导入语句的前端开发者。 - GitCode (opens new window)
- uni-app 扩展组件：uni-ui 介绍 | uni-app官网 (opens new window)
- 骨架屏插件（插件市场中找）：uv-skeletons 骨架屏 全面兼容小程序、nvue、vue2、vue3等多端 - DCloud 插件市场 (opens new window)
- 富文本增强渲染：mp-html 富文本组件【全端支持，支持编辑、latex等扩展】 - DCloud 插件市场 (opens new window)
# 写法技巧
...展开符的使用
示例：
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
2
3
4
5
6
当轮播图中文字过长时，显示省略符
...
<template>
<view class="notice">
<view class="left">
<uni-icons type="sound-filled" size="20"></uni-icons>
<text class="text">公告</text>
</view>
<view class="center">
<swiper vertical autoplay interval="1500" duration="300" circular>
<swiper-item v-for="item in noticeList" :key="item._id">
<navigator :url="'/pages/notice/detail?id='+item._id">
{{item.title}}
</navigator>
</swiper-item>
</swiper>
</view>
</template>
<style lang="scss" scoped>
.center{
flex:1;
swiper{
height: 100%;
&-item{
height: 100%;
font-size: 30rpx;
color:#666;
// 当轮播图中文字过长时，显示省略符...
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
</style>
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
# 问题解析
为什么 Vue3 写响应式编程多用
const而不是let定义呢？
- 通常情况下，
let定义变量，const定义常量。
原因：在 Vue3 中，响应式变量 建议用 const 是因为你不会重新赋值它本身，而只是修改它内部的值（如 .value）。
举个例子：
import { ref } from 'vue'
const count = ref(0)
count.value++ // 修改的是 count 内部的值
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，但容易逻辑错乱
2
3
# 发行相关
1、内部使用到的接口，域名需要配置
- 微信公众平台，开发管理界面
- 配置域名
2、在 HBuilder X 中 配置好 appid 和 微信开发者工具包路径 然后 发行打包
3、微信开发者工具进行版本上传