迟来的教程：手把手教你高仿漂亮手机页面

这是一个迟来的教程，本来应该上周就发布这个教程的，但是上周太忙，没时间写，今天就补上，教大家如何一字一句制作出精美的移动端页面。高保真。

废话不多说，先把今天要模仿的页面贴出来给大家看一下：

是不是很漂亮呢？今天我们要实现的就是这个页面中大家能看到的所有特效，素材包已经帮大家打包好了，下载链接在最下面，有需要的可以直接去页面底部下载。

01

好了，我们进入正题，正式开始：

小程序仿页面其实跟CSS很像，靠前步就是分析这个页面，从上到下，我这里有自己的一套方**，大家可以一起讨论。

该页面由5部分组成，最上面部分为标题部分，包括中间的“才艺数”标识和最右边的播放效果小图标。第二部分为类别标签，可相互切换，切换后显示红色底边框。

接下来是图片部分，可以自动或者手动切换。然后下面是导航，可以左右滑动，有图标和文字。最后是首页内容，包括两种形式，一种是只有一门课程的详细介绍，一种是课程列表，包括3门课程的图片和文字。分析之后，如下图所示：

分析完了，现在开始动手吧。不要着急，从上到下，一步一步来。

02

首先跟大家介绍一下我们将要用到的一个控制视图（这里有详细的介绍：）。

View 是一个容器，类似 HTML 中的 p。说得更简单一点，就是一个大收纳盒。比如你有一副手套，一条围巾，如果放在桌子上，比较凌乱，就需要一个收纳盒来收纳。这个 View 就相当于一个收纳盒，它的作用就是让页面看起来整齐有序，让人一眼就能看清页面结构。

我们可以为视图设置和id属性，使用这两个属性来设置wxss样式。但是从习惯和专业性的角度考虑，我们往往选择使用它们来为视图和其他元素设置wxss样式。这是个很好的习惯和写法，而且看上去很专业。

废话不多说，我们开始写代码吧，首先写一个view作为，在view里面放上logo和右边的播放小图标，代码如下：

写完上面的代码之后我们可以看到显示面板中还没有任何内容显示。

这是因为 view 是一个视图容器，它没有什么实际意义，不像 这样的组件，有实际意义。View 只是用来组织页面，让浏览更加人性化，如果我们需要显示一些东西，我们可以直接把它加到 view 上。Logo 部分是一张图片，所以我们只需要在显示 Logo 的 View 上添加一个组件就可以了。代码如下：

组件的功能比较多，今天就只说一下要用到的 src 属性，其他的等我写教程的时候再详细讲解，如果你很心动的话，可以去这里快速学习一下：

src中设置图片的路径，可以是远程线上路径，即线上图片的图片地址，也可以是本地图片的相对目录。

03

先说本地相对目录：

我们在该文件夹的同级目录下建立一个兄弟文件夹，并命名。翻译过来就是资源的意思，也就是说我们开发中用到的一些资源就放在里面了。

在.h文件中新建一个文件夹，把我们要用到的图片资源放到里面。然后把需要的logo图片复制进去，没有也没关系，文章最下面有资源包下载链接，直接用就可以。建在任何地方都可以，但是一个好的习惯是把文件夹放在外面，因为这个文件夹里的资源是共享的。

当然你也可以选择不命名，其他的名字也可以，但是尽量和实际开发含义一致，让人一眼就能知道这个文件夹的实际含义，这也是一个好的开发习惯。说完，我们再来看看本地小程序的文件结构。

可以看到，我们编写的wxml代码是在//.html目录下，所以需要在这个页面的src路径中填写相对于/目录的logo图片路径。

logo图片的路径是//.png，所以如果我们想在.html中访问这个图片，我们的相对目录是../..///.png

所以在src中填写../..///.png，完整代码如下：

此时，不管你是否感到困惑，你的图片都会显示出来。

有些同学可能不明白“../”是什么意思，我简单解释一下：

在开发过程中，“../”表示上级目录，例如本例中.html所在目录为“///”，则一个“../”表示在“/”目录下，“../../”表示在“/”目录下，即和.html同级的目录。同时，和在同一个目录下，因此可以通过这种方式访问​​“//.png”logo图片。

04

先说网上的图片，以别天网的logo图片地址为例：，我们把src填为“”，代码如下：

查看效果：

我们还是可以看到有图片显示的，所以在使用微信开发工具的时候，本地图片和网络图片都是可以使用的。

不过因为我没有体验过实际上线的小程序，无法测试，所以不确定微信小程序正式上线后能不能用网络mesh，所以这里就暂时打个问号吧，不过本地相对目录是绝对没有问题的，为了保险起见，这里大家都用本地图片了。

我们还是换回牛人大讲堂的局部logo图片吧，可以看到logo图片的宽度是全屏的宽度，高度不符合要求。所以我们需要调整图片的大小和其他样式来达到我们的要求，这就需要用到wxss了。wxss的作用就是调整组件的样式，让wxml中的组件更加精美。

为了满足移动端开发的需求，微信为微信小程序添加了一个独特的度量单位：rpx。上例中2rpx=1px。大家知道这个就够了。今天就不详细讲rpx了，因为分项太多，担心引起混淆，以后会专门写一篇文章讲rpx。今天就用最传统、最常见的px作为度量单位吧。如果想更详细地了解rpx，可以直接看文档。

首先我们需要测量源图片各个部分的长宽、颜色、边距等参数，这里给大家推荐一款工具，叫。这款工具非常方便，是前端工作和网站仿真的神器，强烈推荐给大家。我分享了这个工具，有需要的可以去下载（解压密码为）：。经过测量，我们得到以下数据：

的组成部分，即的参数如下：

背景颜色为#，高度为45px，下边框粗1px，实线，边框颜色为

标识的组成部分，也就是参数如下：

宽度为78px，高度为20px，距离父元素视图的上边距为10px，左边距为

知道了这些参数之后就可以开始写wxss代码了，我先贴一下代码：

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

解释一下代码： - 表示组件的背景颜色； 表示高度； - 表示下边框，从左到右依次表示边框粗细、实线()/虚线()、边框颜色； 表示组件的宽度； 表示距离父元素上、右、下、左的距离，从左到右分别是上边距、右边距、下边距、左边距，顺时针排列，比较容易记住。

如果看不懂上面的内容，可以去百度学习CSS或者直接将上面的代码复制粘贴到.wxss中，显示效果如下：

看起来是不是好多了？完全符合我们的要求，和我们想要模仿的图片一模一样。

最右边有一个正在播放的小图片，要把它添加到我们的 中，只需要在 logo 后面添加一个组件，并将 src 设置为 "" 即可。代码如下：

保存之后效果如下：

比较丑是因为还没写样式，按照刚才的步骤，先测量一下宽高边距等参数，测量结果如下：

宽高均为45px，浮动为右浮动

知道了参数，直接编写wxss代码如下：

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

写完之后看效果

是不是很像呢？到此为止我们就模仿了部分，下篇文章我们来模仿Tab bar部分，实现标签的切换。

05

以下是本教程的完整代码：

.wxml文件：

.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;}

只需复制粘贴到相应文件中即可使用。

资源包下载地址：

下载链接：

解压密码为：

✦✦✦✦✦✦✦✦✦