因为毕业设计选到了移动端的项目,所以特地学习一下 Uniapp 的实践项目
视频教程:https://www.bilibili.com/video/BV1Bp4y1379L/
技术架构:
环境准备
创建 Uniapp 的项目
- 通过 HBuilderX 创建(需安装 HBuilderX 编辑器)
- 通过命令行创建(需安装 NodeJS 环境)
通过 HBuilderX 创建
略...
通过命令行创建
在指定目录下创建 Vue3 + TS 版的 Uniapp 项目 1
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
如何编译和运行 Uniapp 项目? 1. 安装依赖:npm install
2.
编译成微信小程序:npm run dev:mp-weixin
3.
将编译好的dist\dev\mp-weixin
导入微信开发者工具
使用 VS Code 开发 Uniapp 项目
安装 Vue3 + TS 插件 1. 安装 Vue Language Features (Volar) :Vue3 语法提示插件 2. 安装 TypeScript Vue Plugin (Volar) : Vue3 的 TS 插件 3. 工作区禁用 Vetur 插件(Vue2 插件和 Vue3 插件冲突) 4. 工作区禁用 @builtin typescript 插件(禁用后自动开启 Vue3 的 TS 托管模式)
安装 Uniapp 插件 1. 安装 Uniapp 开发插件 uni-create-view:快速创建 Uniapp 页面 uni-helper :Uniapp 代码提示 uniapp 小程序扩展 :鼠标悬停查文档
- TS 类型校验
安装类型声明文件:
npm i -D miniprogram-api-typings @uni-helper/uni-app-types
配置tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24// tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
// 类型声明文件
"types": [
"@dcloudio/types", // uni-app API 类型
"miniprogram-api-typings", // 原生微信小程序类型
"@uni-helper/uni-app-types" // uni-app 组件类型
]
},
// vue 编译器类型,校验标签类型
"vueCompilerOptions": {
// 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
"nativeTags": ["block", "component", "template", "slot"],
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
} - JSON注释问题
小兔鲜项目开发
拉取项目模板代码
项目模板包括:目录结构、项目素材、代码风格
- 从 GitHub 中克隆项目
1
git clone -b template https://gitee.com/heima-fe/uniapp-shop-vue3-ts.git heima-shop
注意:小程序真机预览需要再manifest.json
中添加微信小程序的appid
在微信公众平台( https://mp.weixin.qq.com/ )扫码登录获取开发者ID
基础架构
安装 uni-ui 组件库
官方文档:https://uniapp.dcloud.net.cn/component/uniui/quickstart.html
安装 uni-ui 组件库
1
npm i @dcloudio/uni-ui
在
pages.json
中配置自动导入组件,避免每次手动导入组件的麻烦1
2
3
4
5
6
7
8
9
10
11
12
13
14// pages.json
{
// 组件自动导入
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"pages": [
// …省略
]
}为组件安装类型声明文件
1
npm i -D @uni-helper/uni-ui-types
配置类型声明文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// tsconfig.json
{
"compilerOptions": {
// ...
"types": [
"@dcloudio/types", // uni-app API 类型
"miniprogram-api-typings", // 原生微信小程序类型
"@uni-helper/uni-app-types", // uni-app 组件类型
"@uni-helper/uni-ui-types" // 添加uni-ui 组件类型
]
},
// vue 编译器类型,校验标签类型
"vueCompilerOptions": {
"nativeTags": ["block", "component", "template", "slot"]
}
}
小程序端 Pinia 持久化
首先知道 Pinia 插件的基本用法 1.
在/stores/index.ts
中创建 Pinia
实例对象,并在对象上使用持久化插件,暴露给 main.ts
使用
1
2
3
4
5
6
7
8
9
10
11
12
13import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)
// 默认导出,给 main.ts 使用
export default pinia
// 模块统一导出
export * from './modules/member'
在
main.ts
中引入该对象,并在app
上使用1
2
3
4
5
6
7
8
9
10
11
12import { createSSRApp } from 'vue'
import pinia from './stores'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
return {
app,
}
}在
/stores/modules/member.ts
中定义状态,以下是会员信息状态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
44import { defineStore } from 'pinia'
import { ref } from 'vue'
// 定义 Store
export const useMemberStore = defineStore(
'member',
() => {
// 会员信息
const profile = ref<any>()
// 保存会员信息,登录时使用
const setProfile = (val: any) => {
profile.value = val
}
// 清理会员信息,退出时使用
const clearProfile = () => {
profile.value = undefined
}
// 记得 return
return {
profile,
setProfile,
clearProfile,
}
},
// TODO: 持久化
{
// 网页端配置
// persist: true,
// 小程序端配置
persist: {
storage: {
getItem: key => {
return uni.getStorageSync(key)
},
setItem: (key, val) => {
uni.setStorageSync(key, val)
},
},
},
},
)
注意:网页端的持久化配置是persist: true
,默认使用localStorage
实现持久化,但小程序端不兼容,需要替换成兼容多端的API,写法如上