1.uni-uiコンポーネントライブラリをインストールします。
1. インストール
pnpm i -D sass
pnpm i @dcloudio/uni-ui
2. コンポーネントの自動インポートを設定する
npm を使用して uni-ui をインストールした後、npm によってインストールされたコンポーネントが easycom をサポートするように easycom ルールを設定する必要があります。
プロジェクトのルート ディレクトリで Pages.json を開き、easycom ノードを追加します。
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
3. プラグインをインストールする
pnpm i -D @uni-helper/uni-ui-types
4. テスト使用
たとえば、コンポーネントをコピーしてページ上で直接使用するだけです。
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
</uni-card>
2. 永続化のためにピニアを使用する
1. 依存関係パッケージをインストールする
pnpm install pinia
pnpm install pinia-plugin-persistedstate
起動時にエラーが発生した場合"hasInjectionContext" is not exported by
pinia をアンインストールし、指定したバージョンを再インストールできます。
pnpm uninstall pinia
pnpm install [email protected]
2. 永続化コードを作成する
1) を作成しますsrc/stores/index.ts。内容は次のとおりです。
import {
createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)
// 默认导出给main.ts使用
export default pinia
// 模块统一导出
export * from './modules/member'
2) 番号付きメンバーモジュールコードmember.ts
// 定义 store
import {
defineStore } from "pinia"
import {
ref } from "vue"
export const useMemberStore = defineStore('member', () => {
// 会员信息
const profile = ref()
// 保存会员信息
const setProfile = (val: any) => {
profile.value = val
}
// 清理会员信息
const clearProfile = () => {
profile.value = undefined
}
return {
profile,
setProfile,
clearProfile,
}
},
{
// 网页端写法
// persist:true,
// 小程序端写法
persist: {
storage: {
getItem(key) {
return uni.getStorageSync(key)
},
setItem(key, value) {
uni.setStorageSync(key, value)
}
}
}
}
)
3) main.tsで導入
import {
createSSRApp } from "vue";
import App from "./App.vue";
// 导入 pinia 实例
import pinia from "./stores";
export function createApp() {
const app = createSSRApp(App);
// 使用pinia
app.use(pinia)
return {
app,
};
}
3. コンポーネントページで使用する
<template>
<view class="content">
<view>会员信息：{
{ memberStore.profile }}</view>
<button plain size="mini" type="primary"
@click="memberStore.setProfile({
nickname:'我是管理员',
})"
>保存用户信息</button>
<button plain size="mini" type="warn"
@click="memberStore.clearProfile()"
>清空用户信息</button>
</view>
</template>
<script setup lang="ts">
import {
useMemberStore } from '@/stores';
const memberStore = useMemberStore()
</script>
<style>
.content {
margin: 10px;
}
</style>
3. http リクエストをインターセプトし、リクエスト パラメータを処理し、リクエスト結果を処理します。
1. リクエスト インターセプタの追加、リクエスト ベース アドレスの追加、カスタム リクエスト ヘッダーの追加、リクエスト トークン、およびリクエスト タイムアウトの設定; 2.
http リクエスト メソッドのカスタマイズ、リクエスト応答結果データの処理、およびさまざまなリターン コードに応じた応答結果の処理。
import {
useMemberStore } from "@/stores";
const baseUrl = "http://127.0.0.1:8080"
const httpInterceptor = {
// 拦截前触发
invoke(options: UniApp.RequestOptions) {
// 1. 增加基础地址
if (!options.url.startsWith('http')) {
options.url = baseUrl + options.url
}
// 2. 修改超时时间，默认 60s
options.timeout = 30000
// 3. 添加请求头
options.header = {
...options.header,
'source': 'mimiapp'
}
// 4. 添加token
const memberStore = useMemberStore()
const token = memberStore.profile?.token
if (token) {
options.header.Authorization = token
}
console.log(options);
}
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)
interface Resp<T> {
code: string,
message: string,
result: T
}
/**
* 请求函数
*/
export const http = <T>(options: UniApp.RequestOptions) => {
// 1. 返回Promise对象
return new Promise<Resp<T>>((resolve, reject) => {
uni.request({
...options,
//2. 响应成功
success(res) {
if (res.statusCode == 200 && res.statusCode < 300) {
resolve(res.data as Resp<T>)
} else if (res.statusCode == 401) {
// 401错误 没有权限，跳转到登录页面
const memberStore = useMemberStore()
memberStore.clearProfile()
uni.navigateTo({
url: '/pages/login/login' })
reject(res)
} else {
// 其他错误 根据错误信息提示
uni.showToast({
title: (res.data as Resp<T>).message || '请求错误',
icon: 'none',
mask: true
})
reject(res)
}
},
// 响应失败
fail(res) {
uni.showToast({
title: res.errMsg,
icon: 'none',
mask: true
})
reject(res)
},
})
})
}
ページ内で使用する
import {
http} from '@/utils/http'
const getData =async ()=>{
const res = await http<string[]>({
url:'/api/user/login',
method:'POST',
data: {
"loginName": "user",
"password": "123"
}
})
console.log(res);
}