红色文化宣传小程序

基于 Taro 4.0 + React + TypeScript 构建的多端应用，主要面向微信小程序平台，集成红色文化宣传和AI问答功能

🌟 项目特色

• 🚀 多端开发 - 基于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 包管理器
• 微信开发者工具（用于小程序开发调试）

安装依赖

# 克隆项目
git clone <repository-url>
cd template-10556

# 安装依赖（推荐使用pnpm）
pnpm install
# 或使用npm
npm install

项目配置

项目配置文件位于 src/utils/config.ts：

// 租户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.';

开发调试

# 微信小程序开发
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      # 京东小程序

构建生产版本

# 构建微信小程序
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. 创建页面组件和配置文件

// 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;

// src/pages/new-page/new-page.config.ts
export default definePageConfig({
  navigationBarTitleText: '新页面'
});

3. 在 src/app.config.ts 中注册页面路由

创建新组件

// 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调用示例

// 获取网站信息
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证书

其他小程序平台

# 支付宝小程序
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 文件了解详情

📞 联系我们

• 官网: https://websoft.top
• 邮箱: contact@websoft.top
• 电话: 0771-5386339
• 地址: 广西南宁市

🙏 致谢

感谢以下开源项目：

• Taro - 多端统一开发框架
• React - 用户界面库
• NutUI - 移动端组件库
• TypeScript - JavaScript的超集
• Tailwind CSS - 实用优先的CSS框架
• ECharts - 数据可视化图表库

---

WebSoft Inc. - 红色文化宣传小程序 🚀