开篇语

我的以前关于小程序的文章 开篇语已经在热身阶段说过了，所以就不重复了。有兴趣的读者移步 来写点微信小程序吧：D） ～～～（热身阶段） 以及前面借鉴小程序开发官方文档的简易教程写的总纲 来写点微信小程序吧：D） ～～～狂奔阶段 还有分析小程序的目录结构与配置的内容 来写点微信小程序吧：D） ~ ~ ~ 分析小程序目录结构与配置 以及分析小程序的逻辑层的内容： 分析小程序逻辑层内容 分析小程序视图层内容 来写点微信小程序吧：D） ---- 分析小程序视图层内容 分析小程序WXSS 来写点微信小程序吧：D） ---- 分析小程序WXSS 上一张学长的图片镇楼，下面直接上昨晚到现在一天时间的成果。

张小龙学长

正文

一、总体架构

1、文件架构

2、UI构造

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

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

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

（这么优秀的名字当然不是我想出来了。欢迎大家去关注另一个作者）

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

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

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

3、功能展示

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

getLocation()openLocation()

第三个空间是音乐空间，跑步之后来点歌是不是会很舒服呢？我就是这样觉得的。所以目前我精选了一Carly Rae Jepsen的照片，作为音乐界面的首页，然后在下面我仅仅放了一首她的歌，是CallMe Baby

Carly Rae Jepsen - Call Me Baby

API

然后在最上方我放了一个Banner，这个Banner可以有三种图片切换模式，只要你点一下它就会切换（好吧，本来想做成那种自动切换的，但是学艺不精，还没做到），是我自己的一个开心的小玩具。最中间当然是我非常喜欢的Carly_Rae_Jepsen 。当然，我一个人在这瞎弄是比不上人家一个公司的团队在精心钻研好几天，甚至好几个月甚至好几年的所以，功能性方面，请不要强求，能用就行吧，等我后面再开发出音乐列表以及其他的一些功能，到时候说不定我真的可以上线，请大家期待。

整体来说，整个项目的全部结构就差不多是这样的，项目文件，树状图已经在一开始就放出来了。在简书里面，我放上了所有的代码以及图片。但是如果各位嫌复制粘贴麻烦，就请去github下载。链接地址如下。至于具体的码代码的过程，请各位有兴趣的，可以按照我的思路一起来，首先呢，可以看到微信小程序是一种网页性的服务。类似于我们最常见的html5，加css3，加javascript的构造。所以我用以前写网站的时候的一些经验来解析这个代码。我的主要思路：就是首先我们要遍历一下.wxml文件，也就是最常见的超文本标记语言。它会告诉我们的手机浏览器，这个地方要放什么，那个地方放什么？这个地方长什么样，那个地方长什么样？然后具体的这个地方到底是长什么样呢就交给css也就是样式文件来处理。然后，还有Js文件，负责逻辑层的一些事件触发，就比如说我点了这个按钮一下会发生什么呢？这个就要交给javascript来进行解析。具体某一步我做什么这个我就不太多说了。反正我打开这个项目的第一页，我是找到了index.wxml文件。然后依次的看这个地方有个什么组件，这个地方有个什么事件触发，然后再在对应的.js或者是.wxss文件里面找到相关解释，再进行自己的一些理解与修改！就这么简单，读小程序千万别对着js文件去读，会疯的！最好的就是把自己代入用户：我做了这一步，会有什么事情发生？那么，这个事情的发生，在视图层是怎么实现？然后更深层次的逻辑层是怎么触发这些事件的？我们该如何做到这个事情？这么一番理解下来就很顺畅的可以坐到理解项目了。至于更深层次的读代码。我就没有太多的指导了。你要读这个还是要有点基础的， 人心不足蛇吞象一点都不好玩！

3、代码和图片

意外发现，代码实在太多了。现在是北京时间2017/2/2/23:59，我要睡觉了。一个个粘贴实在太麻烦了。我还是一次行的放到: https://github.com/HustWolfzzb/WeChat-Fucking_Running.git 然后诸君有兴趣的自己去下载吧。

姑且把图片放在下面。这个放上来只要一拖就好，简单方便！（v保留了在项目文件中的名字，方便下载~）

ok.jpg

redPoint.png

banner1.png

banner2.png

banner3.png

Carly.png

fuckrun.png

    

        
        Fucking Running
        The First Program of HustWolf and XNC
    

        
            
                
                    {{item.name}}
                
            
        
    

Page({
  data: {
    pageNames: [
      {
        id: 'animation',
        name: '动画',
      }, {
        id: 'run',
        name: '跑步',
      },
      {
        id: 'music',
        name: '音乐',
      },
    ],
},
onShareAppMessage: function () {
    return {
      title: '欢迎使用颜大傻牌多功能APP',
      desc: '将Fucking Running分享到~~~',
      path: '/page/index/index.js'
    }
  },
});

.index{ 
   background-color: #Eeefaf;   
 font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;   
  flex: 1;   
   min-height: 100%;  
     font-size: 32rpx;
}
.header{    
margin-top: 20;    
line-height: 1;
}
.icon{   
 width: 60rpx;   
  height: 60rpx;   
   padding: 30;   
    margin-top: 20;  
      margin-bottom:20; 
}
.pic{    
width: 800rpx;    
height: 650rpx;  
  padding: 30;    
  margin-top: 20;    
  margin-bottom:100; 
}
.bigTitle{   
 font-size: 60rpx;    
 padding-left:  150rpx;    
 color: #556B2F;   
  position: center;
}
.title{  
  font-size: 60rpx;
}
.desc{   
 margin-top: 15rpx;   
 color: #8B1A1A;   
  font-size: 30rpx;    
  padding-left:  90rpx;
}
.body{    
padding-left: 30rpx;    
padding-right: 30rpx;    
overflow: hidden;
}
.navigator-hover {   
 color:cornsilk;    
 background-color: #8B1A1A;   
  padding-left: 250rpx;
}
.widget{    
position: relative;   
 padding-top: 26rpx;   
  padding-bottom: 26rpx;  
    padding-left: 40rpx;   
     padding-right: 40rpx;
}
.widgets__item{ 
   margin-top: 30rpx;   
    margin-bottom: 20rpx;    
    background-color: black;    
    overflow: hidden;    
    border-radius: 4rpx;   
     cursor: pointer;   
      padding-left: 100;
}

结束语

小程序算是假期的一个调剂吧，不然可能就真的天天看小说，然后逛逛B站了。然后，我觉得我有必要show一下我的工作环境，最近都有点不想走人家，天天在家写代码了~~~~不过明天估计还是要出去走走的。一个很尊敬的姑奶奶一直叫我去她家里坐坐，吃顿饭。不去就真的感觉特别对不住老人家，以前都说年后去，结果很多次都是匆匆忙忙去学校。希望各位也珍惜眼前人，老人应该是对你最没有想法的人，但是往往也是关心你的想法最不含杂质的人。他们已经老了，再多的物欲横流都对他们影响甚小，趁着这些可爱的老人家还在世，多多去看望才是我们应该做的！

大神的作品就不安利了。我自己写完的这些，我觉得应该比之前说的一些膜拜的作品要优秀了。明天继续改进，希望大家会喜欢！

个人宣言

知识传递力量，技术无国界，文化改变生活！