366 lines
10 KiB
Markdown
366 lines
10 KiB
Markdown
# 红色文化宣传小程序
|
||
|
||
> 基于 Taro 4.0 + React + TypeScript 构建的多端应用，主要面向微信小程序平台，集成红色文化宣传和AI问答功能
|
||
|
||
[](https://taro.aotu.io/)
|
||
[](https://reactjs.org/)
|
||
[](https://www.typescriptlang.org/)
|
||
[](https://nutui.jd.com/)
|
||
[](https://tailwindcss.com/)
|
||
|
||
## 🌟 项目特色
|
||
|
||
- **🚀 多端开发** - 基于Taro框架，一套代码多端运行（微信小程序、H5、支付宝小程序等）
|
||
- **📱 小程序优化** - 专为微信小程序优化，用户体验流畅
|
||
- **🎨 现代UI组件** - 集成NutUI组件库，界面美观统一
|
||
- **🔴 红色文化主题** - 专注红色文化宣传，内容丰富
|
||
- **🤖 AI问答功能** - 集成智能问答系统，提供互动体验
|
||
- **🔧 CMS集成** - 与WebSoft CMS系统深度集成，内容动态管理
|
||
- **📊 数据可视化** - 集成ECharts图表组件，数据展示直观
|
||
- **🔐 用户系统** - 完整的用户注册、登录、个人中心功能
|
||
|
||
## 🏗️ 技术架构
|
||
|
||
### 前端技术栈
|
||
- **框架**: Taro 4.0.8 (多端统一开发框架)
|
||
- **语言**: TypeScript 5.7.2
|
||
- **UI库**: React 18.3.1
|
||
- **组件库**: NutUI React Taro 2.7.4
|
||
- **样式**: Tailwind CSS 3.4.17 + Sass
|
||
- **图表**: ECharts Taro3 React
|
||
- **构建工具**: Webpack 5.78.0
|
||
- **代码规范**: ESLint + TypeScript ESLint
|
||
|
||
### 后端集成
|
||
- **API服务**: https://cms-api.websoft.top/api
|
||
- **租户ID**: 10556
|
||
- **内容管理**: WebSoft CMS系统
|
||
- **用户认证**: JWT Token认证
|
||
- **多租户**: 支持多租户架构
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
template-10556/
|
||
├── src/
|
||
│ ├── pages/ # 页面目录
|
||
│ │ ├── index/ # 首页
|
||
│ │ │ ├── index.tsx # 首页主组件
|
||
│ │ │ ├── Banner.tsx # 轮播图组件
|
||
│ │ │ ├── Menu.tsx # 菜单组件
|
||
│ │ │ └── Login.tsx # 登录组件
|
||
│ │ ├── study/ # AI问答页面
|
||
│ │ ├── user/ # 用户中心页面
|
||
│ │ ├── article/ # 文章页面
|
||
│ │ └── kefu/ # 客服页面
|
||
│ ├── passport/ # 用户认证模块
|
||
│ │ ├── login.tsx # 登录页面
|
||
│ │ ├── register.tsx # 注册页面
|
||
│ │ ├── forget.tsx # 忘记密码
|
||
│ │ └── setting.tsx # 设置页面
|
||
│ ├── user/ # 用户相关页面
|
||
│ │ ├── profile/ # 个人资料
|
||
│ │ ├── company/ # 企业信息
|
||
│ │ ├── setting/ # 用户设置
|
||
│ │ └── userVerify/ # 用户认证
|
||
│ ├── components/ # 公共组件
|
||
│ │ ├── Header.tsx # 头部组件
|
||
│ │ ├── TabBar.tsx # 底部导航
|
||
│ │ └── Gap.tsx # 间距组件
|
||
│ ├── api/ # API 接口封装
|
||
│ │ ├── cms/ # CMS相关API
|
||
│ │ ├── system/ # 系统管理API
|
||
│ │ ├── layout/ # 布局相关API
|
||
│ │ └── passport/ # 用户认证API
|
||
│ ├── utils/ # 工具函数
|
||
│ │ ├── request.ts # HTTP请求封装
|
||
│ │ ├── config.ts # 配置文件
|
||
│ │ ├── common.ts # 通用工具
|
||
│ │ └── server.ts # 服务端工具
|
||
│ ├── assets/ # 静态资源
|
||
│ │ └── tabbar/ # 底部导航图标
|
||
│ ├── app.config.ts # 应用配置
|
||
│ ├── app.scss # 全局样式
|
||
│ └── app.ts # 应用入口
|
||
├── config/ # 环境配置
|
||
│ ├── dev.ts # 开发环境配置
|
||
│ ├── prod.ts # 生产环境配置
|
||
│ └── index.ts # 配置入口
|
||
├── dist/ # 构建输出目录
|
||
├── types/ # TypeScript类型定义
|
||
├── project.config.json # 微信小程序配置
|
||
├── package.json # 项目依赖
|
||
├── tailwind.config.js # Tailwind配置
|
||
├── tsconfig.json # TypeScript配置
|
||
└── README.md # 项目说明
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js 18.0 或更高版本
|
||
- npm 或 pnpm 包管理器
|
||
- 微信开发者工具（用于小程序开发调试）
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
# 克隆项目
|
||
git clone <repository-url>
|
||
cd template-10556
|
||
|
||
# 安装依赖（推荐使用pnpm）
|
||
pnpm install
|
||
# 或使用npm
|
||
npm install
|
||
```
|
||
|
||
### 项目配置
|
||
|
||
项目配置文件位于 `src/utils/config.ts`：
|
||
|
||
```typescript
|
||
// 租户ID
|
||
export const TenantId = 10556;
|
||
// 接口地址
|
||
export const BaseUrl = 'https://cms-api.websoft.top/api';
|
||
// 当前版本
|
||
export const Version = 'v3.0.8';
|
||
// 版权信息
|
||
export const Copyright = 'WebSoft Inc.';
|
||
```
|
||
|
||
### 开发调试
|
||
|
||
```bash
|
||
# 微信小程序开发
|
||
npm run dev:weapp
|
||
|
||
# H5开发
|
||
npm run dev:h5
|
||
|
||
# 支付宝小程序开发
|
||
npm run dev:alipay
|
||
|
||
# 其他平台
|
||
npm run dev:swan # 百度小程序
|
||
npm run dev:tt # 字节跳动小程序
|
||
npm run dev:qq # QQ小程序
|
||
npm run dev:jd # 京东小程序
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
# 构建微信小程序
|
||
npm run build:weapp
|
||
|
||
# 构建H5
|
||
npm run build:h5
|
||
|
||
# 构建其他平台
|
||
npm run build:alipay
|
||
npm run build:swan
|
||
npm run build:tt
|
||
```
|
||
|
||
## 🎨 功能模块
|
||
|
||
### 主要页面
|
||
|
||
1. **首页** - 红色文化宣传主页，包含轮播图、菜单导航等
|
||
2. **AI问答** - 智能问答系统，提供红色文化相关知识问答
|
||
3. **用户中心** - 个人信息管理、设置等功能
|
||
4. **文章页面** - 红色文化文章展示和阅读
|
||
5. **客服页面** - 在线客服功能
|
||
|
||
### 用户认证模块
|
||
|
||
- **登录注册** - 支持手机号登录、短信验证码登录
|
||
- **忘记密码** - 密码重置功能
|
||
- **用户设置** - 个人信息修改、密码修改
|
||
- **协议页面** - 用户协议和隐私政策
|
||
|
||
### 底部导航
|
||
|
||
- **首页** - 主要内容展示
|
||
- **AI问答** - 智能问答功能
|
||
- **我的** - 用户个人中心
|
||
|
||
## 🔧 核心功能
|
||
|
||
### 多端适配
|
||
|
||
- **微信小程序**: 主要目标平台，完整功能支持
|
||
- **H5页面**: 支持在浏览器中运行
|
||
- **其他小程序**: 支持支付宝、百度、字节跳动等小程序平台
|
||
- **响应式设计**: 自适应不同屏幕尺寸
|
||
|
||
### CMS内容管理
|
||
|
||
- **动态内容**: 从WebSoft CMS系统动态获取内容
|
||
- **文章管理**: 支持文章发布、分类、评论等功能
|
||
- **用户管理**: 完整的用户注册、认证、权限管理
|
||
- **多租户**: 支持多租户架构，租户ID: 10556
|
||
|
||
### API集成
|
||
|
||
- **统一封装**: 完整的API请求封装，支持TypeScript类型安全
|
||
- **错误处理**: 统一的错误处理和用户提示机制
|
||
- **认证管理**: JWT Token自动管理和刷新
|
||
- **请求拦截**: 自动添加租户ID和认证信息
|
||
|
||
## 🛠️ 开发指南
|
||
|
||
### 添加新页面
|
||
|
||
1. 在 `src/pages` 目录下创建新页面文件夹
|
||
2. 创建页面组件和配置文件
|
||
|
||
```typescript
|
||
// src/pages/new-page/new-page.tsx
|
||
import { useEffect } from 'react';
|
||
import Taro from '@tarojs/taro';
|
||
|
||
const NewPage = () => {
|
||
useEffect(() => {
|
||
Taro.setNavigationBarTitle({
|
||
title: '新页面'
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<div className="p-4">
|
||
<h1>新页面</h1>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NewPage;
|
||
```
|
||
|
||
```typescript
|
||
// src/pages/new-page/new-page.config.ts
|
||
export default definePageConfig({
|
||
navigationBarTitleText: '新页面'
|
||
});
|
||
```
|
||
|
||
3. 在 `src/app.config.ts` 中注册页面路由
|
||
|
||
### 创建新组件
|
||
|
||
```typescript
|
||
// src/components/NewComponent.tsx
|
||
import React from 'react';
|
||
|
||
interface NewComponentProps {
|
||
title: string;
|
||
content: string;
|
||
}
|
||
|
||
const NewComponent: React.FC<NewComponentProps> = ({ title, content }) => {
|
||
return (
|
||
<div className="p-4">
|
||
<h2 className="text-xl font-bold">{title}</h2>
|
||
<p>{content}</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NewComponent;
|
||
```
|
||
|
||
### API调用示例
|
||
|
||
```typescript
|
||
// 获取网站信息
|
||
import { getSiteInfo } from '@/api/layout';
|
||
|
||
const siteInfo = await getSiteInfo();
|
||
console.log(siteInfo.websiteName);
|
||
|
||
// 使用封装的请求方法
|
||
import { request } from '@/utils/request';
|
||
|
||
const result = await request({
|
||
url: '/cms/article/list',
|
||
method: 'GET',
|
||
data: {
|
||
page: 1,
|
||
limit: 10
|
||
}
|
||
});
|
||
```
|
||
|
||
## 📱 部署指南
|
||
|
||
### 微信小程序部署
|
||
|
||
1. 使用微信开发者工具打开项目
|
||
2. 构建小程序版本：`npm run build:weapp`
|
||
3. 在微信开发者工具中预览和上传代码
|
||
4. 在微信公众平台提交审核
|
||
|
||
### H5部署
|
||
|
||
1. 构建H5版本：`npm run build:h5`
|
||
2. 将 `dist` 目录部署到Web服务器
|
||
3. 配置域名和HTTPS证书
|
||
|
||
### 其他小程序平台
|
||
|
||
```bash
|
||
# 支付宝小程序
|
||
npm run build:alipay
|
||
|
||
# 百度小程序
|
||
npm run build:swan
|
||
|
||
# 字节跳动小程序
|
||
npm run build:tt
|
||
```
|
||
|
||
## 🔍 性能优化
|
||
|
||
- **代码分割**: Taro自动按页面分割代码
|
||
- **图片优化**: 使用Taro Image组件优化图片加载
|
||
- **缓存策略**: 合理的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
|
||
- **邮箱**: contact@websoft.top
|
||
- **电话**: 0771-5386339
|
||
- **地址**: 广西南宁市
|
||
|
||
## 🙏 致谢
|
||
|
||
感谢以下开源项目：
|
||
|
||
- [Taro](https://taro.aotu.io/) - 多端统一开发框架
|
||
- [React](https://reactjs.org/) - 用户界面库
|
||
- [NutUI](https://nutui.jd.com/) - 移动端组件库
|
||
- [TypeScript](https://www.typescriptlang.org/) - JavaScript的超集
|
||
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的CSS框架
|
||
- [ECharts](https://echarts.apache.org/) - 数据可视化图表库
|
||
|
||
---
|
||
|
||
**WebSoft Inc.** - 红色文化宣传小程序 🚀
|