11 changed files with 950 additions and 10 deletions
@ -0,0 +1,23 @@ |
|||
# 环境变量配置示例 |
|||
# 复制此文件为 .env 并填入实际值 |
|||
|
|||
# 租户ID |
|||
TENANT_ID=your_tenant_id |
|||
|
|||
# API基础地址 |
|||
BASE_URL=https://your-api-domain.com/api |
|||
|
|||
# 服务器API地址 |
|||
SERVER_API_URL=https://your-server-domain.com/api |
|||
|
|||
# 模板套餐ID |
|||
TEMPLATE_ID=your_template_id |
|||
|
|||
# 微信小程序AppID |
|||
WECHAT_APPID=your_wechat_appid |
|||
|
|||
# 支付宝小程序AppID |
|||
ALIPAY_APPID=your_alipay_appid |
|||
|
|||
# 字节跳动小程序AppID |
|||
TT_APPID=your_tt_appid |
|||
@ -0,0 +1,59 @@ |
|||
# 配置说明文档 |
|||
|
|||
## 环境配置 |
|||
|
|||
### 1. 复制环境变量文件 |
|||
```bash |
|||
cp .env.example .env |
|||
``` |
|||
|
|||
### 2. 修改配置文件 |
|||
|
|||
#### config/app.ts |
|||
```typescript |
|||
// 租户ID - 请根据实际情况修改 |
|||
export const TenantId = 'YOUR_TENANT_ID'; |
|||
// 接口地址 - 请根据实际情况修改 |
|||
export const BaseUrl = 'https://your-api-domain.com/api'; |
|||
``` |
|||
|
|||
#### src/utils/server.ts |
|||
```typescript |
|||
// 模版套餐ID - 请根据实际情况修改 |
|||
export const TEMPLATE_ID = 'YOUR_TEMPLATE_ID'; |
|||
// 服务接口 - 请根据实际情况修改 |
|||
export const SERVER_API_URL = 'https://your-server-domain.com/api'; |
|||
``` |
|||
|
|||
#### project.config.json |
|||
```json |
|||
{ |
|||
"appid": "your_wechat_appid" |
|||
} |
|||
``` |
|||
|
|||
### 3. 小程序配置 |
|||
|
|||
#### 微信小程序 |
|||
1. 在微信公众平台申请小程序 |
|||
2. 获取AppID并填入 `project.config.json` |
|||
3. 配置服务器域名白名单 |
|||
|
|||
#### 支付宝小程序 |
|||
1. 在支付宝开放平台申请小程序 |
|||
2. 获取AppID并配置相应文件 |
|||
|
|||
#### 字节跳动小程序 |
|||
1. 在字节跳动开发者平台申请小程序 |
|||
2. 获取AppID并填入 `project.tt.json` |
|||
|
|||
### 4. API配置 |
|||
|
|||
确保后端API服务正常运行，并配置正确的域名和端口。 |
|||
|
|||
### 5. 安全注意事项 |
|||
|
|||
- 不要将真实的AppID、API密钥等敏感信息提交到公开仓库 |
|||
- 使用环境变量管理敏感配置 |
|||
- 定期更新密码和密钥 |
|||
- 在生产环境中启用HTTPS |
|||
@ -0,0 +1,201 @@ |
|||
Apache License |
|||
Version 2.0, January 2004 |
|||
http://www.apache.org/licenses/ |
|||
|
|||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
|||
|
|||
1. Definitions. |
|||
|
|||
"License" shall mean the terms and conditions for use, reproduction, |
|||
and distribution as defined by Sections 1 through 9 of this document. |
|||
|
|||
"Licensor" shall mean the copyright owner or entity authorized by |
|||
the copyright owner that is granting the License. |
|||
|
|||
"Legal Entity" shall mean the union of the acting entity and all |
|||
other entities that control, are controlled by, or are under common |
|||
control with that entity. For the purposes of this definition, |
|||
"control" means (i) the power, direct or indirect, to cause the |
|||
direction or management of such entity, whether by contract or |
|||
otherwise, or (ii) ownership of fifty percent (50%) or more of the |
|||
outstanding shares, or (iii) beneficial ownership of such entity. |
|||
|
|||
"You" (or "Your") shall mean an individual or Legal Entity |
|||
exercising permissions granted by this License. |
|||
|
|||
"Source" form shall mean the preferred form for making modifications, |
|||
including but not limited to software source code, documentation |
|||
source, and configuration files. |
|||
|
|||
"Object" form shall mean any form resulting from mechanical |
|||
transformation or translation of a Source form, including but |
|||
not limited to compiled object code, generated documentation, |
|||
and conversions to other media types. |
|||
|
|||
"Work" shall mean the work of authorship, whether in Source or |
|||
Object form, made available under the License, as indicated by a |
|||
copyright notice that is included in or attached to the work |
|||
(an example is provided in the Appendix below). |
|||
|
|||
"Derivative Works" shall mean any work, whether in Source or Object |
|||
form, that is based on (or derived from) the Work and for which the |
|||
editorial revisions, annotations, elaborations, or other modifications |
|||
represent, as a whole, an original work of authorship. For the purposes |
|||
of this License, Derivative Works shall not include works that remain |
|||
separable from, or merely link (or bind by name) to the interfaces of, |
|||
the Work and Derivative Works thereof. |
|||
|
|||
"Contribution" shall mean any work of authorship, including |
|||
the original version of the Work and any modifications or additions |
|||
to that Work or Derivative Works thereof, that is intentionally |
|||
submitted to Licensor for inclusion in the Work by the copyright owner |
|||
or by an individual or Legal Entity authorized to submit on behalf of |
|||
the copyright owner. For the purposes of this definition, "submitted" |
|||
means any form of electronic, verbal, or written communication sent |
|||
to the Licensor or its representatives, including but not limited to |
|||
communication on electronic mailing lists, source code control systems, |
|||
and issue tracking systems that are managed by, or on behalf of, the |
|||
Licensor for the purpose of discussing and improving the Work, but |
|||
excluding communication that is conspicuously marked or otherwise |
|||
designated in writing by the copyright owner as "Not a Contribution." |
|||
|
|||
"Contributor" shall mean Licensor and any individual or Legal Entity |
|||
on behalf of whom a Contribution has been received by Licensor and |
|||
subsequently incorporated within the Work. |
|||
|
|||
2. Grant of Copyright License. Subject to the terms and conditions of |
|||
this License, each Contributor hereby grants to You a perpetual, |
|||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|||
copyright license to reproduce, prepare Derivative Works of, |
|||
publicly display, publicly perform, sublicense, and distribute the |
|||
Work and such Derivative Works in Source or Object form. |
|||
|
|||
3. Grant of Patent License. Subject to the terms and conditions of |
|||
this License, each Contributor hereby grants to You a perpetual, |
|||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|||
(except as stated in this section) patent license to make, have made, |
|||
use, offer to sell, sell, import, and otherwise transfer the Work, |
|||
where such license applies only to those patent claims licensable |
|||
by such Contributor that are necessarily infringed by their |
|||
Contribution(s) alone or by combination of their Contribution(s) |
|||
with the Work to which such Contribution(s) was submitted. If You |
|||
institute patent litigation against any entity (including a |
|||
cross-claim or counterclaim in a lawsuit) alleging that the Work |
|||
or a Contribution incorporated within the Work constitutes direct |
|||
or contributory patent infringement, then any patent licenses |
|||
granted to You under this License for that Work shall terminate |
|||
as of the date such litigation is filed. |
|||
|
|||
4. Redistribution. You may reproduce and distribute copies of the |
|||
Work or Derivative Works thereof in any medium, with or without |
|||
modifications, and in Source or Object form, provided that You |
|||
meet the following conditions: |
|||
|
|||
(a) You must give any other recipients of the Work or |
|||
Derivative Works a copy of this License; and |
|||
|
|||
(b) You must cause any modified files to carry prominent notices |
|||
stating that You changed the files; and |
|||
|
|||
(c) You must retain, in the Source form of any Derivative Works |
|||
that You distribute, all copyright, patent, trademark, and |
|||
attribution notices from the Source form of the Work, |
|||
excluding those notices that do not pertain to any part of |
|||
the Derivative Works; and |
|||
|
|||
(d) If the Work includes a "NOTICE" text file as part of its |
|||
distribution, then any Derivative Works that You distribute must |
|||
include a readable copy of the attribution notices contained |
|||
within such NOTICE file, excluding those notices that do not |
|||
pertain to any part of the Derivative Works, in at least one |
|||
of the following places: within a NOTICE text file distributed |
|||
as part of the Derivative Works; within the Source form or |
|||
documentation, if provided along with the Derivative Works; or, |
|||
within a display generated by the Derivative Works, if and |
|||
wherever such third-party notices normally appear. The contents |
|||
of the NOTICE file are for informational purposes only and |
|||
do not modify the License. You may add Your own attribution |
|||
notices within Derivative Works that You distribute, alongside |
|||
or as an addendum to the NOTICE text from the Work, provided |
|||
that such additional attribution notices cannot be construed |
|||
as modifying the License. |
|||
|
|||
You may add Your own copyright statement to Your modifications and |
|||
may provide additional or different license terms and conditions |
|||
for use, reproduction, or distribution of Your modifications, or |
|||
for any such Derivative Works as a whole, provided Your use, |
|||
reproduction, and distribution of the Work otherwise complies with |
|||
the conditions stated in this License. |
|||
|
|||
5. Submission of Contributions. Unless You explicitly state otherwise, |
|||
any Contribution intentionally submitted for inclusion in the Work |
|||
by You to the Licensor shall be under the terms and conditions of |
|||
this License, without any additional terms or conditions. |
|||
Notwithstanding the above, nothing herein shall supersede or modify |
|||
the terms of any separate license agreement you may have executed |
|||
with Licensor regarding such Contributions. |
|||
|
|||
6. Trademarks. This License does not grant permission to use the trade |
|||
names, trademarks, service marks, or product names of the Licensor, |
|||
except as required for reasonable and customary use in describing the |
|||
origin of the Work and reproducing the content of the NOTICE file. |
|||
|
|||
7. Disclaimer of Warranty. Unless required by applicable law or |
|||
agreed to in writing, Licensor provides the Work (and each |
|||
Contributor provides its Contributions) on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
|||
implied, including, without limitation, any warranties or conditions |
|||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A |
|||
PARTICULAR PURPOSE. You are solely responsible for determining the |
|||
appropriateness of using or redistributing the Work and assume any |
|||
risks associated with Your exercise of permissions under this License. |
|||
|
|||
8. Limitation of Liability. In no event and under no legal theory, |
|||
whether in tort (including negligence), contract, or otherwise, |
|||
unless required by applicable law (such as deliberate and grossly |
|||
negligent acts) or agreed to in writing, shall any Contributor be |
|||
liable to You for damages, including any direct, indirect, special, |
|||
incidental, or consequential damages of any character arising as a |
|||
result of this License or out of the use or inability to use the |
|||
Work (including but not limited to damages for loss of goodwill, |
|||
work stoppage, computer failure or malfunction, or any and all |
|||
other commercial damages or losses), even if such Contributor |
|||
has been advised of the possibility of such damages. |
|||
|
|||
9. Accepting Warranty or Additional Liability. While redistributing |
|||
the Work or Derivative Works thereof, You may choose to offer, |
|||
and charge a fee for, acceptance of support, warranty, indemnity, |
|||
or other liability obligations and/or rights consistent with this |
|||
License. However, in accepting such obligations, You may act only |
|||
on Your own behalf and on Your sole responsibility, not on behalf |
|||
of any other Contributor, and only if You agree to indemnify, |
|||
defend, and hold each Contributor harmless for any liability |
|||
incurred by, or claims asserted against, such Contributor by reason |
|||
of your accepting any such warranty or additional liability. |
|||
|
|||
END OF TERMS AND CONDITIONS |
|||
|
|||
APPENDIX: How to apply the Apache License to your work. |
|||
|
|||
To apply the Apache License to your work, attach the following |
|||
boilerplate notice, with the fields enclosed by brackets "[]" |
|||
replaced with your own identifying information. (Don't include |
|||
the brackets!) The text should be enclosed in the appropriate |
|||
comment syntax for the file format. We also recommend that a |
|||
file or class name and description of purpose be included on the |
|||
same "printed page" as the copyright notice for easier |
|||
identification within third-party archives. |
|||
|
|||
Copyright [yyyy] [name of copyright owner] |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
@ -0,0 +1,592 @@ |
|||
<div align="center"> |
|||
<h1>🚀 WebSoft 小程序</h1> |
|||
<p><strong>基于 Taro + React + TypeScript 的跨平台小程序应用</strong></p> |
|||
|
|||
<p> |
|||
<img src="https://img.shields.io/badge/Taro-4.0.8-blue" alt="Taro"> |
|||
<img src="https://img.shields.io/badge/React-18.3.1-61DAFB" alt="React"> |
|||
<img src="https://img.shields.io/badge/TypeScript-5.7.2-3178C6" alt="TypeScript"> |
|||
<img src="https://img.shields.io/badge/NutUI-3.0.16-orange" alt="NutUI"> |
|||
<img src="https://img.shields.io/badge/TailwindCSS-3.4.17-38B2AC" alt="TailwindCSS"> |
|||
<img src="https://img.shields.io/badge/License-MIT-blue" alt="License"> |
|||
</p> |
|||
</div> |
|||
|
|||
## 📖 项目简介 |
|||
|
|||
WebSoft 小程序是一个基于 **Taro + React + TypeScript** 构建的现代化跨平台小程序应用，支持多端发布： |
|||
|
|||
- **核心框架**：Taro 4.0.8 + React 18.3.1 + TypeScript 5.7.2 |
|||
- **UI组件库**：NutUI React Taro 2.7.4 + NutUI Icons |
|||
- **样式方案**：Sass + TailwindCSS 3.4.17 |
|||
- **状态管理**：React Hooks + Context API |
|||
- **工具库**：Day.js、Crypto-js、React Router DOM |
|||
|
|||
## 🎯 支持平台 |
|||
|
|||
本项目基于 Taro 框架，支持一套代码多端运行： |
|||
|
|||
- **微信小程序** (weapp) |
|||
- **支付宝小程序** (alipay) |
|||
- **百度智能小程序** (swan) |
|||
- **字节跳动小程序** (tt) |
|||
- **QQ小程序** (qq) |
|||
- **京东小程序** (jd) |
|||
- **H5网页** (h5) |
|||
- **React Native** (rn) |
|||
- **快应用** (quickapp) |
|||
|
|||
|
|||
|
|||
## 项目演示 |
|||
| 后台管理系统 | https://mp.websoft.top | |
|||
|--------|-------------------------------------------------------------------------------------------------------------------------------------| |
|||
| 演示账号 | 请联系开发者获取演示账号 |
|||
| 正式账号 | [立即注册](https://mp.websoft.top/register/?inviteCode=github) | |
|||
| 关注公众号 |  | |
|||
|
|||
|
|||
|
|||
|
|||
## 🛠️ 技术栈 |
|||
|
|||
### 核心框架 |
|||
| 技术 | 版本 | 说明 | |
|||
|------|------|------| |
|||
| Taro | 4.0.8 | 跨平台开发框架 | |
|||
| React | 18.3.1 | 前端UI框架 | |
|||
| TypeScript | 5.7.2 | 类型安全的JavaScript | |
|||
| Webpack | 5.78.0 | 模块打包工具 | |
|||
| Babel | 7.26.0 | JavaScript编译器 | |
|||
| PostCSS | 8.4.49 | CSS后处理器 | |
|||
| ESLint | 8.57.1 | 代码质量检查 | |
|||
|
|||
### UI组件库 |
|||
| 技术 | 版本 | 说明 | |
|||
|------|------|------| |
|||
| NutUI React Taro | 2.7.4 | 移动端组件库 | |
|||
| NutUI Icons | 2.0.1 | 图标库 | |
|||
| NutUI Biz | 1.0.0-beta.2 | 业务组件库 | |
|||
|
|||
### 样式方案 |
|||
| 技术 | 版本 | 说明 | |
|||
|------|------|------| |
|||
| Sass | - | CSS预处理器 | |
|||
| TailwindCSS | 3.4.17 | 原子化CSS框架 | |
|||
| Autoprefixer | 10.4.20 | CSS自动前缀 | |
|||
|
|||
### 功能组件 |
|||
- **React Router DOM** - 路由管理 |
|||
- **Day.js** - 日期时间处理 |
|||
- **Crypto-js** - 加密解密工具 |
|||
- **js-base64** - Base64编码解码 |
|||
- **React Markdown** - Markdown渲染 |
|||
- **ECharts Taro3 React** - 图表组件 |
|||
|
|||
## 📋 环境要求 |
|||
|
|||
### 基础环境 |
|||
- 📦 **Node.js 16+** |
|||
- 📱 **微信开发者工具** (开发微信小程序) |
|||
- 🔧 **支付宝开发者工具** (开发支付宝小程序) |
|||
- 🌐 **现代浏览器** (开发H5应用) |
|||
|
|||
### 包管理器 |
|||
- **npm** / **yarn** / **pnpm** (推荐使用pnpm) |
|||
|
|||
### 开发工具 |
|||
- **推荐**：VS Code / WebStorm |
|||
- **插件**：ES7+ React/Redux/React-Native snippets、TypeScript Importer |
|||
|
|||
## 🚀 快速开始 |
|||
|
|||
### 1. 克隆项目 |
|||
```bash |
|||
git clone https://github.com/websoft-top/mp-taro.git |
|||
cd mp-taro |
|||
``` |
|||
|
|||
### 2. 安装依赖 |
|||
```bash |
|||
# 使用 pnpm (推荐) |
|||
pnpm install |
|||
|
|||
# 或使用 npm |
|||
npm install |
|||
|
|||
# 或使用 yarn |
|||
yarn install |
|||
``` |
|||
|
|||
### 3. 配置开发环境 |
|||
|
|||
#### 环境变量配置 |
|||
项目支持多环境配置，通过 `config/env.ts` 文件管理不同环境的配置： |
|||
|
|||
```typescript |
|||
// config/env.ts |
|||
export const ENV_CONFIG = { |
|||
// 开发环境 |
|||
development: { |
|||
API_BASE_URL: 'http://localhost:3000/api', |
|||
APP_NAME: 'Taro App Dev', |
|||
DEBUG: 'true', |
|||
}, |
|||
// 生产环境 |
|||
production: { |
|||
API_BASE_URL: 'https://api.example.com', |
|||
APP_NAME: 'Taro App', |
|||
DEBUG: 'false', |
|||
}, |
|||
// 测试环境 |
|||
test: { |
|||
API_BASE_URL: 'https://test-api.example.com', |
|||
APP_NAME: 'Taro App Test', |
|||
DEBUG: 'true', |
|||
} |
|||
} |
|||
``` |
|||
|
|||
#### 应用配置 |
|||
编辑 `config/app.ts` 文件，配置租户ID等信息： |
|||
```typescript |
|||
export const TenantId = 'your_tenant_id' |
|||
export const BaseUrl = API_BASE_URL // 自动从环境配置读取 |
|||
``` |
|||
|
|||
### 4. 启动开发服务器 |
|||
|
|||
#### 微信小程序开发 |
|||
```bash |
|||
# 开发环境（默认） |
|||
npm run dev:weapp |
|||
|
|||
# 生产环境 |
|||
NODE_ENV=production npm run dev:weapp |
|||
|
|||
# 测试环境 |
|||
NODE_ENV=test npm run dev:weapp |
|||
``` |
|||
然后使用微信开发者工具打开 `dist` 目录 |
|||
|
|||
#### H5开发 |
|||
```bash |
|||
# 启动H5开发模式 |
|||
npm run dev:h5 |
|||
``` |
|||
访问 `http://localhost:10086` 查看H5版本 |
|||
|
|||
#### 其他平台 |
|||
```bash |
|||
# 支付宝小程序 |
|||
npm run dev:alipay |
|||
|
|||
# 百度智能小程序 |
|||
npm run dev:swan |
|||
|
|||
# 字节跳动小程序 |
|||
npm run dev:tt |
|||
|
|||
# QQ小程序 |
|||
npm run dev:qq |
|||
|
|||
# 京东小程序 |
|||
npm run dev:jd |
|||
``` |
|||
|
|||
## ⚙️ 配置说明 |
|||
|
|||
### 项目配置 |
|||
主要配置文件位于 `config/` 目录： |
|||
|
|||
- `config/index.ts` - Taro主配置文件 |
|||
- `config/dev.ts` - 开发环境配置 |
|||
- `config/prod.ts` - 生产环境配置 |
|||
- `config/env.ts` - 环境变量配置（新增） |
|||
- `config/app.ts` - 应用配置（API地址、租户ID等） |
|||
|
|||
### 环境变量配置 |
|||
项目支持多环境配置，在 `config/env.ts` 中管理： |
|||
|
|||
```typescript |
|||
// 环境变量配置 |
|||
export const ENV_CONFIG = { |
|||
development: { |
|||
API_BASE_URL: 'http://localhost:3000/api', |
|||
APP_NAME: 'Taro App Dev', |
|||
DEBUG: 'true', |
|||
}, |
|||
production: { |
|||
API_BASE_URL: 'https://api.example.com', |
|||
APP_NAME: 'Taro App', |
|||
DEBUG: 'false', |
|||
}, |
|||
test: { |
|||
API_BASE_URL: 'https://test-api.example.com', |
|||
APP_NAME: 'Taro App Test', |
|||
DEBUG: 'true', |
|||
} |
|||
} |
|||
|
|||
// 获取当前环境配置 |
|||
export function getEnvConfig() { |
|||
const env = process.env.NODE_ENV || 'development' |
|||
if (env === 'production') { |
|||
return ENV_CONFIG.production |
|||
} else if (env === 'test') { |
|||
return ENV_CONFIG.test |
|||
} else { |
|||
return ENV_CONFIG.development |
|||
} |
|||
} |
|||
|
|||
// 导出环境变量 |
|||
export const { API_BASE_URL, APP_NAME, DEBUG } = getEnvConfig() |
|||
``` |
|||
|
|||
### 应用配置 |
|||
在 `config/app.ts` 中配置： |
|||
```typescript |
|||
import { API_BASE_URL } from './env' |
|||
|
|||
// 租户ID |
|||
export const TenantId = 'your_tenant_id' |
|||
|
|||
// API基础地址（自动从环境配置读取） |
|||
export const BaseUrl = API_BASE_URL |
|||
|
|||
// 其他配置... |
|||
``` |
|||
|
|||
### 环境切换 |
|||
通过设置 `NODE_ENV` 环境变量来切换不同环境： |
|||
|
|||
```bash |
|||
# 开发环境（默认） |
|||
npm run dev:weapp |
|||
|
|||
# 生产环境 |
|||
NODE_ENV=production npm run dev:weapp |
|||
|
|||
# 测试环境 |
|||
NODE_ENV=test npm run dev:weapp |
|||
``` |
|||
|
|||
## 🌍 环境变量详细说明 |
|||
|
|||
### 环境变量文件结构 |
|||
``` |
|||
config/ |
|||
├── env.ts # 环境变量配置文件 |
|||
├── app.ts # 应用配置（使用环境变量） |
|||
└── index.ts # Taro配置（注入环境变量） |
|||
``` |
|||
|
|||
### 支持的环境变量 |
|||
| 变量名 | 说明 | 开发环境默认值 | 生产环境建议值 | |
|||
|--------|------|---------------|---------------| |
|||
| `API_BASE_URL` | API基础地址 | `http://localhost:3000/api` | `https://api.yourdomain.com/api` | |
|||
| `APP_NAME` | 应用名称 | `Taro App Dev` | `Your App Name` | |
|||
| `DEBUG` | 调试模式 | `true` | `false` | |
|||
|
|||
### 环境变量使用方法 |
|||
|
|||
#### 1. 修改环境配置 |
|||
编辑 `config/env.ts` 文件： |
|||
```typescript |
|||
export const ENV_CONFIG = { |
|||
development: { |
|||
API_BASE_URL: 'http://localhost:3000/api', // 修改为你的开发环境API地址 |
|||
APP_NAME: 'My App Dev', |
|||
DEBUG: 'true', |
|||
}, |
|||
production: { |
|||
API_BASE_URL: 'https://api.yourdomain.com/api', // 修改为你的生产环境API地址 |
|||
APP_NAME: 'My App', |
|||
DEBUG: 'false', |
|||
} |
|||
} |
|||
``` |
|||
|
|||
#### 2. 在代码中使用环境变量 |
|||
```typescript |
|||
// 在 config/app.ts 中 |
|||
import { API_BASE_URL, APP_NAME, DEBUG } from './env' |
|||
|
|||
export const BaseUrl = API_BASE_URL |
|||
export const AppName = APP_NAME |
|||
export const IsDebug = DEBUG === 'true' |
|||
|
|||
// 在其他文件中使用 |
|||
import { BaseUrl } from '@/config/app' |
|||
console.log('API地址:', BaseUrl) |
|||
``` |
|||
|
|||
#### 3. 运行时环境切换 |
|||
```bash |
|||
# 开发环境（默认） |
|||
npm run dev:weapp |
|||
|
|||
# 生产环境 |
|||
NODE_ENV=production npm run dev:weapp |
|||
|
|||
# 测试环境 |
|||
NODE_ENV=test npm run dev:weapp |
|||
|
|||
# 构建生产版本 |
|||
NODE_ENV=production npm run build:weapp |
|||
``` |
|||
|
|||
### 环境变量最佳实践 |
|||
|
|||
1. **敏感信息处理**：不要在代码中硬编码敏感信息，使用环境变量管理 |
|||
2. **环境隔离**：确保不同环境使用不同的API地址和配置 |
|||
3. **默认值设置**：为所有环境变量提供合理的默认值 |
|||
4. **类型安全**：使用TypeScript确保环境变量的类型安全 |
|||
|
|||
### 路径别名配置 |
|||
项目已配置路径别名，可以使用以下方式导入： |
|||
```typescript |
|||
import Component from '@/components/Component' |
|||
import { request } from '@/utils/request' |
|||
import { useCart } from '@/hooks/useCart' |
|||
import config from '@/config/app' |
|||
``` |
|||
|
|||
### 样式配置 |
|||
- **Sass**: 支持嵌套、变量、混入等特性 |
|||
- **TailwindCSS**: 原子化CSS，配置文件为 `tailwind.config.js` |
|||
- **PostCSS**: 自动处理CSS兼容性，配置文件为 `postcss.config.js` |
|||
|
|||
## 🎯 核心功能 |
|||
|
|||
### 🔐 用户认证与授权 |
|||
- **微信登录**：基于微信OpenID的用户认证 |
|||
- **短信登录**：支持手机号短信验证登录 |
|||
- **用户注册**：完整的用户注册流程 |
|||
- **密码找回**：支持手机号找回密码 |
|||
|
|||
### 📝 内容管理系统(CMS) |
|||
- **文章浏览**：支持文章列表和详情查看 |
|||
- **分类管理**：内容分类浏览 |
|||
- **富文本渲染**：支持Markdown内容渲染 |
|||
- **媒体展示**：图片、视频等媒体文件展示 |
|||
|
|||
### 🛒 电商系统 |
|||
- **商品展示**：商品列表、详情、分类浏览 |
|||
- **购物车**：商品加入购物车、数量管理 |
|||
- **订单管理**：订单创建、查看、状态跟踪 |
|||
- **地址管理**：收货地址的增删改查 |
|||
- **支付集成**：支持微信支付等支付方式 |
|||
|
|||
### 👤 用户中心 |
|||
- **个人资料**：用户信息查看和编辑 |
|||
- **实名认证**：用户身份验证功能 |
|||
- **帮助中心**：常见问题和帮助文档 |
|||
- **关于我们**：应用介绍和联系方式 |
|||
- **设置中心**：个人偏好设置 |
|||
|
|||
### 📊 数据可视化 |
|||
- **图表展示**：基于ECharts的数据可视化 |
|||
- **统计分析**：业务数据统计展示 |
|||
- **实时更新**：动态数据更新 |
|||
|
|||
## 🏗️ 项目结构 |
|||
|
|||
``` |
|||
src/ |
|||
├── app.config.ts # 应用配置文件 |
|||
├── app.scss # 全局样式 |
|||
├── app.ts # 应用入口文件 |
|||
├── api/ # API接口定义 |
|||
│ ├── cms/ # 内容管理相关API |
|||
│ ├── shop/ # 商城相关API |
|||
│ ├── system/ # 系统相关API |
|||
│ ├── passport/ # 用户认证相关API |
|||
│ └── index.ts # API统一导出 |
|||
├── assets/ # 静态资源 |
|||
│ └── tabbar/ # 底部导航图标 |
|||
├── components/ # 公共组件 |
|||
│ ├── Header.tsx # 页面头部组件 |
|||
│ ├── TabBar.tsx # 底部导航组件 |
|||
│ ├── GoodsList.tsx # 商品列表组件 |
|||
│ └── ... |
|||
├── hooks/ # 自定义Hooks |
|||
│ └── useCart.ts # 购物车Hook |
|||
├── pages/ # 页面文件 |
|||
│ ├── index/ # 首页 |
|||
│ ├── cart/ # 购物车页面 |
|||
│ ├── order/ # 订单页面 |
|||
│ └── user/ # 用户中心页面 |
|||
├── passport/ # 用户认证页面 |
|||
│ ├── login.tsx # 登录页面 |
|||
│ ├── register.tsx # 注册页面 |
|||
│ └── ... |
|||
├── cms/ # 内容管理页面 |
|||
│ ├── category/ # 分类页面 |
|||
│ └── detail/ # 详情页面 |
|||
├── shop/ # 商城页面 |
|||
│ ├── category/ # 商品分类 |
|||
│ ├── goodsDetail/ # 商品详情 |
|||
│ ├── orderConfirm/ # 订单确认 |
|||
│ └── orderDetail/ # 订单详情 |
|||
├── user/ # 用户相关页面 |
|||
│ ├── profile/ # 个人资料 |
|||
│ ├── address/ # 地址管理 |
|||
│ ├── setting/ # 设置 |
|||
│ └── ... |
|||
└── utils/ # 工具函数 |
|||
├── request.ts # 网络请求封装 |
|||
├── common.ts # 通用工具函数 |
|||
├── time.ts # 时间处理工具 |
|||
└── server.ts # 服务端相关工具 |
|||
|
|||
config/ # 配置文件目录 |
|||
├── index.ts # Taro主配置 |
|||
├── dev.ts # 开发环境配置 |
|||
├── prod.ts # 生产环境配置 |
|||
├── env.ts # 环境变量配置 |
|||
└── app.ts # 应用配置 |
|||
|
|||
types/ # 类型定义 |
|||
└── global.d.ts # 全局类型定义 |
|||
``` |
|||
|
|||
## 🔧 开发规范 |
|||
|
|||
### 代码结构 |
|||
- **Pages**：页面组件，负责页面逻辑和UI展示 |
|||
- **Components**：公共组件，可复用的UI组件 |
|||
- **Hooks**：自定义Hooks，封装业务逻辑 |
|||
- **Utils**：工具函数，通用的功能函数 |
|||
- **API**：接口定义，与后端API的交互 |
|||
|
|||
### 命名规范 |
|||
- **组件名**：使用大驼峰命名法（PascalCase） |
|||
- **文件名**：使用小驼峰命名法（camelCase）或短横线命名法（kebab-case） |
|||
- **变量名**：使用小驼峰命名法（camelCase） |
|||
- **常量**：使用全大写，下划线分隔 |
|||
- **CSS类名**：使用短横线命名法（kebab-case） |
|||
|
|||
### TypeScript规范 |
|||
- 优先使用接口（interface）定义类型 |
|||
- 为函数参数和返回值添加类型注解 |
|||
- 使用泛型提高代码复用性 |
|||
- 避免使用 `any` 类型 |
|||
|
|||
## 📚 构建与部署 |
|||
|
|||
### 构建命令 |
|||
```bash |
|||
# 构建微信小程序 |
|||
npm run build:weapp |
|||
|
|||
# 构建H5应用 |
|||
npm run build:h5 |
|||
|
|||
# 构建支付宝小程序 |
|||
npm run build:alipay |
|||
|
|||
# 构建其他平台 |
|||
npm run build:swan # 百度智能小程序 |
|||
npm run build:tt # 字节跳动小程序 |
|||
npm run build:qq # QQ小程序 |
|||
npm run build:jd # 京东小程序 |
|||
``` |
|||
|
|||
### 主要API模块 |
|||
项目API按功能模块组织： |
|||
|
|||
- **用户认证**: `src/api/passport/` - 登录、注册、权限验证 |
|||
- **用户管理**: `src/api/system/user/` - 用户信息管理 |
|||
- **内容管理**: `src/api/cms/` - 文章、媒体文件管理 |
|||
- **商城管理**: `src/api/shop/` - 商品、订单管理 |
|||
- **系统管理**: `src/api/system/` - 系统配置、参数管理 |
|||
|
|||
## 🚀 部署指南 |
|||
|
|||
### 微信小程序部署 |
|||
1. 构建小程序代码： |
|||
```bash |
|||
npm run build:weapp |
|||
``` |
|||
2. 使用微信开发者工具打开 `dist` 目录 |
|||
3. 点击"上传"按钮，上传代码到微信后台 |
|||
4. 在微信公众平台提交审核 |
|||
|
|||
### H5应用部署 |
|||
1. 构建H5应用： |
|||
```bash |
|||
npm run build:h5 |
|||
``` |
|||
2. 将 `dist` 目录下的文件上传到Web服务器 |
|||
3. 配置Nginx或Apache服务器 |
|||
4. 确保HTTPS访问（微信要求） |
|||
|
|||
### 其他平台部署 |
|||
各平台部署流程类似，构建对应平台代码后，使用相应的开发者工具上传即可。 |
|||
|
|||
### 生产环境配置 |
|||
在生产环境中，需要修改相关配置： |
|||
|
|||
1. **环境变量配置**：修改 `config/env.ts` 中的生产环境配置 |
|||
```typescript |
|||
production: { |
|||
API_BASE_URL: 'https://your-production-api.com/api', |
|||
APP_NAME: 'Your App Name', |
|||
DEBUG: 'false', |
|||
} |
|||
``` |
|||
|
|||
2. **构建配置**：修改 `config/prod.ts` 中的构建配置 |
|||
- 启用代码压缩和混淆 |
|||
- 配置CDN加速 |
|||
- 优化资源加载 |
|||
|
|||
3. **部署命令**： |
|||
```bash |
|||
NODE_ENV=production npm run build:weapp |
|||
``` |
|||
|
|||
## 🔧 常见问题 |
|||
|
|||
### 开发环境问题 |
|||
1. **Node.js版本问题**：确保使用Node.js 16+版本 |
|||
2. **依赖安装失败**：尝试清除缓存后重新安装 |
|||
```bash |
|||
npm cache clean --force |
|||
npm install |
|||
``` |
|||
3. **编译错误**：检查TypeScript配置和代码语法 |
|||
|
|||
### 小程序开发问题 |
|||
1. **微信开发者工具无法预览**：检查appid配置和网络连接 |
|||
2. **API请求失败**：确认后端服务正常运行，检查域名白名单 |
|||
3. **样式显示异常**：检查rpx单位使用和NutUI组件样式 |
|||
|
|||
### 性能优化建议 |
|||
1. **代码分割**：使用Taro的分包功能减少主包大小 |
|||
2. **图片优化**：使用WebP格式，启用图片懒加载 |
|||
3. **请求优化**：合并API请求，使用缓存机制 |
|||
|
|||
## 🤝 贡献指南 |
|||
|
|||
1. Fork 本仓库 |
|||
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) |
|||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) |
|||
4. 推送到分支 (`git push origin feature/AmazingFeature`) |
|||
5. 打开 Pull Request |
|||
|
|||
## 📄 许可证 |
|||
|
|||
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 |
|||
|
|||
## 📞 联系我们 |
|||
|
|||
- 官网：https://websoft.top |
|||
- 邮箱：170083662@qq.com |
|||
- QQ群：479713884 |
|||
|
|||
--- |
|||
|
|||
⭐ 如果这个项目对您有帮助，请给我们一个星标！ |
|||
@ -0,0 +1,42 @@ |
|||
// 环境变量配置
|
|||
export const ENV_CONFIG = { |
|||
// 开发环境
|
|||
development: { |
|||
API_BASE_URL: 'http://localhost:9200/api', |
|||
APP_NAME: 'Taro App Dev', |
|||
DEBUG: 'true', |
|||
}, |
|||
// 生产环境
|
|||
production: { |
|||
API_BASE_URL: 'https://cms-api.websoft.top/api', |
|||
APP_NAME: 'Taro App', |
|||
DEBUG: 'false', |
|||
}, |
|||
// 测试环境
|
|||
test: { |
|||
API_BASE_URL: 'https://test-api.example.com/api', |
|||
APP_NAME: 'Taro App Test', |
|||
DEBUG: 'true', |
|||
} |
|||
} |
|||
|
|||
// 获取当前环境配置
|
|||
export function getEnvConfig() { |
|||
const env = process.env.NODE_ENV || 'development' |
|||
if (env === 'production') { |
|||
return ENV_CONFIG.production |
|||
} else { // @ts-ignore
|
|||
if (env === 'test') { |
|||
return ENV_CONFIG.test |
|||
} else { |
|||
return ENV_CONFIG.development |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 导出环境变量
|
|||
export const { |
|||
API_BASE_URL, |
|||
APP_NAME, |
|||
DEBUG |
|||
} = getEnvConfig() |
|||
Loading…
Reference in new issue