微信小程序uniappvue3tspinia的环境搭建

2024-03-29 约 1723 字预计阅读 4 分钟

https://bing.ee123.net/img/rand?artid=137159204

微信小程序uniapp+vue3+ts+pinia的环境搭建

一.创建uniapp项目

通过vue-cli创建

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

二.安装依赖：

1.pnpm i

2.运行项目：

将package.json的

 "dev:mp-weixin": "uni -p mp-weixin",
 改为 "serve": "uni -p mp-weixin",
 后续可以用pnpm run serve启动微信小程序开发工具

3.导入微信小程序开发工具

打开微信开发者工具, 导入 dist\dev\mp-weixin 运行

三. TS 类型校验

在tsconfig.json文件中"compilerOptions"配置项内添加"ignoreDeprecations": “5.0”

"compilerOptions": {
    "ignoreDeprecations": "5.0"
  },

额外配置Ts类型校验：

安装类型声明文件：

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

2. 配置tsconfig.json：

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"
    ]
  },
   // vue 编译器类型，校验标签类型
   "vueCompilerOptions": {
    "nativeTags": ["block","component","template","slot"],
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

在配置完成后，vue 组件就会提示报错信息

四. JSON 注释问题

在 vscode 面板中，点击右小角设置按钮 → 点击设置 → 在搜索设置中搜索“文件关联”→ 找到 Files: Associations 的配置项 → 点击添加项 → 把 manifest.json 和 pages.json 设置为 jsonc 即可；

五. 安装 uview-plus

安装

pnpm add uview-plus
pnpm add dayjs
pnpm add clipboard

注意：此安装方式必须要按照 npm 方式安装的配置中的说明配置了才可用，且项目名称不能有中文字符。

因为 uview-plus 依赖 SCSS，所以必须要安装此插件，否则无法正常运行。

// 安装 sass
pnpm add sass -D

// 安装 sass-loader，注意需要版本 10，否则可能会导致 vue 与 sass 的兼容问题而报错
pnpm add sass-loader@10 -D

配置步骤

引入 uview-plus 主 JS 库：在项目 src 目录中的 main.js 中，引入并使用 uview-plus 的 JS 库，注意这两行要放在 const app = createSSRApp(App)之后。

// main.js
import uviewPlus from 'uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uviewPlus)
return {
app
}
}
// #endif

定义 uview-plus

//src/types/uview.d.ts
declare module "uview-plus"

引入 uview-plus 的全局 CSS 主题文件：在项目根目录的 uni.scss 中引入此文件。

/_ uni.scss _/
@import 'uview-plus/theme.scss';

//App.vue

<style lang="scss">
/_ 注意要写在第一行，同时给 style 标签加入 lang="scss"属性 _/
@import "uview-plus/index.scss";
</style>
...

配置 easycom 组件模式：需要在项目 src 目录的 pages.json 中进行

// pages.json
{
"easycom": {
// 注意一定要放在 custom 里，否则无效，https://ask.dcloud.net.cn/question/131175
"custom": {
"^u--(._)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(._)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
}
},
// 此为本身已有的内容
"pages": [
// ......
]
}

六. 配置 pinia 持久化

安装

pnpm add pinia@2.0.33

在 main.ts 页面

import { createSSRApp } from "vue"
import App from "./App.vue"
import uviewPlus from 'uview-plus'
// 导入 pinia 实例
import pinia from './stores'

export function createApp() {
const app = createSSRApp(App);
app.use(uviewPlus)
app.use(pinia)
return {
app,
};
}

//stores/index.ts
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

//stores/member.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useMemberStore = defineStore(
'member',
() => {
const userInfo = ref()
const setUserInfo = (val) => {
userInfo.value = val
}
// 清理用户信息，退出时使用
const clearUserInfo = () => {
userInfo.value = undefined
}
return {
userInfo,
setUserInfo,
clearUserInfo,
}
},
// 默认持续化保存
{
persist:{
storage: {
getItem(key) {
return uni.getStorageSync(key)
},
setItem(key, value) {
uni.setStorageSync(key,value)
},
}
}
}
)

七. 封装 http 请求

// src/utils/http.ts

// 请求基地址
const baseURL = 'xxxx'

// 拦截器配置
const httpInterceptor = {
// 拦截前触发
invoke(options: UniApp.RequestOptions) {
// 1. 非 http 开头需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 2. 请求超时
options.timeout = 10000
// 3. 添加小程序端请求头标识
options.header = {
'source-client': 'miniapp',
...options.header,
}
// 4. 添加 token 请求头标识
const memberStore = useMemberStore()
const token = memberStore.profile?.token
if (token) {
options.header.Authorization = token
}
},
}

// 拦截 request 请求
uni.addInterceptor('request', httpInterceptor)
// 拦截 uploadFile 文件上传
uni.addInterceptor('uploadFile', httpInterceptor)
/**

- 请求函数
- @param UniApp.RequestOptions
- @returns Promise
- 1. 返回 Promise 对象，用于处理返回值类型
- 2. 获取数据成功
- 2.1 提取核心数据 res.data
- 2.2 添加类型，支持泛型
- 3. 获取数据失败
- 3.1 401 错误 -> 清理用户信息，跳转到登录页
- 3.2 其他错误 -> 根据后端错误信息轻提示
- 3.3 网络错误 -> 提示用户换网络
  */
  type Data<T> = {
  code: string
  msg: string
  result: T
  }
  // 2.2 添加类型，支持泛型
  export const http = <T>(options: UniApp.RequestOptions) => {
  // 1. 返回 Promise 对象
  return new Promise<Data<T>>((resolve, reject) => {
  uni.request({
  ...options,
  // 响应成功
  success(res) {
  // 状态码 2xx，参考 axios 的设计
  if (res.statusCode >= 200 && res.statusCode < 300) {
  // 2.1 提取核心数据 res.data
  resolve(res.data as Data<T>)
  } else if (res.statusCode === 401) {
  // 401 错误 -> 清理用户信息，跳转到登录页
  const memberStore = useMemberStore()
  memberStore.clearProfile()
  uni.navigateTo({ url: '/pages/login/login' })
  reject(res)
  } else {
  // 其他错误 -> 根据后端错误信息轻提示
  uni.showToast({
  icon: 'none',
  title: (res.data as Data<T>).msg || '请求错误',
  })
  reject(res)
  }
  },
  // 响应失败
  fail(err) {
  uni.showToast({
  icon: 'none',
  title: '网络错误，换个网络试试',
  })
  reject(err)
  },
  })
  })
  }
  

八 . 其他配置

vue3 自动按需导入：

//vite.config.ts

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
build: {
sourcemap: process.env.NODE_ENV === 'development',
},
plugins: [
uni(),
AutoImport({ // 使用
imports: ['vue'],
dts: 'src/auto-import.d.ts',
// 如有用到 eslint 记得加上写段，没有用到可以忽略
eslintrc: {
enabled: true,
},
})
],
})

写在最后：这一篇是在网上借鉴的微信小程序的环境搭建文章，跟着一步一步搭建下来并且做一些笔记，跟着这篇文章的步骤一步一步来，搭建出来是没问题的。