目录
创建
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
vscode编写uniapp
ts类型检测
pnpm i -D @types/wechat-miniprogram@uni-helper/uni-app-types
ui导入
npm i @dcloudio/uni-ui
tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"vuecompileroptions": {
"experimentalRuntimeMode": "runtime-uni-app"
},
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
},
"lib": [
"esnext",
"dom"
],
"types": [
"@dcloudio/types",
"@types/wechat-miniprogram",
"@uni-helper/uni-app-types",
]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
]
}
拦截请求拦截器配置
const baseUrl = ''
// 添加拦截器
const httpInterceptor = {
invoke(options: UniApp.RequestOptions) {
// 非http开头拼接路径
if (!options.url.startsWith('http')) {
options.url = baseUrl + options.url
}
// 请求超时
options.timeout = 10000
// 添加token
const token = localStorage.getItem('token')
if (token) {
options.header.Authorization = token
}
options.header
}
}
// 拦截requset请求
// 拦截uploadFile请求
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)
interface Data<T> {
code: string
msg: string
result: T
}
export const http = <T>(options: UniApp.RequestOptions) => {
// 返回promise对象
return new Promise<Data<T>>((resolve, reject) => {
uni.request({
...options,
// 请求成功
success(res) {
// code为2xx放行
if (res.statusCode >= 200 && res.statusCode < 300) { resolve(res.data as Data<T>) }
else if (res.statusCode == 401) {
localStorage.setItem('token', '')
uni.navigateTo({ url: '/pages/login/login' })
reject(res)
} else {
uni.showToast({
icon: 'none',
title: (res.data as Data<T>).msg
})
}
},
// 响应失败
fail(err) {
uni.showToast({
icon: 'none',
title: "网络错误"
})
reject(err)
}
})
})
}