快速学会搭建微信小程序的基础架构-Toy模板网

这篇具有很好参考价值的文章主要介绍了快速学会搭建微信小程序的基础架构。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

基础架构

构建界面

引入 uni-ui 组件库

组件自动引入

配置TS类型

状态管理

持久化

数据交互

请求工具

请求和上传文件拦截器

封装 Promise 请求函数

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

获取数据失败

基础架构

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

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

构建界面

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

引入 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"]
     },
}

状态管理

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

持久化

// 网页端API
localStorage.setItem()
localStorage.getItem()

// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

数据交互

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

请求工具

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

请求和上传文件拦截器

快速学会搭建微信小程序的基础架构,# uni-app入门,前端,前端框架,开发语言,微信小程序,visual studio code

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
  }
 }
}