# 超超

**Repository Path**: maro2333333333/chaochao

## Basic Information

- **Project Name**: 超超
- **Description**: final
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-08
- **Last Updated**: 2025-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 青松

## 一 文档综述：

#### 1.1版本修订记录：

#### 1.2 输出环境（小程序）

## 二 产品概述：

### 2.1 产品介绍：
- 青松呼吸是一个对于新手用户友好的短时间冥想小程序，打造一个低门槛，高效率，界面清新，鼓励用户从短时间冥想入门到养成冥想习惯的小程序。帮助高压环境下的人们能够及时的放松，跟随着呼吸平静下来。

### 2.2产品定位：
- 随着现在的快节奏生活，焦虑和抑郁成为了普遍存在的情绪，但人们对“冥想”放松的认知并不多，如此有效的放松方法需要长期的练习，便出现了青松小程序，提供一个低的门槛让用户慢慢适应用呼吸平静，缓解焦虑。

### 2.3产品特点：
1.习惯门槛相对较低   
2.冥想时间适应不同的用户需求，通过声音的引导帮助用户释放压力，从而获得理 想的冥想效果。   
3.页面简洁，功能点少，用户能快速根据自己的需求找到功能点。   
4.通过种植树苗和打卡达到鼓励机制，增加用户粘性。， 

## 三 产品背景及使用场景：
### 产品背景：
#### 1.焦虑现状：在现代社会，接近百分之五十的年轻人会时常感到焦虑，但是他们却不知道用什么方法解决。
这时，冥想的普及率可能还不到百分之二十。那么如何在如此快节奏的生活中有效且快速的缓解焦虑呢？  
我们想到开发一款更有趣的更适合入门的轻量化程序（微信小程序）来帮助更多的人了解，接触冥想，放松自己，养成好的习惯  
#### 2.目前研究：
- 成都理工大学法学院的一项面统计结果：结果显示，仅有47.3%的学生没有焦虑状况，说明我国大学生焦虑水平较高
- 根据论文《正念训练对大学生情绪状态调节》的实验结果来看，实验组和对照组差异明显，冥想对个体的抑郁情绪体验能起到改善作用。可以给缓解压力，改善抑郁状态。
- 《冥想使人平和----人们对正负情绪图片的情绪反应可因冥想训练而降低》的实验的结果表示， 短时间冥想可能更具有即时效应
#### 3.知网08年到2020年关于“焦虑”的论文逐年上升，可见学者对于焦虑的研究热度是很高的


### 目标用户： 
1.平时容易产生焦虑感/长时间处于高强度环境下的群体。   
3.希望了解冥想的人群。   
4.容易紧张的人群。    
2.想养成一个新型习惯的用户   

### 使用场景： 
1.写作业前，无法专心，焦虑严重 ，可以选择5分钟冥想  
2.临近演讲，十分紧张，由于紧张导致焦虑，需要深呼吸，但过于紧张无法自行深呼吸，可以选择3分钟冥想
3 起床感到情绪低落，抑郁，疲惫，需要调整状态，开启新的一天，可以选择7分钟冥想  
4 午间休息，但由于事情繁杂无法有时间午睡，心情低落，疲惫，可以选择10分钟冥想  
5 失眠 烦躁，焦虑，心情低落，睡之前想很多东西。需要寻找平静，可以选择15分钟冥想  
6 希望自己能够养成打卡习惯 希望自己能够坚持一件事情，保持良好生活习惯，可以到“我的”中用“日历”显示“我”的打卡记录，从而养成打卡的习惯。  


### 三，产品结构：
#### 3.1产品结构图：
![輸入圖片說明](https://images.gitee.com/uploads/images/2021/0708/174903_84baee98_5011923.jpeg "17936393107810804.jpg")
#### 3.2功能结构图：
![輸入圖片說明](https://images.gitee.com/uploads/images/2021/0708/174923_d9ce0b09_5011923.jpeg "175356152076387985.jpg")
#### 3.3信息结构图：
![輸入圖片說明](https://images.gitee.com/uploads/images/2021/0708/175022_bdaf7917_5011923.jpeg "261376114516943687.jpg")

### 四，产品页面交互：
![页面交互](https://images.gitee.com/uploads/images/2021/0708/181028_42ecf018_5011923.png "页面交互.png")
### 五 产品页面展示：

#### 产品logo和控件展示：
![LOGO](https://images.gitee.com/uploads/images/2021/0708/181137_e7befae1_5011923.png "logo设计.png")
![控件](https://images.gitee.com/uploads/images/2021/0708/181440_7b9a1584_5011923.png "图标2.png")
#### 产品用色规范：
![用色](https://images.gitee.com/uploads/images/2021/0708/181457_d5bef224_5011923.png "用色规范.png")
#### 产品界面：
![界面1](https://images.gitee.com/uploads/images/2021/0708/181650_6e044024_5011923.png "界面.png")
![輸入圖片說明](https://images.gitee.com/uploads/images/2021/0708/181830_e7edb82c_5011923.png "界面1.png")
![輸入圖片說明](https://images.gitee.com/uploads/images/2021/0708/181844_15306d5f_5011923.png "界面2.png")
![輸入圖片說明](https://images.gitee.com/uploads/images/2021/0708/181900_bac559f0_5011923.png "界面3.png")
![輸入圖片說明](https://images.gitee.com/uploads/images/2021/0708/181914_97c6c223_5011923.png "界面4.png")

#### 交互界面：
![交互说明](https://images.gitee.com/uploads/images/2021/0708/185826_1cd57a85_5011923.jpeg "说明.jpg")

### 六 问题解决方案：

#### 1.小程序项目名称为青松，主要的文件结构如下图：
 ![解决问题](https://images.gitee.com/uploads/images/2021/0708/182214_c76fe33c_5011923.png "解决问题.png")
在小程序中，我们最主要的功能就是听完音乐从而获得一颗树种种树，因此小程序有两大模块，一个是音乐模块，一个是种树模块。
我们把音乐模块插入到首页（index）中，并通过wx.createInnerAudioContext()创建了一个可以播放音乐的对象，并构造了两个函数 audioPlay（）和audioPause（）来控制音乐的播放和停止。同时设置了一个参数id，在音频播放完毕后，点击树种的图片，通过relanch（）的方法中request请求，将参数id传递到myself（我的）页面，通过以下代码接收：
var number = options.id
    this.setData({
      id:number
    })
以此更改，今日种树的棵树数量{{id}}的值，在后续的开发中我们将会单独的增加的一个音乐播放的页面，并通过component构造器自定义音乐播放按钮的组件以及能显示播放进度的进度条

#### 2.在种树的模块中，我们会有不同的树种进行选择，为此我们构造了一个可以触摸滚动的图片盒子，设定了swiper容器的宽度，手指移动量，控制量和跳转图片的索引，如以下代码：
// swiper 容器宽度
    swiperContainWidth: 10000,
    // 手指移动时的偏移量
    swiperTranX: 0,
    // 轮播动画控制变量
    swiperAnimationData:{} ,
    // 跳转到的图片索引 swiperIndex
然后通过通过算法计偏移量，并记录手指的坐标
  this._x_end = e.changedTouches[0].pageX
  this._x_realOffset = this._x_end - this._x_start
然后判断滑动的距离是否超过指定值，超过则轮播下一张
var canExchangeImgFromOffset = Math.abs(this._x_realOffset) >= 50 ? true : false



### 最后 学习/实践心得总结及感谢

#### 组员1 张珈慧
- 总体来讲，这个项目在实行上面遇到了非常多的困难，效果也没有达到最初的预期，但是大三了同时在进行四个期末项目，心有余而力不足，本身对于代码也没有和其他人一样的敏感度，因此整个课程下来都很，痛苦，迷茫，很累。我不排斥学习它，我也觉得学习的过程并不痛苦，但痛苦的是自己的基础并不扎实，还有对开发架构的逻辑理解不太透透彻，导致了即使是非常“简单”的页面，我也会打错。我很享受设计页面的过程，但是实现它对于我来讲很难。
但是很感谢老师的重复，感谢老师不会去嘲笑我的不足，耐心的重复同一个知识点，而我也在期末非常非常努力的赶上进度，对于我来讲，成功写出的任何一个界面都有非常大的成就感。
人各有所长，尽力而为，无愧于心就好。

#### 组员2 麦苗
- 总得来说，学的挺艰难的吧，不过收获也蛮大的，虽然没有使用云开发，建立一个本地的缓存文件，不过学习到了很多的其他的代码的用法，比如怎么使用canvas去做绘图，component构造器自定义组件，虽然没有完全的做好，打算在之后的版本里慢慢补完，也复习了一些之前基础的知识点，比如说页面间的传参等。

#### 组员3 刘祈
在这节互动系统设计的课程中学到挺多有用的东西，特别是对于我们数字媒体技术专业的学生，对本不熟悉的后端代码有了更深一层的认识，比如参数在各个页面的传递，云数据库的调用，还有很多函数方法以及如何调用都是之前我们的移动端相关课程中没有涉及或是涉及到没有掌握的，在许老师这门课程中都有了进一步的认识，虽然说在上课的阶段多少会有些觉得老师讲的太快或者是有些听不懂的地方，但是坚持下来以后发现其实这些东西也不是那么的不容易入门，总之就是干货满满就对了，以后不知道会不会从事小程序或者有关后端代码的工作，但是学的多总是比较好一点的，遇到相关方面的问题也不至于一头雾水，最后感谢许志超老师耐心讲课，就是希望能再讲慢一些就好了，如果以后还能上你的课的话，以上！