258资源分享网

开篇语

好不容易，终于把所有的基础课程全部看完了！昨天，我很高兴地开始了看别人做的项目进行深度的学习。其实也说不上是项目吧，更多的像是一种给新手看的示例代码。然后我在这些代码上面进行我自己的改进。最后也就有了接下来我会给大家带来的这篇文章中的项目。这个项目是完整的，它包括了一个原本的示例代码中带着的莫名其妙的动画组件（可能是为了更多额展示微信小程序的控件体系）以及跑步的组件，还有我后来自己加上去的一个音乐播放组件。总共也就有了三个的功能：动画效果展示；跑步的定时以及定位功能；音乐播放功能。 我相信本文能够很大程度上帮助想要进行开发但是苦于无门和资源所限的朋友领略小程序开发的魅力，非常完整地领略小程序的开发过程。当然，其中还存在一些bug需要去调，但是因为某种不可描述的原因，我没时间了。待会儿我不能继续进行开发了，所以我现在就把它写出来。仓促之处敬请见谅！ 

一、总体架构

项目文件构架

UI设计，好吧，是挺丑的。但是，没办法。我没那么多的艺术细胞

整体的架构包括四个方面：首先我们打开小程序的话，会进入** 初始界面 ，也就是index文件所定义的主页面。 在其中有三个主要的功能按钮。分别是 动画按钮、跑步按钮、音乐按钮**。

三个主要功能按钮

在最左上角的是我最喜欢的一个图标用来作为替代商标。

天哪，金木研吃掉利世之后是真的帅到爆炸啊！！~~另外，我是直的

然后下面是我们开发项目的名字，F*king Running*（这么优秀的名字当然不是我想出来了。欢迎大家去关注另一个作者）。下面有一行小字，是署名开发者。

作品名字和开发者

最下面一张图是我随便放的，当然如果要是真正的商业产品是可以用来做广告的。（这个广告是不是太大了？恩。主要是我暂时还没想到加什么，所以先放一张图片吧）。

跑步的主题嘛~~~

页面的最下角有一个首页以及一个日志的按钮。首页是指直接回到首页，日志的话是查询我们进行了操作的时间。这两个基本上没什么用处。但是官网给的简易文档里面也有这个，所以我觉得加上会比较好，显得我做的工作多嘛！_

下面两个鸡肋但是还蛮好看的模块

鸡肋的效果，顺手引出来下一个模块