基于Vue3+TS的Uniapp移动端项目

因为毕业设计选到了移动端的项目，所以特地学习一下 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

// 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中配置自动导入组件，避免每次手动导入组件的麻烦

// 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

配置类型声明文件

// 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使用

import { 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上使用

import { 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中定义状态，以下是会员信息状态

import { 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，写法如上

糖泥的个人博客