(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）
目录
基础架构
前言：这两天在学习小兔鲜儿微信小程序项目，想要实现微信小程序的开发，首先就要搭建基础框架了，希望我的文章可以帮助大家快速上手微信小程序
构建界面
引入 uni-ui 组件库
uni-ui是uni-app官方出品，不仅使用安全且支持多端
uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
安装 uni-ui
pnpm i @dcloudio/uni-ui组件自动引入
配置easycom
使用
npm安装好uni-ui之后，需要配置easycom规则，让npm安装的组件支持easycom打开项目根目录下的
pages.json并添加easycom节点：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
配置TS类型
- @uni-helper/uni-app-types 提供
uni-app组件类型- @uni-helper/uni-cloud-types 提供
uni-cloud组件类型- @uni-helper/uni-ui-types （当前仓库）提供
uni-ui组件类型基于 这个 PR，Vue Language Features (Volar) 已经支持。
安装之后，建议启用 接管模式 Takeover Mode。如果不想启用接管模式，可以安装 TypeScript Vue Plugin (Volar)。启用或安装后需要重启 VSCode。
安装依赖
pnpm i -D @uni-helper/uni-ui-types配置
tsconfig.json，确保compilerOptions.types中含有@dcloudio/types和@uni-helper/uni-ui-types且include包含了对应的vue文件
// tsconfig.json
{
"compilerOptions": {
"types": ["@dcloudio/types",
"miniprogram-api-typings",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"]
},
}状态管理
持久化
// 网页端API
localStorage.setItem()
localStorage.getItem()// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()
数据交互
请求工具
请求和上传文件拦截器
uni.addInterceptor(STRING, OBJECT)
添加拦截器
STRING 参数说明
需要拦截的
api名称，如：uni.addInterceptor('request', OBJECT) ，将拦截uni.request()注意：
- 仅支持异步接口，如：uni.setStorage(OBJECT)，暂不支持同步接口如uni.setStorageSync(KEY,DATA)
- uniCloud请求云端接口时（callFunction、uploadFile等）也会使用uni.request发送请求，请确保拦截器内不错误的处理此类请求
// 拦截 request 请求
uni.addInterceptor('request', httpInterceptor)
// 拦截 uploadFile 文件上传
uni.addInterceptor('uploadFile', httpInterceptor)const httpInterceptor = {
// 拦截前触发
invoke(options: UniApp.RequestOptions) {
// 1. 非 http 开头需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 2. 请求超时
options.timeout = 10000
// 3. 添加小程序端请求头标识
options.header = {
...options.header,
'source-client': 'miniapp',
}
// 4. 添加 token 请求头标识
const memberStore = useMemberStore()
const token = memberStore.profile?.token
if (token) {
options.header.Authorization = token
}
}
}封装 Promise 请求函数
请求成功提取数据和设置类型
获取数据失败
⚫ uni.request 的 success 回调函数只是表示服务器 响应成功 ， 没处理响应状态码 ，业务中使用不方便⚫ axios 函数是只有 响应状态码是 2xx 才调用 resolve 函数，表示获取数据成功 ，业务中使用更准确
