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
如遇到问题，请检查版本号是否一致!!!
项目目录结构
shell
复制代码
`└── 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
安装
- 下载之后进入项目
shell
复制代码
cd uni-preset-vue
- 安装依赖
shell
复制代码
`# pnpm
pnpm install
yarn
yarn
npm
npm i`
运行
shell
复制代码
pnpm dev:mp-weixin
打开微信开发者工具，找到dist/dev/mp-weixin运行，可以看到默认的页面
安装pinia
shell
复制代码
pnpm add pinia
使用pinia
在src目录下构建 pinia-store/user.js文件
js
复制代码
`/**
- @description 用户信息数据持久化
*/
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state() {
return {
userInfo: {}
}
},
actions: {
setUserInfo(data) {
this.userInfo = data
}
}
})`
- 修改
main.js文件
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
shell
复制代码
pnpm add pinia-plugin-unistorage
修改main.js文件,增加如下代码：
js
复制代码
`// pinia数据持久化
import { createUnistorage } from 'pinia-plugin-unistorage'
store.use(createUnistorage());
app.use(store);`
完整代码如下：
js
复制代码
`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
};
}`
在页面中使用：
js
复制代码
`<script setup>
import { useUserStore } from '@/pinia/user.js'
const user = useUserStore()
// 设置用户信息
const data = { userName: 'snail' }
user.setUser(data)
// 打印用户信息
console.log(user.userInfo)
</script>`
安装axios
csharp
复制代码
pnpm add axios
适配小程序，需要另外安装axios-miniprogram-adapter插件
shell
复制代码
pnpm add axios-miniprogram-adapter
使用axios
在utils创建utils/request.js文件
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目录下创建，完整代码如下：
js
复制代码
`/**
- @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文件
js
复制代码
`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
})
}`
在页面中使用
js
复制代码
`<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插件
shell
复制代码
pnpm add unplugin-auto-import -D
修改vite.config.js文件：
js
复制代码
`import AutoImport from 'unplugin-auto-import/vite'
plugins: [
AutoImport({
imports: ["vue"]
})
],`
页面中使用，需要注意的事每次导入新的vue指令，需要重新运行！！
js
复制代码
`<script setup>
onBeforeMount(() => {
console.log('----onBeforeMount---')
})
</script>`
安装uni-ui
shell
复制代码
pnpm add @dcloudio/uni-ui
使用uni-ui
修改pages.json文件，增加如下代码：
js
复制代码
`"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},`
在页面中使用
js
复制代码
`<template>
<uni-icons type="bars" size="16"></uni-icons>
</template>`
到此已基本可以完成程序的开发，其他功能按照自己的需求做增删改查即可！
原网址: 访问
创建于: 2023-10-10 09:53:35
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论