开篇语好不容易终于把所有的基础课程全部看完了！昨天我很高兴地开始了看别人做的项目进行深度的学习。其实也说不上是项目吧网站站内我很高兴地开始了看别人做的项目进行深度的学习。其实也说不上是项目吧更多的像是一种给新手看的示例代码。然后我在这些代码上面进行我自己的改进。最后也 ...
正文
一、总体架构
1、文件架构
项目文件构架
2、UI构造
UI设计好吧是挺丑的。但是没办法。我没那么多的艺术细胞
整体的架构包括四个方面：首先我们打开小程序的话会进入 初始界面 也就是index文件所定义的主页面。 在其中有三个主要的功能按钮。分别是 动画按钮、跑步按钮、音乐按钮。
三个主要功能按钮
在最左上角的是我最喜欢的一个图标用来作为替代商标。
天哪金木研吃掉利世之后是真的帅到爆炸啊！！~~另外我是直的
然后下面是我们开发项目的名字F**king Running（这么优秀的名字当然不是我想出来了。欢迎大家去关注另一个作者）。下面有一行小字是署名开发者。
作品名字和开发者
最下面一张图是我随便放的当然如果要是真正的商业产品是可以用来做广告的。（这个广告是不是太大了？恩。主要是我暂时还没想到加什么所以先放一张图片吧）。
跑步的主题嘛~~~
页面的最下角有一个首页以及一个日志的按钮。首页是指直接回到首页日志的话是查询我们进行了操作的时间。这两个基本上没什么用处。但是官网给的简易文档里面也有这个所以我觉得加上会比较好显得我做的工作多嘛！^_^
下面两个鸡肋但是还蛮好看的模块
鸡肋的效果顺手引出来下一个模块
右上角的这三个点的按钮想必大家都非常常见因为微信里面始终都有这么三个点的分享按钮。一般来说点击这个就会有很多的复制链接的行为比如说分享给别人比如说复制链接比如说在某个浏览器里面打开都是在这个里面。目前我只加了一个分享的按钮至于其他的嗯暂时没什么用处也就没加了。
分享按钮
3、功能展示当我们点击这个莫名其妙的动画按钮会出现一个蓝色的方块儿这是让我们来进行操作的演示题。在下面有九个按钮分别是旋转、缩放、移动、倾斜上面所说的四种分别是单个操作。然后接下来有先旋转再缩放有旋转和缩放一起进行然后还有所有的操作一起进行以及所有的操作一个一个的轮流进行最后还有一个Reset--恢复按钮也就是回归到我们最初时的状态在下面我还给出了一些提示欢迎大家阅览。好的第一个按钮我们说到这里。
莫名其妙的动画组件
那么当我们打开第二个跑步按钮小程序会自动的读取我们当前的位置然后在地图上表示出来在第二个跑步页面中有三个按钮分别是打开位置以及开始跑步和暂停跑步有两个计数器一个是里程数也就是我们跑步的距离然后还有一个是时间即我们跑步所用的时间。在这三个按钮下面的是一个腾讯官方提供的地图我们可以在地图上面标注我们当前所在的位置以及让图标跟我们一起移动。静态的getLocation()我已经弄明白了但是对于跑步过程中如何实时地更新自己的位置以及计算距离openLocation()这个我还有一点点不明白。只能说项目文档的封装有点厉害也可以说是我修炼不到家。