# fitness

**Repository Path**: coder_fox/fitness

## Basic Information

- **Project Name**: fitness
- **Description**: Fitness Master 微信小程序，健身类小程序，营养查询类小程序。小程序原生框架+云CMS进行开发，抛弃了前后端开发尝试使用新的云开发进行后端数据处理。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2022-11-04
- **Last Updated**: 2024-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, 小程序, 云开发, 健身, 营养查询

## README

### fitness



 **使用前请帮忙star一下**



#### 介绍

**Fitness Master 微信小程序，健身类小程序，营养查询类小程序。小程序原生框架+云CMS进行开发，抛弃了前后端开发尝试使用新的云开发进行后端数据处理。**

> 没有依赖任何UI框架，全新的UI设计，玻璃效果，flex布局，自定义tabbar，自定义navbar，使用scss进行开发。

> 能够复用的组件都进行了封装，API封装，全面切规范的小程序原生开发，对于刚入门又想快速上手的小白开发者而言最为合适不过。



#### 技术栈

**小程序原生框架 + 云开发+CMS内容管理系统**

使用云开发官方提供的CMS进行内容的增删改查。对于中小型项目而言个人觉得不必使用额外的精力开发后台管理系统，使用CMS内容管理系统足以。



#### 项目展示图

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142055809.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142214417.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142249339.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142337889.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142419450.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142445242.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142506982.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142528806.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142546931.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142611031.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142634053.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142649980.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142705301.png)



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113142721976.png)



#### 功能说明

> 已实现的功能：

- [x] 首页文章展示
- [x] 自定义导航栏（首页，其他页面）
- [x] 文章，食物搜索功能（尝试使用一个页面完成两种内容的搜索）
- [x] 文章浏览功能
- [x] 统计文章访问量（云函数）
- [x] 食物分类展示
- [x] 食物浏览功能
- [x] 食物数据对比功能
- [x] 文章，食物收藏功能（云函数）
- [x] 用户微信授权登录
- [x] 编辑个人信息
- [x] BMI计算

> 后续要新增的功能：

- [ ] 用Mobx库状态管理
- [ ] 每日摄入营养记录
- [ ] 每日摄入营养计算
- [ ] 主题切换（暗黑，明亮）
- [ ] 重新设计首页UI
- [ ] 打卡



#### 项目初始化

**git克隆项目**

```bash
https://gitee.com/coder_fox/fitness.git
```

> 没用过git，直接下载zip，解压即可



**npm安装依赖**

```bash
# 注意package.json文件在miniprogram目录下
cd fitness/miniprogram
npm install
```



**微信开发者工具打开项目**

![image-20221113113253224.png (1198×884) (gitee.com)](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113113253224.png)



**选择云函数环境**

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/Snipaste_2022-11-13_11-31-40.png)



**微信开发者工具构建npm**

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113113508352.png)



**初始化CMS内容管理系统**

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113113630805.png)



**导入模型**

> 云开发CMS初始化完毕后创建新项目，进入新项目后，导入CMS目录下的json文件

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113113752708.png)



#### 创建数据集合（数据表）

|  数据集名称  |           数据权限           |
| :----------: | :--------------------------: |
| open-article | 所有用户可读，仅创建者可读写 |
|  open-food   | 所有用户可读，仅创建者可读写 |
| open-collect | 所有用户可读，仅创建者可读写 |
|  open-users  |        仅创建者可读写        |



说明：为了能节省云开发所使用的流量，大部分数据集合都是不用云函数的情况下都能请求数据，才数据权限设置所有用户可读，仅创建者可读写，只有对数据进行增删改操作时用云函数，其他情况下把数据集合的权限放开，不用云函数也能访问数据。



**修改云环境环境ID**

utils/config.js配置文件中，修改env属性，改成自己的云环境ID。

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113115813190.png)



#### 初始化插件

此项目文章部分采用富文本，而小程序本身不会渲染html，md格式的内容，因此使用 **html2wxml** 插件进行文章内容的渲染。

1，添加插件

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113120142608.png)

2，搜索 `html2wxml` ，选中并添加

![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113120207163.png)

3，添加成功



![](https://gitee.com/coder_fox/fitness/raw/master/README.assets/image-20221113120314832.png)



**项目任何问题欢迎提issues**