【黑马程序员uniapp】项目配置、请求函数封装

news2025/6/5 10:28:56

黑马程序员前端项目uniapp小兔鲜儿微信小程序项目视频教程，基于Vue3+Ts+Pinia+uni-app的最新组合技术栈开发的电商业务全流程_哔哩哔哩_bilibili

参考

有代码，还有app、h5页面、小程序的演示

小兔鲜儿-vue3+ts-uniapp-一套代码多端部署: 小兔鲜儿-vue3+ts-uniapp 项目已上线，小程序搜索《小兔鲜儿》即可体验。🎉🎉🎉 <br/> 配套项目接口文档，配套笔记。

接口文档

说明 - 小兔鲜儿-小程序版

创建uni-app项目

有HbuilderX创建项目和命令行创建项目两种方式

这里要创建uniapp项目，然后使用vscode开发

项目配置

微信小程序appid

安装依赖，运行

pnpm i安装依赖，多个node_modules文件夹

然后运行pnpm dev:mp-weixin，mp表示mini program，微信小程序

编译完成的结果在dis目录下

打开微信小程序，导入mp-weixin

分离窗口

分离窗口，方便查看

使用uni-create-view插件

安装后进行设置

配置好后，直接创建uniapp页面

前一个是页面，后一个是页面路由pages路径名称

完善ts类型校验

安装最新版本ts类型声明文件

pnpm i -D miniprogram-api-typings@latest @uni-helper/uni-app-types@latest

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    // 类型声明文件
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    // 原配置 experimentalRuntimeMode 已废弃，请升级 Vue - Official 插件至最新版本
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"] 
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

tsconfig报错

方法一：加上"ignoreDeprecations":"5.0"后重启

在 TypeScript 5.0 及以上版本中，importsNotUsedAsValues 和 preserveValueImports 选项已被弃用，并将在 TypeScript 5.5 中停止支持。取而代之的是使用 verbatimModuleSyntax 选项

如果希望继续使用旧版本的配置，可以在 tsconfig.json 中添加 ignoreDeprecations 选项，使编译器忽略弃用警告

"ignoreDeprecations":"5.0"

方法二：更新@vue/tsconfig

使用命令查看vue/tsconfig版本

我的版本是0.1.3

pnpm list @vue/tsconfig

升级后重启

pnpm update @vue/tsconfig@^0.7.0

允许pages.json和manifest.json允许注释

在uniapp项目中，允许pages.json和manifest.json允许注释

但是vscode默认严格json

只有这两个json文件允许注释

值jsonc，表示允许注释

manifest.json中两个值已弃用

两个值已弃用，所以默认false和0

不用管

安装uni-ui

文档

uni-app官网

pnpm安装

配置easycom完成组件自动导入

开启自动扫描，在components文件夹是否有符合uniapp标准的组件，有就自动导入

但我们通过pnpm包管理器的方式下载，组件在node_modules里

所以这个配置走的是第二个custom正则的规则

^表示开头，用()包裹.*，表示提取出这个组件的名字，()表示提取，提取的内容会把后面的$1替换

 // 组件自动引入规则
  "easycom": {
    // 是否开启自动扫描
    "autoscan": true,
    // 以正则方式自定义组件匹配规则
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      // 以 Xtx 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
      "^Xtx(.*)": "@/components/Xtx$1.vue"
    }

为uni-ui提供ts类型

网站：

@uni-helper/uni-types - npm

ts项目，希望类型更加安全

但是鼠标悬停组件上是unknow

uni-ui开发时使用js，没有升级到ts

官方提供的组件库，并没有对应的类型声明文件

有人为uni-ui提供了配套的类型声明文件

安装后需要增加类型声明文件

"@uni-helper/uni-ui-types"

有了这个，我调用函数，就可以结构了

小程序端pinia持久化

文档：

配置 | Pinia Plugin Persistedstate

Pinia 用法与 Vue3 项目完全一致，uni-app 项目仅需解决持久化插件兼容性问题

插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API

安装持久化存储插件

pnpm i pinia-plugin-persistedstate

参考

请求工具的封装

拦截器

文档：

uni.addInterceptor(STRING, OBJECT) | uni-app官网

invoke函数会在拦截前触发

设置请求基地址

如果首选服务器挂了，换成备用服务器，有基地址设置，只需要改一边就可以了

在项目中用到路径也更简洁

添加请求头标识

当前的小兔鲜服务端除了服务于小程序端，也会服务于pc端和app端

后端需要通过标记识别出数据请求的来源

添加token

用户登录后拿到token

流程

拦截时，就会拿到uni.request()内部传来的参数

可以通过invoke()的形参获取

参数在ts项目中要指定类型，鼠标悬停到request上，得知参数类型

如果request在用的时候，也写上了header，这里写上的参数会覆盖options.header中的内容

因为options.header这里被赋值成新对象

所以，如果有要先保留，再添加特殊标识

请求函数

封装请求函数，为了在项目中方便发请求，借鉴axios（axios返回值是Promise对象，配合async，await，能更方便地获取到请求成功的数据）

所以封装的请求函数也要求返回Promise对象

uniapp的拦截器没有axios拦截器完善，uniapp的响应拦截器对类型支持并不友好

所以前面的拦截器只完成了请求前的拦截，没有实现响应拦截器

要通过自己封装的请求函数去实现axios响应拦截器做过的业务（响应分为成功、失败）

流程

这里是Promise对象，所以更方便地用async，await去接收数据

async/await 是建立在 Promise 之上的语法糖。Promise 是 ES6 引入的异步编程解决方案，用于封装异步操作并获取其成功或失败结果。async 函数会自动返回一个 Promise 对象，await 关键字用于等待 Promise 对象的状态变为已解决（resolved ）或已拒绝（rejected ），从而获取相应结果或处理错误

数据

封装抽离后端返回值的类型

后端返回的数据，变的只有result

所以可以封装抽离后端返回值的类型

类型断言

返回的类型，uniapp中也有默认的联合类型，可以是string、AnyObject、ArrayBuffer

联合类型在这里是任意的对象类型AnyObject，但是有太大了

这里有更精确的类型，我们定义的Data<T>

在联合类型中指定其中一个类型，使用类型断言

获取数据失败

success()只有服务器有响应，都会走到这里面

如果服务器挂了，或者网络出错，才会走到fail()响应失败

如果没有token，但调用了一个需要携带token才能访问的接口，会走到success()响应成功里面。因为服务器有响应，响应的结果只不过是token失败

对于我们也页面中使用，业务理解会有差异

axios中的处理是只有响应状态码是2开头，才会调用resolve()