开发笔记
# 壁纸小程序项目
# 前言
视频课程地址:
课程配套资料: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)
- uv-ui:uv-ui 破釜沉舟之兼容vue3+2、app、h5、小程序等多端,灵活导入,利剑出击 - 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、微信开发者工具进行版本上传
# uniCloud 相关
# uni-id 用户体系
- 下载
uni-id-pages
插件 - 支持设置钩子函数,做一些初始化操作(比如设置默认用户名)
小程序进行 微信登录时,如果报 appid 的异常
- 检查 uni-id 的云端配置文件(在
uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json
中)
云端配置文件
- 可设置密码强度(需同步修改
/uni_modules/uni-id-pages/config.json
中的配置) - 设置密码加密密钥
- 可配置小程序
- 可配置短信服务
- 用户注册时设置默认角色
- ...
界面上的内容和样式,在 /uni_modules/uni-id-pages
目录下修改
# JQL 语法
获取云端环境变量
- JQL数据库操作 | uniCloud (opens new window)
- 可用来获取当前用户的 uid,用来做数据权限,需要对应修改库表的 permission 权限
# 配置未登录时自动跳转登录页
在 pages.json
文件中添加属性:
"uniIdRouter": {
// #ifdef MP-WEIXIN
"loginPage": "uni_modules/uni-id-pages/pages/login/login-withoutpwd",
// #endif
// #ifndef MP-WEIXIN
"loginPage": "uni_modules/uni-id-pages/pages/login/login-withpwd",
// #endif
"needLogin": [
"pages/blog/edit"
]
}
2
3
4
5
6
7
8
9
10
11
12
# 页面通信
发送事件
setTimeout(()=>{
// 页面通信
uni.$emit("editEvent")
uni.navigateBack();
},1000)
2
3
4
5
接收事件
uni.$on("editEvent",()=>{
// 刷新列表数据
getData();
})
2
3
4