This commit is contained in:
parent
a170b1372b
commit
139d2db5f9
47
CLAUDE.md
47
CLAUDE.md
|
|
@ -1,47 +0,0 @@
|
|||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
`corp-mp` is a **Taro 4.2** cross-platform app (React 18 + TypeScript + SCSS, compiled with **Vite**). The primary target is the WeChat mini-program (`weapp`); Taro also compiles it to H5, Alipay, Swan, TT, QQ, JD, RN, and Harmony.
|
||||
|
||||
## Commands
|
||||
|
||||
Package manager is **pnpm** (a `pnpm-lock.yaml` is committed).
|
||||
|
||||
```bash
|
||||
pnpm install # install deps
|
||||
pnpm dev:weapp # WeChat mini-program dev build with --watch → ./dist
|
||||
pnpm build:weapp # production mini-program build → ./dist
|
||||
pnpm dev:h5 / build:h5 # H5 target
|
||||
```
|
||||
|
||||
Other targets follow `pnpm dev:<platform>` / `pnpm build:<platform>` (`alipay`, `swan`, `tt`, `qq`, `jd`, `rn`, `harmony-hybrid`).
|
||||
|
||||
**Running the mini-program:** builds output to `./dist`. Open `./dist` in WeChat DevTools (`project.config.json` already points `miniprogramRoot` there; appId `wx6d4f6f29c41aff93`).
|
||||
|
||||
**There is no test runner and no lint script in `package.json`.** ESLint (`taro/react`) and Stylelint are configured but run manually. The only enforced gate is a Husky `commit-msg` hook running **commitlint** (Conventional Commits) — non-conforming commit messages are rejected.
|
||||
|
||||
## Architecture
|
||||
|
||||
The app is a thin native shell around a business H5, with a native payment bridge. Two pages, registered in `src/app.config.ts`:
|
||||
|
||||
**1. `pages/index/index.tsx` — auth + WebView host.** On load it calls `Taro.login()` to get the WeChat `code`, then renders a full-screen `<WebView>` pointing at the business H5 (`http://niubsw.com/...?mpCode=<code>`). All business UI lives in that remote H5, not in this repo.
|
||||
|
||||
**2. `pages/pay/index.tsx` — native payment bridge.** The H5 cannot invoke WeChat JSAPI pay while running inside the mini-program WebView, so it hands off to this native page. The handoff contract:
|
||||
- The H5 detects it's inside the mini-program and calls `wxSdk.miniProgram.navigateTo({ url: '/pages/pay/index?order=<b64>&formInfo=<b64>' })`.
|
||||
- Params are **base64-encoded JSON**, produced H5-side by `utf8ToBase64(v) = btoa(unescape(encodeURIComponent(JSON.stringify(v))))`.
|
||||
- `order` already contains the complete WeChat JSAPI fields (`timeStamp`/`nonceStr`/`package`/`signType`/`paySign`). The page decodes it, auto-fires `Taro.requestPayment`, then `navigateBack()`s to the H5 on success. No backend call is made here.
|
||||
- `temp.txt` (repo root) holds the H5-side snippet documenting this contract — keep the two sides in sync.
|
||||
|
||||
**`src/utils/base64.ts`** is the strict inverse of the H5 encoder. It hand-rolls a base64 decoder because **weapp has no global `atob`**, and normalizes `+`→space mangling from URL routing. Reuse `decodeOrderParam<T>(raw)` for any future base64 route params.
|
||||
|
||||
## Conventions
|
||||
|
||||
- **Page = folder** under `src/pages/<name>/` with `index.tsx` + `index.scss` + `index.config.ts`. New pages **must** be added to the `pages` array in `src/app.config.ts` or they won't route.
|
||||
- **Lifecycle:** use Taro hooks — `useLoad` for page init (reads route params via `Taro.getCurrentInstance().router?.params`), `useLaunch` for app init — not bare `useEffect`.
|
||||
- **Native API calls must be env-guarded:** wrap `weapp`-only APIs (e.g. `Taro.requestPayment`) in `if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP)` with a fallback branch for other targets.
|
||||
- **Styling:** SCSS with BEM (`block__element--modifier`); CSS Modules are disabled. Design width is `750`, so author dimensions in `px` — Taro converts to `rpx`/`rem` at compile time.
|
||||
- **Imports:** `@/*` is aliased to `src/*` (see `tsconfig.json`).
|
||||
- `strictNullChecks`, `noUnusedLocals`, and `noUnusedParameters` are on; `noImplicitAny` is off.
|
||||
|
||||
A more verbose Chinese-language version of these notes lives in `GEMINI.md`.
|
||||
165
GEMINI.md
165
GEMINI.md
|
|
@ -1,165 +0,0 @@
|
|||
# GEMINI.md - 项目开发规范与上下文指南
|
||||
|
||||
本文件是 `corp-mp` 项目的基础开发规范与指令上下文，用于指导未来 AI 助手及团队成员的高效协作。
|
||||
|
||||
---
|
||||
|
||||
## 1. 项目概述
|
||||
|
||||
`corp-mp` 是一个基于 **Taro 4.2.0** 跨端开发框架构建的移动端/小程序项目，核心技术栈为 **React 18 + TypeScript + SCSS + Vite**。
|
||||
|
||||
### 核心功能模块
|
||||
1. **微信快捷授权与 WebView 承载 (`pages/index/index`)**：
|
||||
- 页面加载时自动调用 `Taro.login()` 获取微信授权 `code`（即 `wxCode`）。
|
||||
- 将 `code` 作为 Query 参数拼接至特定业务 H5 URL（例如 `mpCode=xxx`），使用 `<WebView>` 组件进行全屏承载。
|
||||
2. **模拟微信原生支付 (`pages/pay/index`)**：
|
||||
- 接收后端支付预订单数据。
|
||||
- 在微信小程序环境下安全调用 `Taro.requestPayment` 发起微信官方原生支付。
|
||||
- 提供优雅的支付状态管理（准备、支付中、支付成功、取消、失败等）和完备的异常捕获与友好提示。
|
||||
|
||||
---
|
||||
|
||||
## 2. 环境依赖与包管理
|
||||
|
||||
- **包管理器**：推荐且必须使用 **`pnpm`**（根目录下存在 `pnpm-lock.yaml`）。
|
||||
- **Node.js 版本**：建议使用 Node.js v18 或更高版本。
|
||||
- **运行框架**：Taro 4.2.0。
|
||||
- **构建编译工具**：Vite 4.x (`@tarojs/vite-runner`)。
|
||||
|
||||
---
|
||||
|
||||
## 3. 核心命令指南
|
||||
|
||||
在执行命令前，请确保已全局安装了 `pnpm`。
|
||||
|
||||
### 3.1 依赖安装
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 3.2 微信小程序开发与编译
|
||||
```bash
|
||||
# 本地开发（带热更新监听）
|
||||
pnpm dev:weapp
|
||||
|
||||
# 生产环境打包构建
|
||||
pnpm build:weapp
|
||||
```
|
||||
> **提示**：编译产物将默认输出至根目录下的 `/dist` 目录。在微信开发者工具中，应将项目根目录或指定小程序根目录指向该 `/dist`。
|
||||
|
||||
### 3.3 H5/Web 端开发与编译
|
||||
```bash
|
||||
# 本地 H5 开发
|
||||
pnpm dev:h5
|
||||
|
||||
# 生产 H5 打包
|
||||
pnpm build:h5
|
||||
```
|
||||
|
||||
### 3.4 其它跨端支持
|
||||
项目同样提供了对百度小程序 (`swan`)、支付宝小程序 (`alipay`)、字节小程序 (`tt`)、QQ 小程序 (`qq`)、京东小程序 (`jd`)、React Native (`rn`)、鸿蒙 Hybrid (`harmony-hybrid`) 等多端编译指令，其格式均为 `pnpm dev:<platform>` 或 `pnpm build:<platform>`。
|
||||
|
||||
---
|
||||
|
||||
## 4. 目录结构解析
|
||||
|
||||
```text
|
||||
D:\frontendProject\corp-mp\
|
||||
├───config\ # Taro 编译配置文件目录
|
||||
│ ├───dev.ts # 开发环境特定配置
|
||||
│ ├───index.ts # 公共基础配置（Vite 编译器、设计稿尺寸等）
|
||||
│ └───prod.ts # 生产环境特定配置
|
||||
├───dist\ # 编译后的输出目录（不可提交至 Git）
|
||||
├───src\ # 源代码主体目录
|
||||
│ ├───app.config.ts # 小程序全局应用配置（包括页面路由 pages、window 样式等）
|
||||
│ ├───app.scss # 全局公共样式文件
|
||||
│ ├───app.ts # 小程序生命周期与应用入口
|
||||
│ ├───index.html # H5 编译使用的 HTML 模版
|
||||
│ └───pages\ # 页面模块目录
|
||||
│ ├───index\ # 授权 WebView 页面
|
||||
│ │ ├───index.config.ts # 页面特定配置
|
||||
│ │ ├───index.scss # 页面样式（BEM 命名）
|
||||
│ │ └───index.tsx # 页面逻辑代码
|
||||
│ └───pay\ # 微信支付页面
|
||||
│ ├───index.config.ts
|
||||
│ ├───index.scss
|
||||
│ └───index.tsx
|
||||
├───types\ # TypeScript 全局声明目录
|
||||
│ └───global.d.ts # Taro 相关的全局补丁与自定义声明
|
||||
├───.env.development # 开发环境变量（如 TARO_APP_ID、BASE_URL）
|
||||
├───.env.production # 生产环境变量
|
||||
├───.env.test # 测试环境变量
|
||||
├───project.config.json # 微信开发者工具项目配置文件
|
||||
├───tsconfig.json # TypeScript 配置
|
||||
├───.eslintrc # ESLint 配置（继承 taro/react）
|
||||
├───stylelint.config.mjs # Stylelint CSS/SCSS 样式规范配置
|
||||
└───commitlint.config.mjs # Git Commit 规范约束配置
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 开发与编码守则
|
||||
|
||||
### 5.1 React 18 编写规范
|
||||
1. **函数式组件优先**：所有页面和组件均采用 Function Component 与 React Hooks 风格。
|
||||
2. **Taro 专属生命周期 Hooks**：
|
||||
- 页面加载逻辑使用 `useLoad`（而非普通的 `useEffect`），用于准确捕获页面入参和执行初始化。
|
||||
- 应用启动钩子使用 `useLaunch`。
|
||||
3. **状态声明与操作**：
|
||||
- 保持 state 尽量扁平，避免无谓的深层嵌套。
|
||||
- 在进行非安全型异步操作（如接口请求、支付拉起）时，务必伴随 `loading` 状态的管理，防止用户重复触发。
|
||||
|
||||
### 5.2 样式规范
|
||||
1. **SCSS 与 BEM 命名法**：
|
||||
- 为避免多端渲染时的类名冲突，样式推荐采用传统的 **BEM (Block-Element-Modifier)** 规范进行书写。
|
||||
- 示例：
|
||||
```scss
|
||||
.pay-page {
|
||||
.pay-card {
|
||||
&--success { color: green; }
|
||||
&--failed { color: red; }
|
||||
}
|
||||
.pay-row {
|
||||
&__label { font-weight: bold; }
|
||||
&__value { color: #333; }
|
||||
}
|
||||
}
|
||||
```
|
||||
2. **移动端自适应**：
|
||||
- 默认设计稿尺寸为 `750px`（在 `config/index.ts` 中设定了 `designWidth: 750`）。
|
||||
- 在编写 CSS 时，所有尺寸可以直接编写 `px`，Taro 在编译时会根据配置自动将其转换为 `rpx` (小程序端) 或 `rem` (H5 端)。
|
||||
|
||||
### 5.3 多端兼容安全调用
|
||||
在调用一些微信/小程序特有的原生 API（如 `Taro.requestPayment`）时，务必先通过环境判断确保执行安全：
|
||||
```typescript
|
||||
if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
|
||||
// 仅在微信小程序环境下执行
|
||||
await Taro.requestPayment(...)
|
||||
} else {
|
||||
// 其它环境降级或模拟逻辑
|
||||
}
|
||||
```
|
||||
|
||||
### 5.4 代码校验与规范化
|
||||
项目配置了严苛的 Lint 和 Git 提交约束，提交前请确保代码不报错：
|
||||
- **ESLint 校验**：继承自 `taro/react`，并在其中免除了 `react-in-jsx-scope` 限制（允许不显式 `import React`）。
|
||||
- **Stylelint 校验**：保持 SCSS 代码的整洁性。
|
||||
- **Commit 规范**：使用 Husky + Commitlint。在进行 Git 提交时，Commit 消息必须严格遵守 Conventional Commits 规范（如 `feat: 新增支付渠道`, `fix: 修复支付状态未更新` 等），否则会导致提交失败。
|
||||
|
||||
---
|
||||
|
||||
## 6. 新增页面/组件工作流
|
||||
|
||||
1. **新建页面目录**：在 `src/pages/` 下新建页面文件夹（如 `src/pages/member/`），并准备 `index.tsx`、`index.scss`、`index.config.ts`。
|
||||
2. **注册路由**：在 `src/app.config.ts` 的 `pages` 数组中添加页面路径。
|
||||
```typescript
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/index/index',
|
||||
'pages/pay/index',
|
||||
'pages/member/index', // 新增
|
||||
],
|
||||
// ...
|
||||
})
|
||||
```
|
||||
3. **保持状态与路由极简**：对于非必要的全局状态，尽量维持页面局部 State，避免全局状态污染。
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
export default definePageConfig({
|
||||
navigationBarTitleText: '门店管理服务',
|
||||
navigationBarTitleText: '门店企业标注快办',
|
||||
navigationBarBackgroundColor: '#05256e',
|
||||
navigationBarTextStyle: 'white',
|
||||
backgroundColor: '#f3f7ff',
|
||||
|
|
|
|||
|
|
@ -12,20 +12,15 @@ const INDUSTRIES = [
|
|||
]
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
mark: '关',
|
||||
name: '公关',
|
||||
description: '协助门店沟通与活动协调',
|
||||
},
|
||||
{
|
||||
mark: '推',
|
||||
name: '推广',
|
||||
description: '支持门店推广与现场执行',
|
||||
description: '为门店推广提供支持',
|
||||
},
|
||||
{
|
||||
mark: '调',
|
||||
name: '市场调查',
|
||||
description: '开展门店走访、信息采集与反馈',
|
||||
mark: '曝',
|
||||
name: '门店曝光',
|
||||
description: '提高门店曝光量',
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -64,9 +59,9 @@ export default function Landing () {
|
|||
<View className='landing-page'>
|
||||
<View className='landing-page__hero'>
|
||||
<View className='landing-page__hero-copy'>
|
||||
<Text className='landing-page__hero-title'>门店管理服务</Text>
|
||||
<Text className='landing-page__hero-title'>门店企业标注快办</Text>
|
||||
<Text className='landing-page__hero-description'>
|
||||
面向百货、超市与便利店，提供公关、推广与市场调查服务。
|
||||
面向百货、超市与便利店，提供门店企业标注快办服务。
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue