跨平台

uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建

背景

使用Vue3 + Vite4 + Pinia + Axios + Vscode模式开发之后，感叹真香！不用再单独去下载HBuilderX。废话不多说，直接上干货！

版本号

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

如遇到问题，请检查版本号是否一致!!!

项目目录结构

└── src # 主目录

    ├── api # 存放所有api接口文件

    │   ├── user.js # 用户接口

    ├── config # 配置文件

    │   ├── net.config.js # axios请求配置

    ├── pinia-store # 配置文件

    │   ├── user.js # axios请求配置

    ├── utils # 工具类文件

    │   ├── request.js # axios请求封装

开发流程

建议去uni-preset-vue仓库下载vite分支zip包，熟练ts的童鞋下载vite-ts

安装

下载之后进入项目

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

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

配置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"

        }

},