微信小程序教程入门篇 （3）：高仿一个漂亮的手机界面-极其详细-

迟到的教程，本来应该是上周出这篇教程的，可是上周忙的不可开交，没有抽出时间来写，今天补上。
上两篇的基础教程，讲了小程序如何快速开发，稍微说了一点原理的东西，学习了上两篇的教程，写一个简单的小程序是没有问题啦！如果没有看过前两篇的，点这里去看哦《微信小程序教程入门篇 （1）：10分钟从0开始写一个hello world，极其详细》《微信小程序教程入门篇 （2）：给hello world一点颜色瞧瞧-最后有彩蛋-极其详细》，今天承接上两篇的教程，手把手，一个字母一个字母的教大家高仿一个漂亮的手机页面。高保真！！！
话不多说，先把今天要高仿的页面呈上来，给大家过目一下：
图1：

1.png
是不是很漂亮，今天要实现的就是这个页面所有的你能看到的特效，素材包已经给大家打包好了，下载链接在最下面，需要的直接去页面最底部下载吧！！
好的，开门见山，正式开始：
小程序仿页面跟css其实很像。第一步我们先分析一下这个页面，从上到下一部分一部分的开始，我这里有自己的一套方法论，大家可以一起探讨一下。
这个页面由5部分组成，最上面是标题部分，包括中间的“牛人讲堂”的logo和最右边的播放效果小图标。其次是一个分类tab，可以互相切换，并且切换后，显示红色底边。接下来是banner图部分，这个banner图可以自动切换，也可以手动切换。再然后下面类似一个导航，可以左右滑动，导航带有图标和文字。最后是首页的主页内容，包括两种形式，一种是只有一种课程的详细信息介绍，另一种是一个课程列表，包括3个课程的图片，文字。分析完了如下图：
图2：
2.png
分析完了，现在开始动手做，别着急，从上到下，一点点来哦！
先给大家介绍一下，我们会用到的一个控件 view（这里有详细的介绍，猛戳：http://doc.pietian.com/?id=111）。
view是一个容器，作用类似html中的div，说的再通俗一点就是一个大的收纳盒子，比如你有一副手套和一条围巾，如果这些放在桌子上比较凌乱，那么你需要一个收纳盒将他们收纳起来。这个view就相当于收纳盒，它的作用就是规整，让页面看起来规矩不凌乱，页面结构能够一目了然。
我们可以给view设置class和id属性，通过这两个属性设置wxss样式。不过，从习惯和专业性上来说，我们大多数时候选择用class来给view以及其他的元素来设置wxss样式，这是个很好的习惯和写法，这么做显得很专业。
话不多说，开始编码。先写一个view，做为头部部分，view里面放logo和右侧的播放小图标，代码如下：
<view class="header"></view>
写完以上代码以后，我们看到，展示面板没有任何内容显示。
图3：
3.png
这是因为view是一个视图容器，它本身并没有实际的意义，它不像input,image等组件一样具有实际的意义，view只是用来使页面规整，浏览更人性化。我们需要显示什么东西，直接在view里面添加即可。logo部分是一张图片，所以我们只需要在显示logo的view中添加一个image组件。代码如下：
<image class="logo" src=""></image>
image组件的使用功能挺多的，今天只说下要使用的src属性，其他的等我写到image教程的时候再详细讲解，或者非常饥渴的小基友可以去这里快速学习：http://doc.pietian.com/?id=112
src中设置的是图片的路径，这里可以是远程的网上路径，也就是网上图片的图片地址也可以是本地的图片的相对目录。
先来说下本地的相对目录：
我们建一个和pages文件夹同级的兄弟文件夹，命名为resource。resource翻译过来是资源的意思，也就说这里面放一些我们开发所用到的资源。resource里新建一个images文件夹，里面放我们用到的图片资源。然后，把需要的logo图片拷贝到images里面，没有的也不要紧，文章最下面有资源包下载链接，可以拿来直接用。resource可以建在任何地方，但是一个好的习惯是把resource文件夹放在最外面，因为这个文件夹的资源是共用的。当然，你也可以不命名为resource，其他的名字也可以，但是尽量要符合实际开发的意义，能让人看一眼就晓得这个文件夹的实际意义，这也是一个好的开发习惯。弄好以后，我们再来看下本地的小程序的文件结构，
图4：
4.png
可以看到，我们正在编写的wxml代码是在pages/index/index.html目录下，所以我们再这个页面的src的路径要填写相对于pages/index目录的logo图片路径。而logo图片的路径是resource/images/nrjt_logo.png，所以我们如果要在index.html访问这个图片，我们的相对目录就是../../resource/images/nrjt_logo.png
所以在src中填写 ../../resource/images/nrjt_logo.png，完整代码奉上：

<view class="header">
    <image class="logo" src="../../resource/images/nrjt_logo.png"></image>
</view>

到此，不管你有没有懵逼，你的图片都显示出来了。
图5：

5.png
有的同学可能不明白“../”是什么意思，简单的说一下：
开发中“../”的意思是上一层目录，比如说本例中的index.html所在的目录是“/pages/index/”，那么一个“../”就表示“pages/”目录下，“../../”就表示“/”目录下，也就是和pages同级的目录，同时呢，resource和pages是在同一个目录下，所以这样就能访问到“resource/images/nrjt_logo.png”的logo图片了。
再来说下网络图片，用瞥天网 的logo图片地址举例：http://www.pietian.com/css/default/logo.png，我们把src填写为“http://www.pietian.com/css/default/logo.png”，代码如下：

<view class="header">    
        <image class="logo" src="http://www.pietian.com/css/default/logo.png"></image>
</view>

看下效果：
图6：

6.png
我们依然可以看到有图片显示出来，所以在使用微信开发工具的时候本地图片和网络图片都可以使用。但是，因为我没有体验过真实的上线的小程序，也没法测试，我不确定网络网片是否在微信小程序正式上线以后也可以使用，所以这里暂且打个问号，但是本地的相对目录是绝对没有问题的。为了保险起见，这里大家都使用本地图片，等小程序正式开放以后，我在做一次测试，看到底行不行。
我们还是换回本地的牛人讲堂的logo图片。可以看到，logo的图片的宽度是全屏的宽度，高度也不符合要求。所以我们要调整图片的大小等样式来符合我们的要求，这就需要用到wxss了，wxss的作用就是调整组件的样式，让wxml中的组件更精美。
不说废话了，进入正文：
微信为了满足移动开发的需要，增加了微信小程序独有的一个计量单位：rpx。再iphone6中2rpx=1px，大家知道这些就足够了，今天rpx不展开讲了，今天也不想用这个，因为点太多了，担心会混淆，以后我会专门开一篇文章来讲rpx，今天还是用最传统，最普遍的px做为计量单位。如果想要迫切了解rpx的童鞋，可以直接去看文档http://doc.pietian.com/?id=173
首先，我们需要测量源图的各个组件的长宽，颜色和边距等参数。这里我给大家推荐一个工具，叫faststone。这个工具很方便，是前端工作和仿站的神器，非常推荐大家使用，我共享了这个工具，有需要的可以下载（解压密码是www.pietian.com）：http://pan.baidu.com/s/1o8NL1CA。经过测量，我们得到以下数据：
class为header的组件，也就是<view class="header"></view>的参数如下：
背景颜色为#F3F3F3，高度为45px，下边框为粗细1px，实线，边框颜色为E2E2E2
class为logo的组件，也就是<image class="logo" ></image>的参数如下：
宽度为78px，高度为20px，距离父元素view的上边距为10px、左边距为140px
如图7：
7.png
知道了这些参数以后，就可以上手编写wxss的代码了，我先贴上代码：

.header{    
    background-color:#F3F3F3;    
    height: 45px;    
    border-bottom:1px solid #E2E2E2;
}
.logo{    
    width:78px;
    height:20px;
    margin:10px 0 0 140px;
}

解释下代码：background-color表示组件的背景颜色；height表示高度；border-bottom表示下边框，从左到右依次表示边框粗细、实线（solid）/虚线（dashed）、边框颜色；width表示组件的宽度；margin表示距离父元素的上右下左的距离，从左到右依次为上边距、右边距、下边距、左边距，按照顺时针排列，这样容易记住。这只是我们本篇教程所用的几个配置样式，其实还有很多的配置样式，如果你想了解更多，你可以去看看我写的第二篇教程，里面有你想要的答案：《微信小程序教程入门篇 （2）：给hello world一点颜色瞧瞧-最后有彩蛋-极其详细》。
如果以上你不是很懂，可以去百度学下css或者直接把以上代码复制粘贴到index.wxss中即可，显示的效果如下：
图8

8.png
是不是好看多了，完全符合了我们的要求，跟我们的要仿的图一模一样。
header中最右边还有一个播放的小图片，把他加入到我们的头部部分只需要在logo后边添加一个image组件即可，class设置play_icon，src设置为“../../resource/images/playicon_1.gif”。代码如下：

<view class="header">
    <image class="logo" src="../../resource/images/nrjt_logo.png"></image>
    <image class="play_icon" src="../../resource/images/playicon_1.gif"></image>
</view>

保存以后，看下效果如下：
图9

9.png

很难看，因为我们还没有写样式。按照刚刚的步骤，我们先测量宽高，边距等参数。测量结果如下：
宽高都是45px，浮动是右浮动
知道参数，直接写wxss代码如下：

.play_icon{
    width:45px;
    height: 45px;
    float: right;
}

写完，看下效果
图10

10.png

是不是很像，到此为止我们就高仿完了头部部分，下一篇带大家高仿tab栏部分，并且实现tab的切换。
以下是本次教程的全部代码：
index.wxml:

<view class="header">
    <image class="logo" src="../../resource/images/nrjt_logo.png"></image>
    <image class="play_icon" src="../../resource/images/playicon_1.gif"></image>
</view>

index.wxss:

.header{
    background-color:#F3F3F3;
    height: 45px;
    border-bottom:1px solid #E2E2E2;
}
.logo{
    width:78px;
    height:20px;
    margin:10px 0 0 140px;
}
.play_icon{
    width:45px;
    height: 45px;
    float: right;
}

直接复制粘贴到相应文件就可以用。
资源包下载地址：http://pan.baidu.com/s/1c2p9PTY
faststone下载地址：http://pan.baidu.com/s/1o8NL1CA
解压密码都是：www.pietian.com

后续的教程我会更新到我的个人公众号上，公众号上我也会录制视频课、直播课以及组织问答群。微信搜索“pietian或者扫描下方二维码：”

严正声明：
联系原文作者可登陆www.pietian.com与作者交流。
原文链接：http://www.pietian.com/article/27.html
未经作者同意，谢绝及禁止任何形式转载，作者保留所有法律权限。