基础架构

前言：这两天在学习小兔鲜儿微信小程序项目，想要实现微信小程序的开发，首先就要搭建基础框架了，希望我的文章可以帮助大家快速上手微信小程序

构建界面

引入 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?.tokenif (token) {options.header.Authorization = token}}
}