快速学会搭建微信小程序的基础架构

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

基础架构 

构建界面 

引入 uni-ui 组件库  

组件自动引入

配置TS类型

状态管理

持久化 

数据交互

请求工具 

请求和上传文件拦截器

封装 Promise 请求函数

请求成功提取数据和设置类型

获取数据失败 

---

基础架构 

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

构建界面 

引入 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 函数，表示获取数据成功 ，业务中使用更准确