1，背景
使用Vue3 + Vite4 + Pinia + Axios + Vscode模式开发之后，感叹真香！不用再单独去下载HBuilderX。废话不多说，直接上干货！
2，版本号
- node: v16.18.0
- vue: ^3.3.4,
- vite: 4.1.4
- sass: ^1.62.1
- pinia: 2.0.36
- pinia-plugin-unistorage: ^0.0.17
- axios: ^1.4.0
- axios-miniprogram-adapter: ^0.3.5
- unplugin-auto-import: ^0.16.4
如遇到问题，请检查版本号是否一致!!!
3，项目目录结构
└── src # 主目录
├── api # 存放所有api接口文件
│ ├── user.js # 用户接口
├── config # 配置文件
│ ├── net.config.js # axios请求配置
├── pinia-store # 配置文件
│ ├── user.js # axios请求配置
├── utils # 工具类文件
│ ├── request.js # axios请求封装
4，开发流程
建议去uni-preset-vue仓库下载vite分支zip包，熟练ts的童鞋下载vite-ts
4.1，安装
- 下载之后进入项目
cd uni-preset-vue
- 安装依赖
# pnpm pnpm install # yarn yarn # npm npm i
- 运行
pnpm dev:mp-weixin
打开微信开发者工具，找到dist/dev/mp-weixin运行，可以看到默认的页面
- 安装pinia
pnpm add pinia
- 使用pinia
在src目录下构建 pinia-store/user.js文件
/** * @description 用户信息数据持久化 */ import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state() { return { userInfo: {} } }, actions: { setUserInfo(data) { this.userInfo = data } } })
- 修改main.js文件
import { createSSRApp } from "vue"; import * as Pinia from 'pinia'; import App from "./App.vue"; export function createApp() { const app = createSSRApp(App); const store = Pinia.createPinia(); app.use(store); return { app, Pinia }; }
- pinia数据持久化
安装pinia-plugin-unistorage
pnpm add pinia-plugin-unistorage
修改main.js文件,增加如下代码：
// pinia数据持久化 import { createUnistorage } from 'pinia-plugin-unistorage' store.use(createUnistorage()); app.use(store);
完整代码如下：
import { createSSRApp } from "vue"; import * as Pinia from 'pinia'; // pinia数据持久化 import { createUnistorage } from 'pinia-plugin-unistorage' import App from "./App.vue"; export function createApp() { const app = createSSRApp(App); const store = Pinia.createPinia(); store.use(createUnistorage()); app.use(store); return { app, Pinia }; }
在页面中使用：
<script setup> import { useUserStore } from '@/pinia/user.js' const user = useUserStore() // 设置用户信息 const data = { userName: 'snail' } user.setUser(data) // 打印用户信息 console.log(user.userInfo) </script>
- 安装axios
pnpm add axios
适配小程序，需要另外安装axios-miniprogram-adapter插件
pnpm add axios-miniprogram-adapter
4.2，使用axios
在utils创建utils/request.js文件
import axios from 'axios'; import mpAdapter from "axios-miniprogram-adapter"; axios.defaults.adapter = mpAdapter; import { netConfig } from '@/config/net.config'; const { baseURL, contentType, requestTimeout, successCode } = netConfig; let tokenLose = true; const instance = axios.create({ baseURL, timeout: requestTimeout, headers: { 'Content-Type': contentType, }, }); // request interceptor instance.interceptors.request.use( (config) => { // do something before request is sent return config; }, (error) => { // do something with request error return Promise.reject(error); } ); // response interceptor instance.interceptors.response.use( /** * If you want to get http information such as headers or status * Please return response => response */ (response) => { const res = response.data; // 请求出错处理 // -1 超时、token过期或者没有获得授权 if (res.status === -1 && tokenLose) { tokenLose = false; uni.showToast({ title: '服务器异常', duration: 2000 }); return Promise.reject(res); } if (successCode.indexOf(res.status) !== -1) { return Promise.reject(res); } return res; }, (error) => { return Promise.reject(error); } ); export default instance;
其中net.config.js文件需要在src/config目录下创建，完整代码如下：
/** * @description 配置axios请求基础信息 * @author hu-snail 1217437592@qq.com */ export const netConfig = { // axios 基础url地址 baseURL: 'https://xxx.cn/api', // 为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用 cors: true, // 根据后端定义配置 contentType: 'application/json;charset=UTF-8', //消息框消失时间 messageDuration: 3000, //最长请求时间 requestTimeout: 30000, //操作正常code，支持String、Array、int多种类型 successCode: [200, 0], //登录失效code invalidCode: -1, //无权限code noPermissionCode: -1, };
在src目录下创建src/api/user.jsapi文件
import request from '@/utils/request' /** * @description 授权登录 * @param {*} data */ export function wxLogin(data) { return request({ url: '/wx/code2Session', method: 'post', params: {}, data }) } /** * @description 获取手机号 * @param {*} data */ export function getPhoneNumber(data) { return request({ url: '/wx/getPhoneNumber', method: 'post', params: {}, data }) }
在页面中使用
<script setup> import { wxLogin, getPhoneNumber } from '@/api/user.js' /** * @description 微信登录 */ const onWxLogin = async () => { uni.login({ provider: 'weixin', success: loginRes => { state.wxInfo = loginRes const jsCode = loginRes.code wxLogin({jsCode}).then((res) => { const { openId } = res.data user.setUserInfo({ openId }) }) } }) } </script>
4.3，配置vue自动导入
安装unplugin-auto-import插件
pnpm add unplugin-auto-import -D
修改vite.config.js文件：
import AutoImport from 'unplugin-auto-import/vite' plugins: [ AutoImport({ imports: ["vue"] }) ],
页面中使用，需要注意的事每次导入新的vue指令，需要重新运行！！
<script setup> onBeforeMount(() => { console.log('----onBeforeMount---') }) </script>
- 安装uni-ui
pnpm add @dcloudio/uni-ui
- 使用uni-ui
修改pages.json文件，增加如下代码：
"easycom": { "autoscan": true, "custom": { "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } },
在页面中使用
<template> <uni-icons type="bars" size="16"></uni-icons> </template>
到此已基本可以完成程序的开发，其他功能按照自己的需求做增删改查即可。
