微信小程序教程:高仿一个漂亮的手机界面 partA

话不多说,先把今天要高仿的页面呈上来,给大家过目一下:

是不是很漂亮,今天要实现的就是这个页面所有的你能看到的特效,素材包已经给大家打包好了,下载链接在最下面,需要的直接去页面最底部下载吧。

01
好的,开门见山,正式开始:

小程序仿页面跟css其实很像。第一步我们先分析一下这个页面,从上到下一部分一部分的开始,我这里有自己的一套方法论,大家可以一起探讨一下。

这个页面由5部分组成,最上面是标题部分,包括中间的“牛人讲堂”的logo和最右边的播放效果小图标。其次是一个分类tab,可以互相切换,并且切换后,显示红色底边。

接下来是banner图部分,这个banner图可以自动切换,也可以手动切换。再然后下面类似一个导航,可以左右滑动,导航带有图标和文字。最后是首页的主页内容,包括两种形式,一种是只有一种课程的详细信息介绍,另一种是一个课程列表,包括3个课程的图片,文字。分析完了如下图:

分析完了,现在开始动手做,别着急,从上到下,一点点来。

02
先给大家介绍一下,我们会用到的一个控件 view(这里有详细的介绍:http://doc.pietian.com/?id=111)。

view是一个容器,作用类似html中的div,说的再通俗一点就是一个大的收纳盒子,比如你有一副手套和一条围巾,如果这些放在桌子上比较凌乱,那么你需要一个收纳盒将他们收纳起来。这个view就相当于收纳盒,它的作用就是规整,让页面看起来规矩不凌乱,页面结构能够一目了然。

我们可以给view设置class和id属性,通过这两个属性设置wxss样式。不过,从习惯和专业性上来说,我们大多数时候选择用class来给view以及其他的元素来设置wxss样式,这是个很好的习惯和写法,这么做显得很专业。

话不多说,开始编码。先写一个view,做为头部部分,view里面放logo和右侧的播放小图标,代码如下:

写完以上代码以后,我们看到,展示面板没有任何内容显示。

这是因为view是一个视图容器,它本身并没有实际的意义,它不像input,image等组件一样具有实际的意义,view知识用来是页面规整,浏览更人性化。我们需要显示什么东西,直接在view里面添加即可。logo部分是一张图片,所以我们只需要在显示logo的view中添加一个image组件。代码如下:

image组件的使用功能挺多的,今天只说下要使用的src属性,其他的等我写到image教程的时候再详细讲解,或者非常饥渴的小基友可以去这里快速学习:http://doc.pietian.com/?id=112

src中设置的是图片的路径,这里可以是远程的网上路径,也就是网上图片的图片地址也可以是本地的图片的相对目录。

03
先来说下本地的相对目录:

我们建一个和pages文件夹同级的兄弟文件夹,命名为resource。resource翻译过来是资源的意思,也就说这里面放一些我们开发所用到的资源。

resource里新建一个images文件夹,里面放我们用到的图片资源。然后,把需要的logo图片拷贝到images里面,没有的也不要紧,文章最下面有资源包下载链接,可以拿来直接用。resource可以建在任何地方,但是一个好的习惯是把resource文件夹放在最外面,因为这个文件夹的资源是共用的。

当然,你也可以不命名为resource,其他的名字也可以,但是尽量要符合实际开发的意义,能让人看一眼就晓得这个文件夹的实际意义,这也是一个好的开发习惯。弄好以后,我们再来看下本地的小程序的文件结构。

可以看到,我们正在编写的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,完整代码奉上:



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

有的同学可能不明白“../”是什么意思,简单的说一下:

开发中“../”的意思是上一层目录,比如说本例中的index.html所在的目录是“/pages/index/”,那么一个“../”就表示“pages/”目录下,“../../”就表示“/”目录下,也就是和pages同级的目录,同时呢,resource和pages是在同一个目录下,所以这样就能访问到“resource/images/nrjt_logo.png”的logo图片了。

04
再来说下网络图片,用瞥天网 的logo图片地址举例:http://www.pietian.com/css/default/logo.png,我们把src填写为“http://www.pietian.com/css/default/logo.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的组件,也就是的参数如下:
背景颜色为#F3F3F3,高度为45px,下边框为粗细1px,实线,边框颜色为E2E2E2
class为logo的组件,也就是的参数如下:
宽度为78px,高度为20px,距离父元素view的上边距为10px、左边距为140px

知道了这些参数以后,就可以上手编写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)/虚线(doshed)、边框颜色;width表示组件的宽度;margin表示距离父元素的上右下左的距离,从左到右依次为上边距、右边距、下边距、左边距,按照顺时针排列,这样容易记住。

如果以上你不是很懂,可以去百度学下css或者直接把以上代码复制粘贴到index.wxss中即可,显示的效果如下:

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



保存以后,看下效果如下:

很难看,因为我们还没有写样式。按照刚刚的步骤,我们先测量宽高,边距等参数。测量结果如下:

宽高都是45px,浮动是右浮动

知道参数,直接写wxss代码如下:
.play_icon{
width:45px;
height: 45px;
float: right;
}
写完,看下效果

是不是很像,到此为止我们就高仿完了头部部分,下一篇带大家高仿tab栏部分,并且实现tab的切换。

05
以下是本次教程的全部代码:

index.wxml:




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

发表评论

电子邮件地址不会被公开。 必填项已用*标注