黑马程序员前端项目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类型声明文件
bash
pnpm i -D miniprogram-api-typings@latest @uni-helper/uni-app-types@latest
TypeScript
// 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 选项，使编译器忽略弃用警告
TypeScript
"ignoreDeprecations":"5.0"
方法二：更新@vue/tsconfig
使用命令查看vue/tsconfig版本
我的版本是0.1.3
TypeScript
pnpm list @vue/tsconfig升级后重启
TypeScript
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
文档
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类型
网站：
ts项目，希望类型更加安全
但是鼠标悬停组件上是unknow
uni-ui开发时使用js，没有升级到ts
官方提供的组件库，并没有对应的类型声明文件
有人为uni-ui提供了配套的类型声明文件
安装后需要增加类型声明文件
TypeScript
"@uni-helper/uni-ui-types"
有了这个，我调用函数，就可以结构了
小程序端pinia持久化
文档：
配置 | Pinia Plugin Persistedstate
Pinia 用法与 Vue3 项目完全一致，uni-app 项目仅需解决持久化插件兼容性问题
插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API
安装持久化存储插件
TypeScript
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()
所以借鉴axios
text、view标签报红错误提示
参考文档
vscode开发uniapp小程序，text、view标签报红错误提示 | Ayu's Study Blog
使用VSCode搭建UniApp + TS + Vue3 + Vite项目-阿里云开发者社区
我按照文档中说明，在.npmrc文件中增加了两项，再下载依赖，然后重启vscode就成功了
