目次
1. 背景
Vue3 + Vite4 + Pinia + Axios + Vscode モードを使用して開発した後、おいしいとため息をつきました。HBuilderX を個別にダウンロードする必要はありません。早速、実践的な内容に移りましょう。
2. バージョン番号
- ノード: v16.18.0
- vue: ^3.3.4、
- すぐに: 4.1.4
- サス: ^1.62.1
- インストール: 2.0.36
- パイナップル-プラグイン-ユニストレージ: ^0.0.17
- アクシオス: ^1.4.0
- axios-miniprogram-adapter: ^0.3.5
- アンプラグイン自動インポート: ^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
WeChat 開発者ツールを開き、dist/dev/mp-weixin を見つけて実行すると、デフォルトのページが表示されます。
- ピニアをインストールする
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 [email protected]
*/
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>
ここまでで基本的にプログラムの開発は完了しますが、必要に応じてその他の機能の追加、削除、修正、確認を行っていきます。