258资源分享网

开篇语好不容易，终于把所有的基础课程全部看完了！昨天，我很高兴地开始了看别人做的项目进行深度的学习。其实也说不上是项目吧，更多的像是一种给新手看的示例代码。然后我在这些代码上面进行我自己的改进。最后也 ...

正文

一、总体架构

项目文件构架

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

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

三个主要功能按钮

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

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

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

作品名字和开发者

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

跑步的主题嘛~~~

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

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

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

右上角的这三个点的按钮，想必大家都非常常见，因为微信里面始终都有这么三个点的分享按钮。一般来说点击这个就会有很多的复制链接的行为，比如说分享给别人，比如说复制链接，比如说在某个浏览器里面打开，都是在这个里面。目前我只加了一个分享的按钮，至于其他的，嗯，暂时没什么用处也就没加了。

分享按钮

当我们点击这个莫名其妙的动画按钮，会出现一个蓝色的方块儿，这是让我们来进行操作的演示题。在下面有九个按钮，分别是旋转、缩放、移动、倾斜，上面所说的四种，分别是单个操作。然后接下来有，先旋转再缩放，有旋转和缩放一起进行，然后还有所有的操作一起进行，以及所有的操作一个一个的轮流进行，最后还有一个Reset--恢复按钮，也就是回归到我们最初时的状态，在下面我还给出了一些提示，欢迎大家阅览。好的，第一个按钮我们说到这里。

莫名其妙的动画组件

那么当我们打开第二个跑步按钮，小程序会自动的，读取我们当前的位置，然后在地图上表示出来，在第二个跑步页面中有三个按钮分别是打开位置，以及开始跑步和暂停跑步，有两个计数器，一个是里程数，也就是我们跑步的距离，然后还有一个是时间，即我们跑步所用的时间。在这三个按钮下面的是一个腾讯官方提供的地图，我们可以在地图上面标注我们当前所在的位置，以及让图标跟我们一起移动。静态的getLocation()我已经弄明白了，但是对于跑步过程中如何实时地更新自己的位置以及计算距离openLocation()，这个我还有一点点不明白。只能说项目文档的封装有点厉害，也可以说是我修炼不到家。