Skip to content

飞
飞鹤小程序
Commit 37a85782 authored by spc's avatar spc
Browse files
Options

md and brand

parent 643caf8a
Show whitespace changes
Inline Side-by-side
Showing with 876 additions and 459 deletions
README.md 0 → 100644
View file @ 37a85782
# 飞鹤星妈会小程序项目
## 项目简介
飞鹤星妈会小程序是专为母婴用户打造的一站式育儿服务平台，提供专业的育儿知识、实用的育儿工具以及活跃的社区交流功能，助力妈妈们科学育儿，陪伴宝宝健康成长。
## 技术栈
- **前端框架**：uni-app（Vue 2/Vue 3）
- **状态管理**：Pinia
- **UI组件库**：Vant Weapp
- **构建工具**：HBuilderX/uni-app CLI
## 快速开始
### 环境要求
- Node.js >= 12.0.0
- npm >= 6.0.0
- HBuilderX（推荐）或VSCode
- 微信开发者工具
### 安装依赖
```bash
npm install
```
### 开发调试
1. 在HBuilderX中打开项目
2. 选择运行 -> 运行到小程序模拟器 -> 微信开发者工具
或使用命令行：
```bash
# 开发模式
npm run dev:mp-weixin
# 构建生产版本
npm run build:mp-weixin
```
### 目录说明
项目采用标准的uni-app目录结构，主要包含以下部分：
- `api/`：API接口定义和请求封装
- `components/`：自定义组件
- `pages/`：小程序页面
- `stores/`：Pinia状态管理
- `utils/`：工具函数
- `views/`：主要视图组件
- `mock/`：模拟数据
详细的项目结构说明请参考[project_structure.md](project_structure.md)文件。
## 核心功能
1. **用户中心**：登录授权、信息管理、宝宝档案
2. **育儿工具**：喂养记录、产检提醒、生长测评、星妈起名
3. **内容中心**：育儿知识、专家问答、社区分享
4. **品牌服务**：产品信息、会员权益、活动参与
## 开发规范
1. **代码规范**：遵循Vue.js风格指南
2. **命名规范**：采用语义化命名，组件使用大驼峰，文件使用小写字母加连字符
3. **API调用**：统一使用api目录下的封装方法
4. **状态管理**：全局状态使用Pinia，组件状态使用data或ref/reactive
5. **页面跳转**：统一使用utils中的jump方法
## 注意事项
1. 项目同时支持Vue 2和Vue 3，开发时注意版本差异
2. 开发前请确保已阅读[project_structure.md](project_structure.md)文档
3. 所有接口调用需要在用户登录后进行
4. 提交代码前请确保代码能正常编译和运行
5. 敏感信息（如API密钥、用户凭证）请勿直接硬编码在代码中
## 联系方式
如有任何问题或建议，请联系项目负责人。
---
mock/brand.json
View file @ 37a85782
{
"swiperList": [{
"swiperList": [
{
"link": {
"extra": {},
"type": 1,
......@@ -7,12 +8,14 @@
},
"title": "飞鹤哈尔滨智能产业园",
"url": "brandpage/Banner47.jpeg"
}, {
},
{
"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideo.mp4",
"link": {},
"title": "北纬47°黄金种植带",
"url": "brandpage/Banner45.jpeg"
}, {
},
{
"link": {
"extra": {},
"type": 3,
......@@ -20,7 +23,8 @@
},
"title": "飞鹤自由牧场",
"url": "brandpage/Banner46.jpeg"
}],
}
],
"video2Channel": {
"finderUserName": "",
"videoUrl": "brandpage/videoChannel/video2Channel/V1/1.mp4",
......@@ -29,7 +33,8 @@
"title": "品牌故事视频2"
},
"product": [
[{
[
{
"productId": "",
"shareTitle": "星飞帆经典 3段",
"link": "",
......@@ -40,7 +45,8 @@
"contentImg": "0-1",
"desc": "星飞帆经典 3段",
"bgUrl": "brandpage/pic_0_1.png"
}, {
},
{
"productId": "",
"shareTitle": "星飞帆卓睿 3段",
"link": "",
......@@ -51,7 +57,8 @@
"contentImg": "0-2",
"desc": "星飞帆卓睿 3段",
"bgUrl": "brandpage/pic_0_2.png"
}, {
},
{
"productId": "",
"shareTitle": "星飞帆卓耀 3段",
"link": "",
......@@ -62,7 +69,8 @@
"contentImg": "0-3",
"desc": "星飞帆卓耀 3段",
"bgUrl": "brandpage/pic_0_3.png"
}, {
},
{
"productId": "749098220531287139",
"shareTitle": "爱本跃动蛋白营养粉",
"link": "",
......@@ -73,7 +81,8 @@
"contentImg": "0-4",
"desc": "爱本跃动蛋白营养粉",
"bgUrl": "brandpage/pic_0_4.png"
}, {
},
{
"productId": "693279214116405585",
"shareTitle": "高钙奶酪泡芙脆",
"link": "",
......@@ -84,7 +93,8 @@
"contentImg": "0-5",
"desc": "高钙奶酪泡芙脆",
"bgUrl": "brandpage/pic_0_5.png"
}, {
},
{
"productId": "543558664688883066",
"shareTitle": "北纬47度黄糯玉米",
"link": "",
......@@ -95,8 +105,10 @@
"contentImg": "0-6",
"desc": "北纬47度黄糯玉米",
"bgUrl": "brandpage/pic_0_6.png"
}],
[{
}
],
[
{
"productId": "",
"shareTitle": "星飞帆经典 3段",
"link": "",
......@@ -107,7 +119,8 @@
"contentImg": "1-1",
"desc": "星飞帆经典 3段",
"bgUrl": "brandpage/pic_1_1.png"
}, {
},
{
"productId": "",
"shareTitle": "星飞帆卓睿 3段",
"link": "",
......@@ -118,7 +131,8 @@
"contentImg": "1-2",
"desc": "星飞帆卓睿 3段",
"bgUrl": "brandpage/pic_1_2.png"
}, {
},
{
"productId": "",
"shareTitle": "星飞帆卓耀 3段",
"link": "",
......@@ -129,7 +143,8 @@
"contentImg": "1-3",
"desc": "星飞帆卓耀 3段",
"bgUrl": "brandpage/pic_1_3.png"
}, {
},
{
"productId": "",
"shareTitle": "星飞帆卓睿Pro",
"link": "",
......@@ -140,7 +155,8 @@
"contentImg": "1-4",
"desc": "星飞帆卓睿Pro",
"bgUrl": "brandpage/pic_1_4.png"
}, {
},
{
"productId": "",
"shareTitle": "臻稚卓蓓 3段",
"link": "",
......@@ -151,7 +167,8 @@
"contentImg": "1-5",
"desc": "臻稚卓蓓 3段",
"bgUrl": "brandpage/pic_1_5.png"
}, {
},
{
"productId": "",
"shareTitle": "臻爱倍护 3段",
"link": "",
......@@ -162,8 +179,10 @@
"contentImg": "1-6",
"desc": "臻爱倍护 3段",
"bgUrl": "brandpage/pic_1_6.png"
}],
[{
}
],
[
{
"productId": "739634042657637394",
"shareTitle": "飞鹤臻贵儿童配方奶粉",
"link": "",
......@@ -174,7 +193,8 @@
"contentImg": "5-11",
"desc": "飞鹤臻贵儿童配方奶粉",
"bgUrl": "brandpage/pic_5_1.png"
}, {
},
{
"productId": "770087385697019251",
"shareTitle": "飞鹤臻贵悦智配方奶粉",
"link": "",
......@@ -185,7 +205,8 @@
"contentImg": "5-21",
"desc": "飞鹤臻贵悦智配方奶粉",
"bgUrl": "brandpage/pic_5_2.png"
}, {
},
{
"productId": "584206109842248681",
"shareTitle": "飞鹤牧场浓厚纯牛奶",
"link": "",
......@@ -196,7 +217,8 @@
"contentImg": "5-31",
"desc": "飞鹤牧场浓厚纯牛奶",
"bgUrl": "brandpage/pic_5_3.png"
}, {
},
{
"productId": "411619746805715934",
"shareTitle": "六水香长粒香大米",
"link": "",
......@@ -207,7 +229,8 @@
"contentImg": "5-41",
"desc": "六水香长粒香大米",
"bgUrl": "brandpage/pic_5_4.png"
}, {
},
{
"productId": "675921531863073227",
"shareTitle": "红富士晒晒苹果肉",
"link": "",
......@@ -218,7 +241,8 @@
"contentImg": "5-51",
"desc": "红富士晒晒苹果肉",
"bgUrl": "brandpage/pic_5_5.png"
}, {
},
{
"productId": "599340570081015525",
"shareTitle": "内衣专护洗衣液",
"link": "",
......@@ -229,8 +253,10 @@
"contentImg": "5-61",
"desc": "内衣专护洗衣液",
"bgUrl": "brandpage/pic_5_6.png"
}],
[{
}
],
[
{
"productId": "545768683314537529",
"shareTitle": "北纬47度白甜糯玉米",
"link": "",
......@@ -241,7 +267,8 @@
"contentImg": "4-1",
"desc": "北纬47度白甜糯玉米",
"bgUrl": "brandpage/pic_4_1.png"
}, {
},
{
"productId": "543558664688883066",
"shareTitle": "北纬47度黄糯玉米",
"link": "",
......@@ -252,7 +279,8 @@
"contentImg": "4-2",
"desc": "北纬47度黄糯玉米",
"bgUrl": "brandpage/pic_4_2.png"
}, {
},
{
"productId": "469675861496440509",
"shareTitle": "北纬47度低GI水果玉米粒袋装",
"link": "",
......@@ -263,7 +291,8 @@
"contentImg": "4-3",
"desc": "北纬47度低GI\n水果玉米粒袋装",
"bgUrl": "brandpage/pic_4_3.png"
}, {
},
{
"productId": "733411972814471679",
"shareTitle": "北纬47度东北烧烤味玉米段",
"link": "",
......@@ -274,7 +303,8 @@
"contentImg": "4-4",
"desc": "北纬47度东北\n烧烤味玉米段",
"bgUrl": "brandpage/pic_4_4.png"
}, {
},
{
"productId": "701593489939273114",
"shareTitle": "N47°植物酵素乳",
"link": "",
......@@ -285,7 +315,8 @@
"contentImg": "4-5",
"desc": "N47°植物酵素乳",
"bgUrl": "brandpage/pic_4_5.png"
}, {
},
{
"productId": "705230699873112222",
"shareTitle": "N47°水果玉米汁",
"link": "",
......@@ -296,8 +327,10 @@
"contentImg": "4-6",
"desc": "N47°水果玉米汁",
"bgUrl": "brandpage/pic_4_6.png"
}],
[{
}
],
[
{
"productId": "749098220531287139",
"shareTitle": "爱本跃动蛋白营养粉",
"link": "",
......@@ -308,7 +341,8 @@
"contentImg": "2-1",
"desc": "爱本跃动蛋白营养粉",
"bgUrl": "brandpage/pic_2_1.png"
}, {
},
{
"productId": "748659115456528889",
"shareTitle": "爱本牛初乳",
"link": "",
......@@ -319,7 +353,8 @@
"contentImg": "2-2",
"desc": "爱本牛初乳",
"bgUrl": "brandpage/pic_2_2.png"
}, {
},
{
"productId": "768991288915277214",
"shareTitle": "爱本每日蛋白营养糊",
"link": "",
......@@ -330,7 +365,8 @@
"contentImg": "2-3",
"desc": "爱本每日蛋白营养糊",
"bgUrl": "brandpage/pic_2_3.png"
}, {
},
{
"productId": "767546274051183809",
"shareTitle": "爱本纤纤益生菌羽衣甘蓝蛋白粉",
"link": "",
......@@ -341,7 +377,8 @@
"contentImg": "2-4",
"desc": "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
"bgUrl": "brandpage/pic_2_4.png"
}, {
},
{
"productId": "749443379821195324",
"shareTitle": "爱本参芝初乳肽",
"link": "",
......@@ -352,7 +389,8 @@
"contentImg": "2-5",
"desc": "爱本参芝初乳肽",
"bgUrl": "brandpage/pic_2_5.png"
}, {
},
{
"productId": "753354110711035152",
"shareTitle": "爱本悦眠功能粉",
"link": "",
......@@ -363,8 +401,10 @@
"contentImg": "2-6",
"desc": "爱本悦眠功能粉",
"bgUrl": "brandpage/pic_2_6.png"
}],
[{
}
],
[
{
"productId": "759563658744492290",
"shareTitle": "爱上吃菜乳酪",
"link": "",
......@@ -375,7 +415,8 @@
"contentImg": "3-1",
"desc": "爱上吃菜乳酪",
"bgUrl": "brandpage/pic_3_1.png"
}, {
},
{
"productId": "693279214116405585",
"shareTitle": "高钙奶酪泡芙脆",
"link": "",
......@@ -386,7 +427,8 @@
"contentImg": "3-2",
"desc": "高钙奶酪泡芙脆",
"bgUrl": "brandpage/pic_3_2.png"
}, {
},
{
"productId": "772183835488032281",
"shareTitle": "高纤黑巧乳酪",
"link": "",
......@@ -397,7 +439,8 @@
"contentImg": "3-3",
"desc": "高纤黑巧乳酪",
"bgUrl": "brandpage/pic_3_3.png"
}, {
},
{
"productId": "716141706338247497",
"shareTitle": "超新星水果奶酪",
"link": "",
......@@ -408,7 +451,8 @@
"contentImg": "3-4",
"desc": "超新星水果奶酪",
"bgUrl": "brandpage/pic_3_4.png"
}, {
},
{
"productId": "717871366421930449",
"shareTitle": "厚切流心芝士片",
"link": "",
......@@ -419,7 +463,8 @@
"contentImg": "3-5",
"desc": "厚切流心芝士片",
"bgUrl": "brandpage/pic_3_5.png"
}, {
},
{
"productId": "551135905055024574",
"shareTitle": "嚼奶粉乳酪",
"link": "",
......@@ -430,7 +475,8 @@
"contentImg": "3-6",
"desc": "嚼奶粉乳酪",
"bgUrl": "brandpage/pic_3_6.png"
}]
}
]
],
"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
"erqiPeizhi": {
......@@ -455,7 +501,15 @@
"title": "品牌故事视频1"
},
"esgInfoList": [
[{
[
{
"desc2": "飞鹤始终坚信，做母婴事业和做教育事业一样，要做母亲的事业、良心的事业，守护孩子健康成长。",
"link": {},
"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/esg4.mp4",
"desc": "中国飞鹤助力龙江教育",
"bgUrl": "brandpage/esg4_1.png"
},
{
"desc2": "飞鹤践行低碳节能，打造绿色产业链；承担龙头责任，引领行业创新发展；履行社会责任，构建共富共享生态",
"link": {
"extra": {},
......@@ -464,7 +518,8 @@
},
"desc": "中国飞鹤发布2024年ESG报告",
"bgUrl": "brandpage/esg1.png"
}, {
},
{
"desc2": "中国飞鹤于2025年4月初在全国范围内启动一项总规模12亿元的生育补贴计划，为符合条件的孕期家庭提供不少于1500元的补贴",
"link": {
"extra": {},
......@@ -473,7 +528,8 @@
},
"desc": "12亿元生育补贴计划",
"bgUrl": "brandpage/esg2.png"
}, {
},
{
"desc2": "百年大计，教育为本；教育大计，教师为本。近三年来，飞鹤已投入超过6500万元开展专项助教活动，惠及在职专任教师超过28万人",
"link": {
"extra": {},
......@@ -482,19 +538,31 @@
},
"desc": "教育公益",
"bgUrl": "brandpage/esg3.png"
}]
}
]
],
"qrInfoList": [{
"qrInfoList": [
{
"qrUrl": "brandpage/qrhxf_sph.png",
"title": "视频号",
"desc": "扫码关注<span style='color:#D3A358;'>鹤小飞一家</span>视频号，看超多有爱的趣味故事"
}, {
},
{
"qrUrl": "brandpage/qrhxf_wxxd.png",
"title": "微信小店",
"desc": "扫码进入<span style='color:#D3A358;'>鹤小飞一家</span>店铺，挑选精美限量周边"
}],
"productTabList": ["全部", "母婴全阶", "星妈优选", "北纬47°", "功能营养", "儿童产品"],
"swiperIconList": [{
}
],
"productTabList": [
"全部",
"母婴全阶",
"星妈优选",
"北纬47°",
"功能营养",
"儿童产品"
],
"swiperIconList": [
{
"baseUrl": "brandpage/factory1.png",
"activeUrl": "brandpage/factory2.png",
"text": "工厂游预约"
......@@ -503,7 +571,8 @@
"baseUrl": "brandpage/corn1.png",
"activeUrl": "brandpage/corn2.png",
"text": "北纬47°生态"
}, {
},
{
"baseUrl": "brandpage/cattle1.png",
"activeUrl": "brandpage/cattle2.png",
"text": "13家自有牧场"
......
project_structure.md 0 → 100644
View file @ 37a85782
# 飞鹤星妈会项目框架文档
## 1. 项目概述
本项目是基于uni-app框架开发的飞鹤星妈会微信小程序，主要为母婴用户提供育儿知识、工具服务和社区互动功能。
## 2. 技术栈
- **前端框架**：Vue 2/Vue 3（支持双版本）
- **状态管理**：Pinia
- **UI组件库**：Vant Weapp
- **HTTP请求**：封装的uni.request
- **数据模拟**：Mock数据
- **构建工具**：uni-app CLI
## 3. 项目目录结构
```
├── api/ # API接口定义和请求封装
├── assets/ # 静态资源文件
├── components/ # 自定义组件
├── mock/ # 模拟数据文件
├── pages/ # 小程序页面
├── stores/ # Pinia状态管理
├── utils/ # 工具函数
├── views/ # 主要视图组件
├── wxcomponents/ # 微信小程序原生组件
├── App.vue # 应用入口文件
├── main.js # 应用初始化
├── package.json # 项目依赖
├── pages.json # 页面配置
```
## 4. 核心模块介绍
### 4.1 入口与初始化（main.js）
- 支持Vue 2和Vue 3双版本
- 全局挂载基础URL和数据埋点sensors
- 初始化Pinia状态管理
```javascript
// Vue 3 初始化示例
import { createSSRApp } from "vue";
export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia());
app.config.globalProperties.$baseUrl = BASE_URL;
app.config.globalProperties.$sensors = md.sensors;
return { app, Pinia };
}
```
### 4.2 页面配置（pages.json）
- 定义所有小程序页面路径和样式配置
- 配置导航栏标题、背景色等
- 自定义页面导航样式
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom"
}
}
// ...更多页面配置
]
}
```
### 4.3 网络请求（api/request.js）
- 统一的HTTP请求封装
- 支持GET、POST等请求方法
- 请求头统一处理，携带用户凭证
- 响应拦截与错误处理
```javascript
const request = (options = {}) => {
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + options.url || "",
method: options.type || "GET",
data: options.data || {},
header: {
...options.header,
cuk: cuk.value || undefined
},
}).then((data) => {
// 响应处理逻辑
}).catch((error) => {
// 错误处理逻辑
});
});
};
```
### 4.4 状态管理（stores/）
使用Pinia进行状态管理，主要包括：
- **user.js**：用户信息、宝宝信息管理
- **global.js**：全局配置和状态
- **home.js**：首页相关状态
- **pageCfg.js**：页面配置状态
```javascript
// user.js示例
export const useUserStore = defineStore("userInfo", {
state: () => {
return {
userInfo: null,
babyInfo: null,
memberInfo: null,
// ...其他状态
};
},
actions: {
// 用户信息更新等方法
}
});
```
### 4.5 工具函数（utils/）
提供常用工具函数，包括：
- **跳转方法**：支持内部页面、其他小程序和H5跳转
- **日期格式化**：格式化时间戳为日期字符串
- **防连点函数**：防止用户快速重复点击
```javascript
// 通用跳转方法示例
export function jump({ type, url, extra = {} }) {
switch (type) {
case JumpType.INNER: // 内部页面跳转
uni.navigateTo({ url, ...extra });
break;
case JumpType.MINI: // 其他小程序跳转
// 小程序跳转逻辑
break;
case JumpType.H5: // H5页面跳转
// H5跳转逻辑
break;
}
}
```
## 5. 主要业务功能
### 5.1 首页（views/Home.vue）
- 轮播图展示
- 工具推荐
- 专家团展示
- 内容推荐
- 搜索入口
### 5.2 用户系统
- 微信登录授权
- 手机号绑定
- 用户信息管理
- 宝宝信息管理（支持多宝宝切换）
### 5.3 育儿工具
- 喂养记录（feedingIndex）
- 产检提醒（postnatalCheckUp）
- 宝宝生长测评（shengzhangTools）
- 星妈起名（naming）
- 星妈会Lab（内容创作与分享）
### 5.4 内容模块
- 内容库（library）
- 搜索功能（search）
- 详情页（多种类型）
## 6. 组件系统
### 6.1 自定义组件（components/）
- **CustomLoading.vue**：自定义加载组件，支持文字逐字显示
- **DatePicker.vue**：日期选择器
- **TabBar.vue**：标签栏
- **Layer.vue**：弹窗组件
### 6.2 Vant组件库（wxcomponents/vant/）
项目集成了Vant Weapp组件库，主要使用：
- Tab/Tabs：标签页组件
- Sticky：粘性布局
- Info：信息提示
## 7. Mock数据（mock/）
- 提供模拟数据用于开发和测试
- 包含首页、品牌、积分等模块的数据
- 支持快速开发和接口联调前的功能验证
## 8. 数据埋点
项目集成了sensors数据埋点，用于用户行为分析：
- 页面访问统计
- 按钮点击事件
- 功能使用情况
```javascript
md.init(SENSORS_URL);
// 在组件中使用
this.$sensors.track('event_name', { /* 事件属性 */ });
```
## 9. 开发规范
### 9.1 目录命名
- 采用小写字母和下划线组合
- 组件和页面使用大驼峰或连字符命名
### 9.2 API调用规范
- 所有API请求统一通过api目录下的模块调用
- 遵循Promise规范处理异步请求
- 错误处理统一在请求拦截器中处理
### 9.3 状态管理规范
- 组件内状态使用data或ref/reactive
- 全局状态和跨组件共享状态使用Pinia
- 遵循单向数据流原则
## 10. 注意事项
- 项目支持Vue 2和Vue 3，开发时注意版本差异
- 所有页面跳转使用utils中的jump方法，统一管理跳转逻辑
- 网络请求统一使用api/request.js中的封装方法
- 组件开发时注意复用性和性能优化
- 敏感信息（如用户凭证）需要安全存储和传输
## 11. 项目启动与构建
```bash
# 安装依赖
npm install
# 开发调试
npm run dev:mp-weixin
# 构建发布
npm run build:mp-weixin
```
## 12. 常见问题与解决方案
1. **页面跳转失败**：检查pages.json中是否注册页面，检查跳转类型是否正确
2. **数据请求失败**：检查请求参数格式，检查用户是否登录，检查网络连接
3. **组件样式问题**：检查样式覆盖和优先级，注意微信小程序的样式隔离机制
4. **性能优化**：避免不必要的渲染，使用分页加载，合理使用缓存
---
以上是项目的主要框架和结构说明，希望能帮助新成员快速熟悉项目。如有任何疑问，请随时咨询项目负责人或技术骨干。
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment