From e41f3608e977cb2b61c0f9cbee7d86b3fd641db5 Mon Sep 17 00:00:00 2001
From: jqtmviyu <jqtmviyu@gmail.com>
Date: Thu, 15 May 2025 16:48:32 +0800
Subject: [PATCH] docs: :memo: add readme and notes

---
 README.md |  178 ++++++
 笔记.md   | 1690 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 1868 insertions(+)
 create mode 100644 README.md
 create mode 100644 笔记.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7babf93
--- /dev/null
+++ b/README.md
@@ -0,0 +1,178 @@
+# Uni-Shop 电商应用
+
+Uni-Shop 是一个基于 uni-app 开发的跨平台电商应用，支持多端部署（微信小程序、H5、App等）。该项目实现了完整的电商功能，包括商品浏览、分类查询、购物车、订单管理、用户中心等核心功能。
+
+## 项目特点
+
+- 基于 uni-app 框架开发，实现一次开发，多端部署
+- 使用 Vue 3 + TypeScript 开发，提供类型安全和更好的开发体验
+- 采用 Pinia 进行状态管理，支持数据持久化
+- 组件化开发，提高代码复用性和可维护性
+- 完整的电商业务流程实现
+
+## 技术栈
+
+- **前端框架**：uni-app、Vue 3
+- **开发语言**：TypeScript
+- **状态管理**：Pinia + pinia-plugin-persistedstate（持久化）
+- **UI组件**：uni-ui
+- **CSS预处理器**：SCSS
+- **构建工具**：Vite
+- **代码规范**：ESLint + Prettier
+- **Git Hook**：husky + lint-staged
+
+## 项目结构
+
+```
+uni-shop/
+├── src/                       # 源代码目录
+│   ├── components/            # 全局公共组件
+│   ├── composables/           # 组合式函数
+│   ├── pages/                 # 主包页面
+│   │   ├── index/             # 首页
+│   │   ├── category/          # 分类页
+│   │   ├── cart/              # 购物车
+│   │   ├── my/                # 个人中心
+│   │   ├── goods/             # 商品详情
+│   │   ├── hot/               # 热门推荐
+│   │   └── login/             # 登录页
+│   ├── pagesMember/           # 会员分包（个人信息、地址管理等）
+│   ├── pagesOrder/            # 订单分包（订单创建、详情、支付等）
+│   ├── services/              # API 服务
+│   ├── stores/                # Pinia 状态管理
+│   │   ├── modules/           # 状态模块
+│   │   └── index.ts           # Pinia 入口
+│   ├── styles/                # 全局样式
+│   ├── types/                 # TypeScript 类型定义
+│   ├── utils/                 # 工具函数
+│   │   └── http.ts            # 网络请求封装
+│   ├── App.vue                # 应用入口组件
+│   ├── main.ts                # 应用入口文件
+│   ├── pages.json             # 页面路由配置
+│   └── manifest.json          # 应用配置
+├── static/                    # 静态资源
+│   └── tabs/                  # 底部导航图标
+├── .eslintrc.js               # ESLint 配置
+├── .gitignore                 # Git 忽略文件
+├── .prettierrc.json           # Prettier 配置
+├── index.html                 # HTML 模板
+├── package.json               # 项目依赖
+├── tsconfig.json              # TypeScript 配置
+└── vite.config.ts             # Vite 配置
+```
+
+## 功能模块
+
+### 1. 首页
+
+- 轮播图展示
+- 商品分类导航
+- 热门商品推荐
+- 猜你喜欢（无限滚动加载）
+
+### 2. 分类
+
+- 分类导航
+- 分类商品展示
+
+### 3. 商品详情
+
+- 商品信息展示
+- 规格选择
+- 加入购物车
+- 立即购买
+
+### 4. 购物车
+
+- 商品列表
+- 商品选择
+- 数量修改
+- 结算功能
+
+### 5. 个人中心
+
+- 用户信息展示
+- 订单管理
+- 地址管理
+- 设置
+
+### 6. 订单
+
+- 订单创建
+- 订单列表
+- 订单详情
+- 支付功能
+
+## 开发规范
+
+### 命名规范
+
+- 文件夹和文件名：使用小写字母和连字符（kebab-case）
+- 组件名：使用 PascalCase
+- 变量和函数：使用 camelCase
+- 常量：使用 UPPER_SNAKE_CASE
+
+### 代码风格
+
+- 使用 ESLint 和 Prettier 进行代码格式化
+- 提交前自动进行代码检查（通过 husky 和 lint-staged）
+
+### 组件开发规范
+
+- 组件文件使用 .vue 扩展名
+- 组件使用 `<script setup>` 语法
+- 自定义组件以 Jbc 开头（通过 easycom 自动注册）
+
+### API 请求规范
+
+- 所有 API 请求统一通过 services 目录下的模块进行管理
+- API 函数命名规则：动词 + 模块名 + API 后缀（如 getGoodsAPI）
+- 使用 TypeScript 类型定义请求参数和响应数据
+
+## 运行项目
+
+### 环境要求
+
+- Node.js >= 22.0.0
+- pnpm >= 10.0.0
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 开发模式
+
+```bash
+# H5
+pnpm run dev:h5
+
+# 微信小程序
+pnpm run dev:mp-weixin
+
+# 其他平台
+pnpm run dev:custom
+```
+
+### 打包构建
+
+```bash
+# H5
+pnpm run build:h5
+
+# 微信小程序
+pnpm run build:mp-weixin
+
+# 其他平台
+pnpm run build:custom
+```
+
+## 项目亮点
+
+1. **TypeScript 支持**：全面使用 TypeScript 进行开发，提供类型安全
+2. **组合式 API**：使用 Vue 3 的组合式 API 进行开发，提高代码复用性
+3. **自定义请求库**：封装了基于 uni.request 的请求库，支持拦截器和错误处理
+4. **状态持久化**：使用 pinia-plugin-persistedstate 实现状态持久化
+5. **分包加载**：采用分包策略优化小程序加载性能
+6. **自定义组件**：开发了多个可复用的业务组件
diff --git a/笔记.md b/笔记.md
new file mode 100644
index 0000000..6017e5b
--- /dev/null
+++ b/笔记.md
@@ -0,0 +1,1690 @@
+# uni-app
+
+> 基于 `vue` 语法的 `全端开发框架`
+
+官网: https://uniapp.dcloud.io/
+
+## 创建项目
+
+https://uniapp.dcloud.net.cn/quickstart-cli.html
+
+vue 3:
+
+1. 创建项目
+
+```sh
+npx degit 'dcloudio/uni-preset-vue#vite-ts' uni-shop # zsh中#不用引号包起来会报错
+
+# 直接下载模板的话在 https://github.com/dcloudio/uni-preset-vue/tree/vite-ts
+
+pnpn i
+pnpm add -D sass
+```
+
+2. 运行项目 `pnpm run dev:mp-weixin`
+3. 使用微信小程序开发者工具来导入和预览项目 `dist/dev/mp-weixin`
+
+==注意: 只能修改uni-app项目的文件, 不能修改编译后的小程序文件==
+
+旧项目更新编译器主要依赖:
+
+```sh
+npx @dcloudio/uvm@latest
+```
+
+## 小程序的注意项
+
+- 标签: div 和 ul 和 li 等改为 `view`、span 改为 `text`、a 改为 `navigator`、img 改为 `image`
+- 不能使用浏览器对象: 比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等对象
+- style 不需要设置 soped, 多页面样式互相隔离
+- css 不能使用 \* 选择器, body的元素选择器请改为page
+- [微信小程序当前bug列表](https://developers.weixin.qq.com/community/develop/issueList?type=%E4%BF%AE%E5%A4%8D%E4%B8%AD&block=bug)
+
+## 目录结构
+
+```
+├─pages            业务页面文件存放的目录
+│  └─index
+│     └─index.vue  index页面
+├─static           存放应用引用的本地静态资源的目录(注意：静态资源只能存放于此)
+├─unpackage        非工程代码，一般存放运行或发行的编译结果
+├─index.html       H5端页面
+├─main.js          Vue初始化入口文件
+├─App.vue          配置App全局样式、监听应用生命周期
+├─pages.json       配置页面路由、导航栏、tabBar等页面类信息
+├─manifest.json    配置appid、应用名称、logo、版本等打包信息
+└─uni.scss         uni-app内置的常用样式变量
+```
+
+## pages.json 页面路由
+
+> 对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
+
+https://uniapp.dcloud.net.cn/collocation/pages.html
+
+`src\pages.json`
+
+```json
+{
+  // https://uniapp.dcloud.io/collocation/pages
+  // 页面路由
+  // pages数组中第一项表示应用启动页
+  "pages": [
+    {
+      "path": "pages/index/index",
+      // 页面样式
+      "style": {
+        "navigationStyle": "custom", // 隐藏顶部默认导航
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
+      "path": "pages/my/index",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "我的"
+      }
+    }
+  ],
+  // 全局样式
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}
+```
+
+### 导航栏
+
+```json
+"navigationStyle": "custom", // 隐藏顶部默认导航
+```
+
+https://ask.dcloud.net.cn/article/34921
+
+### easycom 组件自动导入
+
+```json
+"easycom": {
+  // 是否开启自动扫描
+  "autoscan": true,
+  // 以正则方式自定义组件匹配规则
+  "custom": {
+    // uni-ui 规则如下配置
+    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
+    // 以 Jbc 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
+    "^Jbc(.*)": "@/components/Jbc$1.vue"
+  }
+},
+```
+
+### 底部标签栏
+
+https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
+
+```json
+  "tabBar": {
+    "color": "#333",
+    "selectedColor": "#18c7ff",
+    "backgroundColor": "#fff",
+    "borderStyle": "white",
+    "spacing": "5px",
+    "list": [
+      {
+        "text": "首页",
+        "pagePath": "pages/index/index",
+        "iconPath": "static/tabs/home_default.png",
+        "selectedIconPath": "static/tabs/home_selected.png"
+      },
+      {
+        "text": "我的",
+        "pagePath": "pages/my/index",
+        "iconPath": "static/tabs/user_default.png",
+        "selectedIconPath": "static/tabs/user_selected.png"
+      }
+    ]
+  },
+```
+
+## manifest.json 应用配置
+
+> 例如修改 appid
+
+https://uniapp.dcloud.net.cn/collocation/manifest.html
+
+```
+src\manifest.json
+```
+
+修改了项目的配置文件, 需要重启
+
+最外面的appid, 是需要用到 Dcloud 云服务 (例如打包成 ios) 自动分配的, `mp-weixin => appid` 这里的才是微信小程序的
+
+## uni-app 生命周期
+
+- 应用生命周期：与 **小程序** 应用的生命周期一致（onLaunch、onShow、onHide 等） https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle
+- 页面生命周期：与 **小程序** 页面的生命周期一致（onLoad、onUnload、onShow 等） https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
+- 组件生命周期：与 **Vue.js** 组件的生命周期一致（created、mounted等） https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle
+
+**页面组件优先使用小程序的生命周期钩子**，也就是 onShow、onHide 这些，普通组件就用 Vue 生命周期钩子
+
+### 页面生命周期
+
+https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
+
+![|700x1115](https://img.081024.xyz/image-1744773925981.jpeg)
+
+1. 首先根据pages.json的配置，创建页面
+2. 根据页面template里的组件，创建静态dom
+3. 触发onLoad
+   1. 比较适合的操作是：接受上页的参数，联网取数据，更新data
+   2. 不能操作 dom
+4. 转场动画开始
+5. 页面onReady
+6. 转场动画结束
+
+#### onShow和onHide
+
+a页面刚进入时，会触发a页面的onShow
+
+当a跳转到b页面时，a会触发onHide，而b会触发onShow
+
+但当b被关闭时，b会触发onUnload，此时a再次显示出现，会再次触发onShow
+
+不同tab页面互相切换时，会触发各自的onShow和onHide
+
+#### onBackPress
+
+> 触发返回
+
+```js
+onBackPress(options) {
+	console.log('from:' + options.from)
+}
+// from:
+//    'backbutton'——左上角导航栏按钮及安卓返回键；
+//    'navigateBack'——uni.navigateBack() 方法
+```
+
+### 组件生命周期
+
+> 和 vue 一样
+
+## 页面和路由
+
+https://uniapp.dcloud.net.cn/api/router.html#navigateto
+
+- `uni.navigateTo`: ===保留当前页面, 跳转到新页面===, 旧页面并没有被销毁, 而是放入页面栈
+- `uni.navigateBack` 后退时不会触发 onLoad 而是 onShow
+- `uni.redirectTo` 销毁页面跳转到新页面
+
+## 页面通讯
+
+`uni.$emit(eventName,OBJECT)`
+
+`uni.$on(eventName,callback)`
+
+`uni.$once(eventName,callback)`
+
+`uni.$off(eventName, callback)`
+
+## ui 库
+
+uview 不支持 vue 3, 使用 uni-app 自带组件
+
+https://uniapp.dcloud.net.cn/component/
+
+### 内置组件
+
+#### 视图容器
+
+| 组件名                                                                                | 说明                                                                                   |
+| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| [view](https://uniapp.dcloud.net.cn/component/view.html)                              | 视图容器，类似于HTML中的div                                                            |
+| [scroll-view](https://uniapp.dcloud.net.cn/component/scroll-view.html)                | 可滚动视图容器                                                                         |
+| [swiper](https://uniapp.dcloud.net.cn/component/swiper.html)                          | 滑块视图容器，比如用于轮播banner                                                       |
+| [match-media](https://uniapp.dcloud.net.cn/component/match-media.html)                | 屏幕动态适配组件，比如窄屏上不显示某些内容                                             |
+| [movable-area](https://uniapp.dcloud.net.cn/component/movable-view.html#movable-area) | 可拖动区域                                                                             |
+| [movable-view](https://uniapp.dcloud.net.cn/component/movable-view.html#movable-view) | 可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中 |
+| [cover-view](https://uniapp.dcloud.net.cn/component/cover-view#cover-view)            | 可覆盖在原生组件的上的文本组件                                                         |
+| [cover-image](https://uniapp.dcloud.net.cn/component/cover-view#cover-image)          | 可覆盖在原生组件的上的图片组件                                                         |
+
+#### 基础内容
+
+| 组件名                                                             | 说明           |
+| ------------------------------------------------------------------ | -------------- |
+| [icon](https://uniapp.dcloud.net.cn/component/icon.html)           | 图标           |
+| [text](https://uniapp.dcloud.net.cn/component/text.html)           | 文字           |
+| [rich-text](https://uniapp.dcloud.net.cn/component/rich-text.html) | 富文本显示组件 |
+| [progress](https://uniapp.dcloud.net.cn/component/progress.html)   | 进度条         |
+
+#### 表单组件
+
+| 标签名                                                                 | 说明                 |
+| ---------------------------------------------------------------------- | -------------------- |
+| [button](https://uniapp.dcloud.net.cn/component/button.html)           | 按钮                 |
+| [checkbox](https://uniapp.dcloud.net.cn/component/checkbox.html)       | 多项选择器           |
+| [editor](https://uniapp.dcloud.net.cn/component/editor.html)           | 富文本输入框         |
+| [form](https://uniapp.dcloud.net.cn/component/form.html)               | 表单                 |
+| [input](https://uniapp.dcloud.net.cn/component/input.html)             | 输入框               |
+| [label](https://uniapp.dcloud.net.cn/component/label.html)             | 标签                 |
+| [picker](https://uniapp.dcloud.net.cn/component/picker.html)           | 弹出式列表选择器     |
+| [picker-view](https://uniapp.dcloud.net.cn/component/picker-view.html) | 窗体内嵌式列表选择器 |
+| [radio](https://uniapp.dcloud.net.cn/component/radio.html)             | 单项选择器           |
+| [slider](https://uniapp.dcloud.net.cn/component/slider.html)           | 滑动选择器           |
+| [switch](https://uniapp.dcloud.net.cn/component/switch.html)           | 开关选择器           |
+| [textarea](https://uniapp.dcloud.net.cn/component/textarea.html)       | 多行文本输入框       |
+
+#### 路由与页面跳转
+
+| 组件名                                                             | 说明                          |
+| ------------------------------------------------------------------ | ----------------------------- |
+| [navigator](https://uniapp.dcloud.net.cn/component/navigator.html) | 页面链接。类似于HTML中的a标签 |
+
+#### 媒体组件
+
+| 组件名                                                                 | 说明                         |
+| ---------------------------------------------------------------------- | ---------------------------- |
+| [audio](https://uniapp.dcloud.net.cn/component/audio.html)             | 音频                         |
+| [camera](https://uniapp.dcloud.net.cn/component/camera.html)           | 相机                         |
+| [image](https://uniapp.dcloud.net.cn/component/image.html)             | 图片                         |
+| [video](https://uniapp.dcloud.net.cn/component/video.html)             | 视频                         |
+| [live-player](https://uniapp.dcloud.net.cn/component/live-player.html) | 直播播放                     |
+| [live-pusher](https://uniapp.dcloud.net.cn/component/live-pusher.html) | 实时音视频录制，也称直播推流 |
+
+##### image
+
+- `mode`:
+  - aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来
+  - aspectFill : 保持纵横比缩放图片，只保证图片的短边能完全显示出来
+  - widthFix: 宽度不变，高度自动变化，保持原图宽高比不变
+
+#### 地图
+
+| 组件名                                                 | 说明 |
+| ------------------------------------------------------ | ---- |
+| [map](https://uniapp.dcloud.net.cn/component/map.html) | 地图 |
+
+#### 画布
+
+| 组件名                                                       | 说明 |
+| ------------------------------------------------------------ | ---- |
+| [canvas](https://uniapp.dcloud.net.cn/component/canvas.html) | 画布 |
+
+#### webview
+
+| 组件名                                                           | 说明          |
+| ---------------------------------------------------------------- | ------------- |
+| [web-view](https://uniapp.dcloud.net.cn/component/web-view.html) | web浏览器组件 |
+
+#### 广告
+
+| 组件名                                                         | 说明               |
+| -------------------------------------------------------------- | ------------------ |
+| [ad](https://uniapp.dcloud.net.cn/component/ad.html)           | 广告组件           |
+| [ad-draw](https://uniapp.dcloud.net.cn/component/ad-draw.html) | 沉浸视频流广告组件 |
+
+#### 页面属性配置
+
+| 组件名                                                                       | 说明                 |
+| ---------------------------------------------------------------------------- | -------------------- |
+| [custom-tab-bar](https://uniapp.dcloud.net.cn/component/custom-tab-bar.html) | 底部tabbar自定义组件 |
+| [navigation-bar](https://uniapp.dcloud.net.cn/component/navigation-bar.html) | 页面顶部导航         |
+| [page-meta](https://uniapp.dcloud.net.cn/component/page-meta.html)           | 页面属性配置节点     |
+
+#### uniCloud
+
+| 组件名                                                            | 说明                         |
+| ----------------------------------------------------------------- | ---------------------------- |
+| [unicloud-db组件](https://doc.dcloud.net.cn/uniCloud/unicloud-db) | uniCloud数据库访问和操作组件 |
+
+### uni-ui
+
+> 扩展组件, 符合 easycom 标准, 会自动导入
+
+```sh
+# 安装
+pnpm add @dcloudio/uni-ui
+```
+
+| 组件名                | 组件说明                                                                        |
+| --------------------- | ------------------------------------------------------------------------------- |
+| uni-badge             | [数字角标](https://ext.dcloud.net.cn/plugin?name=uni-badge)                     |
+| uni-calendar          | [日历](https://ext.dcloud.net.cn/plugin?name=uni-calendar)                      |
+| uni-card              | [卡片](https://ext.dcloud.net.cn/plugin?name=uni-card)                          |
+| uni-collapse          | [折叠面板](https://ext.dcloud.net.cn/plugin?name=uni-collapse)                  |
+| uni-combox            | [组合框](https://ext.dcloud.net.cn/plugin?name=uni-combox)                      |
+| uni-countdown         | [倒计时](https://ext.dcloud.net.cn/plugin?name=uni-countdown)                   |
+| uni-data-checkbox     | [数据选择器](https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox)           |
+| uni-data-picker       | [数据驱动的picker选择器](https://ext.dcloud.net.cn/plugin?name=uni-data-picker) |
+| uni-dateformat        | [日期格式化](https://ext.dcloud.net.cn/plugin?name=uni-dateformat)              |
+| uni-datetime-picker   | [日期选择器](https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker)         |
+| uni-drawer            | [抽屉](https://ext.dcloud.net.cn/plugin?name=uni-drawer)                        |
+| uni-easyinput         | [增强输入框](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)               |
+| uni-fab               | [悬浮按钮](https://ext.dcloud.net.cn/plugin?name=uni-fab)                       |
+| uni-fav               | [收藏按钮](https://ext.dcloud.net.cn/plugin?name=uni-fav)                       |
+| uni-file-picker       | [文件选择上传](https://ext.dcloud.net.cn/plugin?name=uni-file-picker)           |
+| uni-forms             | [表单](https://ext.dcloud.net.cn/plugin?name=uni-forms)                         |
+| uni-goods-nav         | [商品导航](https://ext.dcloud.net.cn/plugin?name=uni-goods-nav)                 |
+| uni-grid              | [宫格](https://ext.dcloud.net.cn/plugin?name=uni-grid)                          |
+| uni-group             | [分组](https://ext.dcloud.net.cn/plugin?name=uni-group)                         |
+| uni-icons             | [图标](https://ext.dcloud.net.cn/plugin?name=uni-icons)                         |
+| uni-indexed-list      | [索引列表](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)              |
+| uni-link              | [超链接](https://ext.dcloud.net.cn/plugin?name=uni-link)                        |
+| uni-list              | [列表](https://ext.dcloud.net.cn/plugin?name=uni-list)                          |
+| uni-load-more         | [加载更多](https://ext.dcloud.net.cn/plugin?name=uni-load-more)                 |
+| uni-nav-bar           | [自定义导航栏](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar)               |
+| uni-notice-bar        | [通告栏](https://ext.dcloud.net.cn/plugin?name=uni-notice-bar)                  |
+| uni-number-box        | [数字输入框](https://ext.dcloud.net.cn/plugin?name=uni-number-box)              |
+| uni-pagination        | [分页器](https://ext.dcloud.net.cn/plugin?name=uni-pagination)                  |
+| uni-popup             | [弹出层](https://ext.dcloud.net.cn/plugin?name=uni-popup)                       |
+| uni-rate              | [评分](https://ext.dcloud.net.cn/plugin?name=uni-rate)                          |
+| uni-row               | [布局-行](https://ext.dcloud.net.cn/plugin?name=uni-row)                        |
+| uni-search-bar        | [搜索栏](https://ext.dcloud.net.cn/plugin?name=uni-search-bar)                  |
+| uni-segmented-control | [分段器](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)           |
+| uni-steps             | [步骤条](https://ext.dcloud.net.cn/plugin?name=uni-steps)                       |
+| uni-swipe-action      | [滑动操作](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action)              |
+| uni-swiper-dot        | [轮播图指示点](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot)            |
+| uni-table             | [表格](https://ext.dcloud.net.cn/plugin?name=uni-table)                         |
+| uni-tag               | [标签](https://ext.dcloud.net.cn/plugin?name=uni-tag)                           |
+| uni-title             | [章节标题](https://ext.dcloud.net.cn/plugin?name=uni-title)                     |
+| uni-transition        | [过渡动画](https://ext.dcloud.net.cn/plugin?name=uni-transition)                |
+
+## uni-api
+
+- 出现目的
+
+1. 很多的原生的小程序的api 不支持 promise `wx.request`
+2. 想要做一个跨平台 应用 那么 发送请求 该用哪一代码来发送 3. axios 针对 网页的!!! 4. wx.request 只针对 微信小程序 5. 自己去封装一个api 可以去兼容适配所有的客户端
+
+```
+if (微信小程序) wx.request
+if (web)  axios
+if (支付宝) ...
+```
+
+- 如何使用
+
+```js
+uni.request
+```
+
+## 语法
+
+1. 标签优先使用 uni-app 的
+2. js语法和vue一样
+3. 特有的api: `uni.request`, `uni.showToast`
+4. 生命周期参考上面的
+
+### css 单位 rpx
+
+- 以 750 px 宽的屏幕为基准，750rpx 恰好为屏幕宽度
+- 设计师可以用 iPhone6 作为视觉稿的标准, 对应 750rpx
+
+## 分包优化
+
+https://uniapp.dcloud.net.cn/collocation/manifest.html#关于分包优化的说明
+
+## 项目实战
+
+视频: https://www.bilibili.com/video/BV1Bp4y1379L
+
+笔记: https://gitee.com/Megasu/uni-app-shop-note
+
+高星框架: https://github.com/codercup/unibest
+
+### 框架搭建
+
+#### vscode 插件
+
+`.vscode/extensions.json`
+
+```json
+{
+  // 推荐的扩展插件
+  "recommendations": [
+    "mrmaoddxxaa.create-uniapp-view", // 创建 uni-app 页面
+    "uni-helper.uni-helper-vscode", // uni-app 代码提示
+    "evils.uniapp-vscode", // uni-app 文档
+    "vue.volar", // vue3 语法支持
+    "editorconfig.editorconfig", // editorconfig
+    "dbaeumer.vscode-eslint", // eslint
+    "esbenp.prettier-vscode" // prettier
+  ]
+}
+```
+
+#### create-uniapp-view 设置
+
+设置: 创建同名文件夹、不使用 scoped、预编译器 scss、vue 3
+
+#### 类型提示
+
+> uni-app 类型, 由第三方 uni-helper 提供
+
+```sh
+pnpm add @uni-helper/uni-app-types @uni-helper/uni-ui-types -D
+```
+
+> 微信小程序的类型提示
+
+```sh
+pnpm add miniprogram-api-typings -D
+```
+
+> nodejs
+
+```sh
+pnpm add @types/node -D
+```
+
+在 `tsconfig.json` 的 types 中添加
+
+```json
+{
+  //...
+  "compilerOptions": {
+    //...
+    "types": [
+      "@dcloudio/types",
+      "miniprogram-api-typings",
+      "@uni-helper/uni-app-types",
+      "@uni-helper/uni-ui-types"
+    ]
+  },
+  //...
+  "vueCompilerOptions": {
+    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
+  }
+}
+```
+
+- TypeScript 默认设置 typeRoots 包含了 `node_modules/@types`, 以 `@types` 开头的包不需要手动添加
+
+#### vscode 设置
+
+`.vscode/settings.json`
+
+```json
+{
+  // 在保存时格式化文件
+  "editor.formatOnSave": true,
+  // 文件格式化配置
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // 控制资源管理器是否应以紧凑形式呈现文件夹。单个子文件夹将被压缩在组合的树元素中。
+  "explorer.compactFolders": false,
+  // 配置 vue 文件的默认格式化工具为 prettier
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // 配置 html 文件的默认格式化工具为 prettier
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // 配置 ts 文件的默认格式化工具为 prettier
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // 配置语言的文件关联
+  "files.associations": {
+    "pages.json": "jsonc", // pages.json 可以写注释
+    "manifest.json": "jsonc" // manifest.json 可以写注释
+  }
+}
+```
+
+#### prettierrc
+
+```sh
+pnpm add 'prettier@^3' '@vue/eslint-config-prettier@^9' -D
+```
+
+`.prettierrc.json`
+
+```json
+{
+  "singleQuote": true,
+  "semi": false,
+  "printWidth": 120,
+  "trailingComma": "all",
+  "endOfLine": "auto"
+}
+```
+
+#### eslint
+
+```sh
+pnpm add 'eslint@^8' 'eslint-plugin-vue@^9' '@vue/eslint-config-typescript@^11' '@rushstack/eslint-patch@^1' -D
+```
+
+`.eslintrc.cjs`
+
+```json
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier',
+  ],
+  // 小程序全局变量
+  globals: {
+    uni: true,
+    wx: true,
+    WechatMiniprogram: true,
+    getCurrentPages: true,
+    UniApp: true,
+    UniHelper: true,
+    Page: true,
+    AnyObject: true,
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  rules: {
+    'prettier/prettier': [
+      'warn',
+      {
+        singleQuote: true,
+        semi: false,
+        printWidth: 100,
+        trailingComma: 'all',
+        endOfLine: 'auto',
+      },
+    ],
+    'vue/multi-word-component-names': ['off'],
+    'vue/no-setup-props-destructure': ['off'],
+    'vue/no-deprecated-html-element-is': ['off'],
+    '@typescript-eslint/no-unused-vars': ['off'],
+  },
+}
+```
+
+#### editorconfig
+
+`.editorconfig`
+
+```ini
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+```
+
+#### husky
+
+> 提交前格式校验
+
+```sh
+pnpm add husky lint-staged -D
+```
+
+`.husky/pre-commit`
+
+```sh
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint-staged
+```
+
+`package.json`
+
+```json
+{
+  // ...
+  "scripts": {
+    // ...
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "prepare": "husky install",
+    "lint-staged": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,ts,vue}": ["eslint --fix"]
+  }
+  //...
+}
+```
+
+### 修改appid
+
+微信公众号平台: https://mp.weixin.qq.com/
+
+注册 --> 管理 --> 开发管理 --> AppID(小程序ID)
+
+可以修改 `src/manifest.json` 中的 `mp-weixin => appid`, 或者直接在模拟器的详情中修改
+
+### pinia 持久化
+
+```sh
+pnpm add 'pinia@^2' 'pinia-plugin-persistedstate@^3'
+```
+
+- `pinia-plugin-persistedstate` 默认使用 `localStorage`, 需要改为 uni app 的 `uni.setStorageSync()` 和 `uni.getStorageSync()`
+- https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/config.html#storage
+- pinia 3 暂时不兼容: https://github.com/dcloudio/uni-app/issues/5326
+
+`src/stores/index.ts`
+
+```ts
+import { createPinia } from 'pinia'
+import persist from 'pinia-plugin-persistedstate'
+
+// 创建 pinia 实例
+const pinia = createPinia()
+// 使用持久化存储插件
+pinia.use(persist)
+
+// 默认导出，给 main.ts 使用
+export default pinia
+```
+
+`main.ts`
+
+```ts
+// 导入 pinia 实例
+import pinia from './stores/'
+
+// ...
+// 在 return 前添加
+
+// 使用 pinia
+app.use(pinia)
+```
+
+`stores/modules/member.ts`
+
+- 小程序没有 localStorage
+
+```ts
+export const useMemberStore = defineStore(
+  'member',
+  () => {
+    //…省略
+  },
+  {
+    // 配置持久化
+    persist: {
+      // 调整为兼容多端的API
+      storage: {
+        setItem(key, value) {
+          uni.setStorageSync(key, value) // [!code warning]
+        },
+        getItem(key) {
+          return uni.getStorageSync(key) // [!code warning]
+        },
+      },
+    },
+  },
+)
+```
+
+### 拦截器
+
+> 应用场景: 给请求 `request` 添加基础地址、超时时间、请求头标识、token
+> 文件上传 `uploadFile` 同样添加
+
+https://uniapp.dcloud.net.cn/api/interceptor.html#addinterceptor
+
+- 添加拦截器: `uni.addInterceptor`
+
+```js
+uni.request({
+  url: 'request/login', //仅为示例，并非真实接口地址。
+  success: (res) => {
+    console.log(res.data)
+    // 打印： {code:1,...}
+  },
+})
+
+uni.addInterceptor('request', {
+  invoke(args) {
+    // 拦截前触发
+    args.url = 'https://www.example.com/' + args.url
+  },
+  success(args) {
+    // 成功回调拦截
+    args.data.code = 1
+  },
+  fail(err) {
+    // 失败回调拦截
+    console.log('interceptor-fail', err)
+  },
+  complete(res) {
+    // 完成回调拦截
+    console.log('interceptor-complete', res)
+  },
+})
+
+uni.addInterceptor({
+  returnValue(args) {
+    // 方法调用后触发，处理返回值
+    return args.data
+  },
+})
+```
+
+- 删除拦截器 `uni.removeInterceptor`
+
+```js
+uni.removeInterceptor('request')
+```
+
+### 响应封装
+
+- 成功:
+  - 提取 res. data
+  - 添加类型支持
+- 失败
+  - 网络错误: 提示换网络
+  - 401: 清理用户信息, 跳转登录页
+  - 其他错误: 轻提示
+
+注意项:
+
+- uni-app 的 request 只有网络错误才会走 fail, 权限不足等后端有响应的, 都是 success. 需要通过 `res.statusCode` 状态码进一步控制
+
+### 自定义导航栏
+
+https://ask.dcloud.net.cn/article/34921
+
+`src/pages/index/components/CustomNavbar.vue`
+
+样式适配: 安全区域 (例如刘海屏)
+
+```ts
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+```
+
+用来设置 paddingTop
+
+```vue
+<view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
+</view>
+```
+
+### 轮播图通用组件
+
+#### 配置 easycom 自动导入
+
+`page.json`
+
+```json
+"easycom": {
+  // 是否开启自动扫描
+  "autoscan": true,
+  // 以正则方式自定义组件匹配规则
+  "custom": {
+    // ...
+    // 以 Jbc 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
+    "^Jbc(.*)": "@/components/Jbc$1.vue"
+  }
+},
+```
+
+#### 组件
+
+`src/components/JbcSwiper.vue`
+
+使用: `swiper` 滑动视图容器
+
+https://uniapp.dcloud.net.cn/component/swiper.html
+
+在 `onload` 钩子中调用 api
+
+- `swiper` 绑定 `change` 事件的类型: `UniHelper.SwiperOnChange`
+
+```ts
+const handleChange: UniHelper.SwiperOnChange = (e) => {
+  activeIndex.value = e.detail!.current
+}
+```
+
+#### 类型提示
+
+`src/types/components.d.ts`
+
+```ts
+import JbcSwiper from '@/components/JbcSwiper.vue'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    JbcSwiper: typeof JbcSwiper
+  }
+}
+
+// 组件实例类型 (typeof xxx组件 获取到的是构造函数类型)
+export type JbcSwiperInstance = InstanceType<typeof JbcSwiper>
+```
+
+- declare module 会与现有模块类型合并，而不是覆盖
+
+#### api 封装
+
+`src/services/home.ts`
+
+- `uni.request()` : 当请求类型为 get 时, 把 data 里的键值对转化为 query 参数
+
+### 首页分类组件
+
+略
+
+### 热门推荐
+
+略
+
+### 猜你喜欢通用模块
+
+参考: `JbcSwiper.vue`
+
+首页添加滚动组件:
+
+- `scroll-view` 组件:
+  - @scrolltolower: 滚动到底触发
+
+父组件调用子组件的方法:
+
+- 子组件通过 `defineExpose({methodName})` 暴露方法
+- 父组件给组件绑定 `ref="xxx"`, 通过 `xxx.value.methodName()`
+  - 子组件的类型为自定义组件实例类型 `JbcGuessInstance`
+
+滚动到底时调用猜你喜欢模块获取下页数据插入数组
+
+### 首页下拉刷新
+
+- `scroll-view` 组件:
+  - refresher-enabled: 开启自定义下拉刷新
+  - @refresherrefresh: 自定义下拉刷新被触发
+  - refresher-triggered: 设置当前下拉刷新状态
+  - enable-back-to-top: iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
+
+刷新时, 多个 api 用 `Promise.allSettled()`
+
+bug 修复: 下拉刷新后轮播图指示器错乱
+
+原因:
+
+- 每次刷新, 获取的轮播图数据都会随机打乱, 用 id 作为 key 导致 dom 更新异常改为 `:key="item.id + index"`
+- `watch` 监听 `props.list` 的变化, 复位 `activeIndex.value=0`
+
+### 首页骨架屏
+
+- 在微信开发者工具模拟器右下角三个小点的菜单里, 有生成骨架屏选项
+- 复制 `index.skeleton.wxml` 到 template, 复制 `index.skeleton.wxss` 到 style
+- 自定义导航栏不需要加载数据, 只保留滚动容器里面的部分
+
+### 热门推荐详情页
+
+- uni-app 获取路由参数
+
+```ts
+// uni-app获取路由参数
+const query = defineProps<{
+  type: string
+}>()
+console.log(query)
+```
+
+- uni-app 动态设置标题
+
+```ts
+// 动态设置标题
+uni.setNavigationBarTitle({ title: '标题名' })
+```
+
+- 判断当前是不是开发环境, 方便设置模拟数据
+
+```ts
+{
+	page: import.meta.env.DEV ? 33 : 1,
+	pageSize: 10,
+}
+```
+
+### 商品分类页
+
+- 小程序开发者工具直接显示分类页, 免去点击跳转:
+
+点击'普通编译 -> 添加编译模式 -> 选择要启动页面为要编译的页面'
+
+- 切换分类时, 滚动条不恢复到顶部:
+
+```ts
+// 切换分类时，滚动到顶部
+const scrollTop = ref(0) // scrollTop绑定到 scroll-view 的 scroll-top 属性上
+// 记录滚动位置, 保存到另一个变量
+// 切换分页的时候,先还原scrollTop的旧值,然后在视图渲染后,再设置scrollTop等于0触发还原
+const scroolTopOld = ref(0)
+
+type ScrollEvent = {
+  detail: {
+    scrollTop: number
+    scrollLeft: number
+    scrollHeight: number
+    scrollWidth: number
+    deltaX: number
+    deltaY: number
+  }
+  [key: string]: any
+}
+const handlerScrool = (e: ScrollEvent) => {
+  scroolTopOld.value = e.detail.scrollTop
+}
+
+watch(activeIndex, () => {
+  scrollTop.value = scroolTopOld.value
+  nextTick(() => {
+    scrollTop.value = 0
+  })
+})
+```
+
+### 商品详情页
+
+- 图标: 使用阿里巴巴字体图标 https://www.iconfont.cn/
+
+字体可以上传到 cdn, `iconfont.css` 需要修改 `font-face`
+
+```css
+@font-face {
+  font-family: 'iconfont'; /* Project id  */
+  src: url('iconfont.ttf?t=1745547896290') format('truetype');
+}
+```
+
+- 操作栏有按钮, 需要设置安全区域 (可能有小白条) 防止误操作
+
+```vue
+<view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
+</view>
+```
+
+- 弹出层组件 `uni-popup`
+
+https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html
+
+属性:
+
+- type: 弹出方式, top center bottom left right message dialog share
+- background-color: 主窗口背景色
+- 先用 ref 绑定 `uni-popup`, 再调用 ref 的 open 和 close 方法控制是否显示
+
+类型定义: `UniHelper.UniPopupInstance` 类型里的 `open()` 和 `close()` 是可选的, 会导致 `popup.value?.open()` 报错, 需要使用交叉类型
+
+```ts
+const popup = ref<
+  UniHelper.UniPopupInstance & {
+    open: (type?: UniHelper.UniPopupType) => void
+    close: () => void
+  }
+>()
+```
+
+- `NonNullable<type>`: 去除类型里的 null 和 undefined
+
+### 登录模块
+
+#### 快捷登录
+
+- 登陆流程
+
+  ![|700x710](https://img.081024.xyz/image-1745582023800.jpeg)
+
+- 获取用户凭证 `code`
+
+===有效期五分钟===。开发者需要在开发者服务器后台调用 code2Session，使用 code 换取 openid、unionid、session_key 等信息
+
+不能在 `getphonenumber` 里调用, 在 `onload` 里
+
+```ts
+wx.login(Object object)
+```
+
+https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
+
+- 获取手机号 (小程序有隐私保护, 需要用户同意, 且个人开发者没法调用)
+
+`button` 需要设置 `open-type=getPhoneNumber`, 然后在 `@getphonenumber` 回调中拿到手机号
+
+https://uniapp.dcloud.net.cn/component/button.html#button
+
+https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
+
+### 个人中心
+
+- 封装组合式函数 `src/composables/index.ts`
+
+> 函数命名以 use 开头, 放 composables 文件夹下
+
+```ts
+import type { JbcGuessInstance } from '@/types/components'
+import { ref } from 'vue'
+
+export const useGuessList = () => {
+  const guessRef = ref<JbcGuessInstance>()
+  const onScrollToLower = () => {
+    guessRef.value?.getMore()
+  }
+  return { guessRef, onScrollToLower }
+}
+```
+
+调用:
+
+```ts
+import { useGuessList } from '@/composables'
+
+const { guessRef, onScrollToLower } = useGuessList()
+```
+
+- 设置页分包
+
+> 把不常用的页面拆成另外的包, 当某些步骤可能需要打开时, 提前预加载
+
+存放目录: 和 `pages` 同级, 例如 `pagesMember/settings/settings.vue`
+
+在 `pages.json` 中添加 `subPackages`, 和 `pages` 同级
+
+```json
+// 分包
+"subPackages": [
+  {
+    // 子包的根目录
+    "root": "pagesMember",
+    // pages参数和主包一样
+    "pages": [
+      {
+        "path": "settings/settings",
+        "style": {
+          "navigationBarTitleText": "设置"
+        }
+      }
+    ]
+  }
+]
+```
+
+- 设置预下载 `page.json`
+
+> key 是页面路径
+
+https://uniapp.dcloud.net.cn/collocation/pages.html#preloadrule
+
+```json
+// 预下载
+"preloadRule": {
+  "pages/my/my": {
+    "network": "all",
+    "packages": ["pagesMember"]
+  }
+}
+```
+
+### 设置页面
+
+- 显示模态框: `uni.showModal()`
+- 路由后退: `uni.navigateBack()`
+
+### 修改用户信息
+
+- `Pick<Type, Keys>` : 从类型中选取指定属性
+- `picker` 选择器
+  - 时间选择器: `mode = time`
+  - 省市区选择器: `mode = region`
+
+https://uniapp.dcloud.net.cn/component/picker.html
+
+- `radio` 选择器
+
+https://uniapp.dcloud.net.cn/component/radio.html
+
+- 修改头像: 调用拍照 api `uni.chooseMedia`
+- 上传头像: `uni.uploadFile`
+
+### 收货地址
+
+#### 地址表单
+
+- 切换开关 `switch` 组件
+
+https://uniapp.dcloud.net.cn/component/switch.html
+
+- `uni.navigateBack`, 触发的是 onShow 事件, 要把请求列表放到 onShow 而不是 onLoad
+
+#### 数据校验
+
+- 表单校验: 使用 `<uni-forms>` 组件
+  - 表单绑定 `ref  modelValue rules`
+  - 表单项设置 `label name`
+  - 原生 checkbox 或三方组件不支持 v-model 等, `onFieldChange`
+  - 提交前再调用 formRef 的 `.validate()`, 返回的是 Promise
+
+https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
+
+```ts
+// 表单验证规则
+const rules: UniFormsRules = {
+  receiver: {
+    rules: [
+      { required: true, errorMessage: '请输入收货人姓名' },
+      {
+        minLength: 2,
+        maxLength: 5,
+        errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
+      },
+    ],
+  },
+  contact: {
+    rules: [
+      { required: true, errorMessage: '请输入联系电话' },
+      {
+        pattern: /^1[3-9]\d{9}$/,
+        errorMessage: '手机号码为11位数字',
+      },
+    ],
+  },
+  fullLocation: {
+    rules: [{ required: true, errorMessage: '请选择省市区' }],
+  },
+  address: {
+    rules: [
+      { required: true, errorMessage: '请输入详细地址' },
+      {
+        minLength: 2,
+        maxLength: 20,
+        errorMessage: '详细地址长度在 {minLength} 到 {maxLength} 个字符',
+      },
+    ],
+  },
+}
+```
+
+#### 删除功能
+
+- 删除地址: 侧划组件 `uni-swipe-action`
+
+https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html
+
+### SKU 模块 - 最小存货单位
+
+- SKU 算法: https://juejin.cn/post/7002746459456176158
+- 插件市场: https://ext.dcloud.net.cn/
+- 插件下载: https://gitee.com/vk-uni/vk-u-goods-sku-popup
+
+#### 类型定义
+
+创建 `vk-data-goods-sku-popup.d.ts`, 放在 `vk-data-goods-sku-popup` 目录下
+
+```ts
+import { Component } from '@uni-helper/uni-app-types'
+
+/** SKU 弹出层 */
+export type SkuPopup = Component<SkuPopupProps>
+
+/** SKU 弹出层实例 */
+export type SkuPopupInstance = InstanceType<SkuPopup>
+
+/** SKU 弹出层属性 */
+export type SkuPopupProps = {
+  /** 双向绑定，true 为打开组件，false 为关闭组件 */
+  modelValue: boolean
+  /** 商品信息本地数据源 */
+  localdata: SkuPopupLocaldata
+  /** 按钮模式 1:都显示 2:只显示购物车 3:只显示立即购买 */
+  mode?: 1 | 2 | 3
+  /** 该商品已抢完时的按钮文字 */
+  noStockText?: string
+  /** 库存文字 */
+  stockText?: string
+  /** 点击遮罩是否关闭组件 */
+  maskCloseAble?: boolean
+  /** 顶部圆角值 */
+  borderRadius?: string | number
+  /** 最小购买数量 */
+  minBuyNum?: number
+  /** 最大购买数量 */
+  maxBuyNum?: number
+  /** 每次点击后的数量 */
+  stepBuyNum?: number
+  /** 是否只能输入 step 的倍数 */
+  stepStrictly?: boolean
+  /** 是否隐藏库存的显示 */
+  hideStock?: false
+  /** 主题风格 */
+  theme?: 'default' | 'red-black' | 'black-white' | 'coffee' | 'green'
+  /** 默认金额会除以100（即100=1元），若设置为0，则不会除以100（即1=1元） */
+  amountType?: 1 | 0
+  /** 自定义获取商品信息的函数（已知支付宝不支持，支付宝请改用localdata属性） */
+  customAction?: () => void
+  /** 是否显示右上角关闭按钮 */
+  showClose?: boolean
+  /** 关闭按钮的图片地址 */
+  closeImage?: string
+  /** 价格的字体颜色 */
+  priceColor?: string
+  /** 立即购买 - 按钮的文字 */
+  buyNowText?: string
+  /** 立即购买 - 按钮的字体颜色 */
+  buyNowColor?: string
+  /** 立即购买 - 按钮的背景颜色 */
+  buyNowBackgroundColor?: string
+  /** 加入购物车 - 按钮的文字 */
+  addCartText?: string
+  /** 加入购物车 - 按钮的字体颜色 */
+  addCartColor?: string
+  /** 加入购物车 - 按钮的背景颜色 */
+  addCartBackgroundColor?: string
+  /** 商品缩略图背景颜色 */
+  goodsThumbBackgroundColor?: string
+  /** 样式 - 不可点击时,按钮的样式 */
+  disableStyle?: object
+  /** 样式 - 按钮点击时的样式 */
+  activedStyle?: object
+  /** 样式 - 按钮常态的样式 */
+  btnStyle?: object
+  /** 字段名 - 商品表id的字段名 */
+  goodsIdName?: string
+  /** 字段名 - sku表id的字段名 */
+  skuIdName?: string
+  /** 字段名 - 商品对应的sku列表的字段名 */
+  skuListName?: string
+  /** 字段名 - 商品规格名称的字段名 */
+  specListName?: string
+  /** 字段名 - sku库存的字段名 */
+  stockName?: string
+  /** 字段名 - sku组合路径的字段名 */
+  skuArrName?: string
+  /** 字段名 - 商品缩略图字段名(未选择sku时) */
+  goodsThumbName?: string
+  /** 被选中的值 */
+  selectArr?: string[]
+
+  /** 打开弹出层 */
+  onOpen: () => void
+  /** 关闭弹出层 */
+  onClose: () => void
+  /** 点击加入购物车时（需选择完SKU才会触发）*/
+  onAddCart: (event: SkuPopupEvent) => void
+  /** 点击立即购买时（需选择完SKU才会触发）*/
+  onBuyNow: (event: SkuPopupEvent) => void
+}
+
+/**  商品信息本地数据源 */
+export type SkuPopupLocaldata = {
+  /** 商品 ID */
+  _id: string
+  /** 商品名称 */
+  name: string
+  /** 商品图片 */
+  goods_thumb: string
+  /** 商品规格列表 */
+  spec_list: SkuPopupSpecItem[]
+  /** 商品SKU列表 */
+  sku_list: SkuPopupSkuItem[]
+}
+
+/** 商品规格名称的集合 */
+export type SkuPopupSpecItem = {
+  /** 规格名称 */
+  name: string
+  /** 规格集合 */
+  list: { name: string }[]
+}
+
+/** 商品SKU列表 */
+export type SkuPopupSkuItem = {
+  /** SKU ID */
+  _id: string
+  /**  商品 ID */
+  goods_id: string
+  /** 商品名称 */
+  goods_name: string
+  /** 商品图片 */
+  image: string
+  /** SKU 价格 * 100, 注意：需要乘以 100 */
+  price: number
+  /** SKU 规格组成, 注意：需要与 spec_list 数组顺序对应 */
+  sku_name_arr: string[]
+  /** SKU 库存 */
+  stock: number
+}
+
+/** 当前选择的sku数据 */
+export type SkuPopupEvent = SkuPopupSkuItem & {
+  /** 商品购买数量 */
+  buy_num: number
+}
+
+/** 全局组件类型声明 */
+declare module 'vue' {
+  export interface GlobalComponents {
+    'vk-data-goods-sku-popup': SkuPopup
+  }
+}
+```
+
+### 购物车
+
+- 步进器组件 `vk-data-input-number-box.vue`
+- 步进器组件类型定义: `vk-data-input-number-box.d.ts`
+
+```ts
+import { Component } from '@uni-helper/uni-app-types'
+
+/** 步进器 */
+export type InputNumberBox = Component<InputNumberBoxProps>
+
+/** 步进器实例 */
+export type InputNumberBoxInstance = InstanceType<InputNumberBox>
+
+/** 步进器属性 */
+export type InputNumberBoxProps = {
+  /** 输入框初始值（默认1） */
+  modelValue: number
+  /** 用户可输入的最小值（默认0） */
+  min: number
+  /** 用户可输入的最大值（默认99999） */
+  max: number
+  /**  步长，每次加或减的值（默认1） */
+  step: number
+  /** 是否禁用操作，包括输入框，加减按钮 */
+  disabled: boolean
+  /** 输入框宽度，单位rpx（默认80） */
+  inputWidth: string | number
+  /**  输入框和按钮的高度，单位rpx（默认50） */
+  inputHeight: string | number
+  /** 输入框和按钮的背景颜色（默认#F2F3F5） */
+  bgColor: string
+  /** 步进器标识符 */
+  index: string
+  /** 输入框内容发生变化时触发 */
+  change: (event: InputNumberBoxEvent) => void
+  /** 输入框失去焦点时触发 */
+  blur: (event: InputNumberBoxEvent) => void
+  /** 点击增加按钮时触发 */
+  plus: (event: InputNumberBoxEvent) => void
+  /** 点击减少按钮时触发 */
+  minus: (event: InputNumberBoxEvent) => void
+}
+
+/** 步进器事件对象 */
+export type InputNumberBoxEvent = {
+  /** 输入框当前值 */
+  value: number
+  /** 步进器标识符 */
+  index: string
+}
+
+/** 全局组件类型声明 */
+declare module 'vue' {
+  export interface GlobalComponents {
+    'vk-data-input-number-box': InputNumberBox
+  }
+}
+```
+
+- 购物车有两个, 一个页底部导航栏的, 一个是商品页面按钮的
+
+### 订单页
+
+- 送货时间: `picker` 自定义选择列表
+- 商品页跳转快速下单: 小程序开发者工具左下角可以看到页面参数
+- 跳转订单详情页使用 `uni.redirectTo`
+
+### 订单详情页
+
+#### 自定义导航栏
+
+- 自定义导航栏设置左上角按钮
+  - 获取当前页面栈 : https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html
+  - `getCurrentPages()` 最后一个就是当前页面
+
+#### 滚动时切换 title
+
+- 向下滚动时切换 title
+  - 滚动驱动的动画: https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html#滚动驱动的动画
+  - 获取当前页面的实例
+  - 在页面渲染完毕 `onReady` 生命周期执行
+
+```ts
+onReady(() => {
+  // 动画效果: 导航栏背景色
+  pageInstance.animate(
+    '.navbar',
+    [
+      {
+        backgroundColor: 'transparent',
+      },
+      {
+        backgroundColor: '#f8f8f8',
+      },
+    ],
+    1000,
+    {
+      scrollSource: '#scroller',
+      timeRange: 1000,
+      startScrollOffset: 0,
+      endScrollOffset: 50,
+    },
+  )
+
+  // 动画效果: 导航栏标题
+  pageInstance.animate(
+    '.navbar .title',
+    [
+      {
+        color: 'transparent',
+      },
+      {
+        color: '#000',
+      },
+    ],
+    1000,
+    {
+      scrollSource: '#scroller',
+      timeRange: 1000,
+      startScrollOffset: 0,
+      endScrollOffset: 50,
+    },
+  )
+
+  // 动画效果: 返回按钮
+  pageInstance.animate(
+    '.navbar .back',
+    [
+      {
+        color: '#fff',
+      },
+      {
+        color: '#000',
+      },
+    ],
+    1000,
+    {
+      scrollSource: '#scroller',
+      timeRange: 1000,
+      startScrollOffset: 0,
+      endScrollOffset: 50,
+    },
+  )
+})
+```
+
+#### 支付
+
+- 支付倒计时: `uni-countdown` https://uniapp.dcloud.net.cn/component/uniui/uni-countdown.html
+- 去支付
+  - 生产环境:
+    1. 需要通过认证的应用对应的 appid https://uniapp.dcloud.net.cn/tutorial/app-payment-weixin.html#%E5%BC%80%E9%80%9A
+    2. 提交资料申请开通获得商户号 `PartnerID` 和密码, 置APIv2密钥
+    3. 服务器接入 https://pay.weixin.qq.com/doc/v3/merchant/4012791911
+    4. 流程: ![|700x537](https://img.081024.xyz/image-1746845896307.jpeg)
+  - 开发环境:
+    - 模拟支付
+- 微信支付参数的返回类型: `WechatMiniprogram.RequestPaymentOption`, 给 `wx.requestPayment` 调用
+- 复制剪切板: `uni.setClipboardData`
+
+### 订单列表页
+
+todo: 5 个不同类型的列表并发太慢
+
+### 小程序打包
+
+1. 编译
+
+```sh
+pnpm build:mp-weixin
+```
+
+2. 开发者工具: 点击上传
+   1. 或者使用 ci: https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html
+3. 公众号平台提交审核 https://mp.weixin.qq.com
+
+#### 条件编译
+
+> 是通过注释实现
+
+https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor
+
+- 以 `#ifdef` 或 `#ifndef` 加 `%PLATFORM%` 开头，以 `#endif` 结尾。
+  - `#ifdef`：if defined 仅在某平台存在
+  - `#ifndef`：if not defined 除了某平台均存在
+  - `%PLATFORM%`：平台名称
+
+| 条件编译写法                                                 | 说明                                                                              |
+| ------------------------------------------------------------ | --------------------------------------------------------------------------------- |
+| `#ifdef APP-PLUS`<br>需条件编译的代码 <br>`#endif `          | 仅出现在 App 平台下的代码                                                         |
+| `#ifndef H5` <br>需条件编译的代码<br>`#endif`                | 除了 H5 平台，其它平台均存在的代码（注意if后面有个n）                             |
+| ` #ifdef H5 丨丨 MP-WEIXIN`<br>需条件编译的代码 <br>`#endif` | 在 H5 平台或微信小程序平台存在的代码（这里只有 \|\|，不可能出现&&，因为没有交集） |
+
+- 支持的文件：
+  - .vue/.nvue/.uvue
+  - .js/.uts
+  - .css
+  - pages.json
+  - 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
+
+**注意：** 
+
+1. 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 `/*注释*/` 的写法。
+2. 通过 import 导入的 scss 中的条件编译似乎不生效
+
+#### h5 预览
+
+- 相对路径
+
+`manifest.json`
+
+```json
+/* H5特有相关 */
+"h5": {
+  "router": {
+    "base": "./"
+  }
+},
+```
+
+#### 安卓打包
+
+调试:
+
+- 需要 `HBuilderX`
+- 安装运行插件和基座
+- 调试手机开启开发者工具
+
+云打包:
+
+- 注册 DCloud 账号
+- 获取 DCloud AppID: 在 HBuilderX 中打开 `manifest.json`
+- 设置应用名称图标
+- 发行-云打包-使用云端证书
+
+#### ios 打包
+
+调试:
+
+- 需要mac
+- 安装 xcode
+- 运行到模拟器
+
+打包:
+
+- 需要苹果开发者账号和年费
+
+#### 样式兼容
+
+- 小程序不支持 \* 选择器
+- 页面视口差异
+  - 小程序: 分tabBar 页和普通页
+    - 在 tabBar 页中, 视口不包括顶部和底部
+    - 在普通页中, 视口不包括顶部
+  - h 5: 视口包括浏览器整个区域
+- H 5 端默认开启 scoped
+- uni-app 跨端注意
+- uni-app css 支持
+- uni-app 条件编译
+
+实际遇到的问题:
+
+- h5 中的顶栏和底栏都是 div 模拟的, 这样会有遮住的问题
+
+uni-app 内置的 css 变量: https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F
+
+| CSS 变量            | 描述                   | App                                                                                                                  | 小程序 | H5                   |
+| ------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------- | ------ | -------------------- |
+| --status-bar-height | 系统状态栏高度         | [系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)、nvue 注意见下 | 25px   | 0                    |
+| --window-top        | 内容区域距离顶部的距离 | 0                                                                                                                    | 0      | NavigationBar 的高度 |
+| --window-bottom     | 内容区域距离底部的距离 | 0                                                                                                                    | 0      | TabBar 的高度        |
+
+示例:
+
+```scss
+/* 吸底工具栏 */
+.toolbar {
+  /* ... */
+  bottom: calc(var(--window-bottom));
+  /* ... */
+}
+```
+
+- 骨架屏样式错位
+
+原因: h5 样式隔离
+
+具体点: 骨架屏是由小程序开发工具生成的, 自动生成的样式和 h5 样式隔离后的 class 对应不上
+
+解决方法: 把骨架屏里对应的子组件样式单独拆分, 然后在骨架屏中条件编译导入, 搜索 `is=` 对应的组件, 就是需要处理的
+
+- App flex 布局不生效: App 没有 page 元素, 只有 `#app`
+
+#### 组件兼容
+
+小程序特有的:
+
+- `open-type=`, 例外: `navigate` `switchTab` `redirect`
+- `wx.`
+- `.animate` 动画效果
+- `uni-navigator`: 在 h5 中实现, 实际在外层嵌套了一个 a 标签, 可能导致原来的样式失效
+  - 解决方法: 添加属性 `:render-link="false"`
+
+#### API 兼容
+
+- 选择头像的 `uni.chooseMedia` 只支持小程序, 可以使用停止维护的 api `uni.chooseImage`