一、安裝uni-ui組件庫(kù)
1、安裝
pnpm i -D sass
pnpm i @dcloudio/uni-ui
2、配置組件自動(dòng)導(dǎo)入
使用 npm 安裝好 uni-ui 之后，需要配置 easycom 規(guī)則，讓 npm 安裝的組件支持 easycom
打開(kāi)項(xiàng)目根目錄下的 pages.json 并添加 easycom 節(jié)點(diǎn)：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 規(guī)則如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他內(nèi)容
pages:[
// ...
]
}
3、安裝插件，實(shí)現(xiàn)uni-ui組件的類(lèi)型提示
pnpm i -D @uni-helper/uni-ui-types
安裝完成后，在 tsconfig.json 中增加配置項(xiàng)
{
"compilerOptions": {
"types": [
// ... ///
"@uni-helper/uni-ui-types"
]
},
// ...
}
4、測(cè)試使用
隨便復(fù)制一個(gè)組件在頁(yè)面上面就可以直接使用，比如
<uni-card title="基礎(chǔ)卡片" sub-title="副標(biāo)題" extra="額外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
<text>這是一個(gè)帶頭像和雙標(biāo)題的基礎(chǔ)卡片，此示例展示了一個(gè)完整的卡片。</text>
</uni-card>
二、使用pinia做持久化
1、安裝依賴(lài)包
pnpm install pinia
pnpm install pinia-plugin-persistedstate
如果啟動(dòng)時(shí)遇到錯(cuò)誤"hasInjectionContext" is not exported by
可以卸載pinia重新安裝指定指定版本
pnpm uninstall pinia
pnpm install pinia@2.0.36
2、編寫(xiě)持久化代碼
1）創(chuàng)建src/stores/index.ts，內(nèi)容如下：
import {createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
// 使用持久化存儲(chǔ)插件
pinia.use(persist)
// 默認(rèn)導(dǎo)出給main.ts使用
export default pinia
// 模塊統(tǒng)一導(dǎo)出
export * from './modules/member'
2）編號(hào)member模塊代碼member.ts
// 定義 store
import { defineStore } from "pinia"
import { ref } from "vue"
export const useMemberStore = defineStore('member', () => {
// 會(huì)員信息
const profile = ref()
// 保存會(huì)員信息
const setProfile = (val: any) => {
profile.value = val
}
// 清理會(huì)員信息
const clearProfile = () => {
profile.value = undefined
}
return {
profile,
setProfile,
clearProfile,
}
},
{ // 網(wǎng)頁(yè)端寫(xiě)法
// persist:true,
// 小程序端寫(xiě)法
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";
// 導(dǎo)入 pinia 實(shí)例
import pinia from "./stores";
export function createApp() {
const app = createSSRApp(App);
// 使用pinia
app.use(pinia)
return {
app,
};
}
3、在組件頁(yè)面中使用
<template>
<view class="content">
<view>會(huì)員信息：{{ memberStore.profile }}</view>
<button plain size="mini" type="primary"
@click="memberStore.setProfile({
nickname:'我是管理員',
})"
>保存用戶(hù)信息</button>
<button plain size="mini" type="warn"
@click="memberStore.clearProfile()"
>清空用戶(hù)信息</button>
</view>
</template>
<script setup lang="ts">
import { useMemberStore } from '@/stores';
const memberStore = useMemberStore()
</script>
<style>
.content {
margin: 10px;
}
</style>
三、攔截http請(qǐng)求，處理請(qǐng)求參數(shù)，請(qǐng)求結(jié)果
1、增加請(qǐng)求攔截器，增加請(qǐng)求基礎(chǔ)地址、增加自定義請(qǐng)求頭、請(qǐng)求token、設(shè)置請(qǐng)求超時(shí)；
2、自定義http請(qǐng)求方法，處理請(qǐng)求響應(yīng)結(jié)果數(shù)據(jù)，根據(jù)不同的返回代碼處理響應(yīng)結(jié)果文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-709569.html
import { useMemberStore } from "@/stores";
const baseUrl = "http://127.0.0.1:8080"
const httpInterceptor = {
// 攔截前觸發(fā)
invoke(options: UniApp.RequestOptions) {
// 1. 增加基礎(chǔ)地址
if (!options.url.startsWith('http')) {
options.url = baseUrl + options.url
}
// 2. 修改超時(shí)時(shí)間，默認(rèn) 60s
options.timeout = 30000
// 3. 添加請(qǐng)求頭
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
}
/**
* 請(qǐng)求函數(shù)
*/
export const http = <T>(options: UniApp.RequestOptions) => {
// 1. 返回Promise對(duì)象
return new Promise<Resp<T>>((resolve, reject) => {
uni.request({
...options,
//2. 響應(yīng)成功
success(res) {
if (res.statusCode == 200 && res.statusCode < 300) {
resolve(res.data as Resp<T>)
} else if (res.statusCode == 401) {
// 401錯(cuò)誤 沒(méi)有權(quán)限，跳轉(zhuǎn)到登錄頁(yè)面
const memberStore = useMemberStore()
memberStore.clearProfile()
uni.navigateTo({ url: '/pages/login/login' })
reject(res)
} else {
// 其他錯(cuò)誤 根據(jù)錯(cuò)誤信息提示
uni.showToast({
title: (res.data as Resp<T>).message || '請(qǐng)求錯(cuò)誤',
icon: 'none',
mask: true
})
reject(res)
}
},
// 響應(yīng)失敗
fail(res) {
uni.showToast({
title: res.errMsg,
icon: 'none',
mask: true
})
reject(res)
},
})
})
}
在頁(yè)面中使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-709569.html
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);
}
到了這里，關(guān)于【uniapp】小程序開(kāi)發(fā)：2 安裝uni-ui組件庫(kù)、使用pinia狀態(tài)管理、自定義http請(qǐng)求的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
