微信小程序开发（三）————首页的制作（一）

首先大家先打开自己电脑桌面上的微信开发者工具，打开之后呢，大家自行找到自己创建的welcome目录（如果没有的话，请先看我的第二篇文章），打开welcome目录下面的welcome.wxml文件。上面还有一句我们自己写的“hello world !”，如图：

welcome.wxml

我们的代码就是在welcome.wxml里面书写，在书写之前呢，我先介绍三个标签，分别是<view></view>、<text></text>、<image></image>。这三个标签是编写微信小程序最常用的三个标签，我们的首页也是用这三个标签来完成，下面我来给大家讲解一下这三个标签是干什么用的。

<image></image>标签：这个标签从字面意思就非常好理解，image中文翻译过来是影像的意思。在微信小程序里面表示图片标签，它有一个非常重要的属性，如图所示：

image标签

这个属性是src属性，代表的意思就是这个图片存放的路径，根据你在src里面输入图片的路径，image标签才能够生效。

<text></text>标签：这个标签也非常简单，大家也可以从字面上就能够猜出来这个标签和文本有关，没错，这个就是文本标签，我们写的”hello world！“就可以写在这个标签里面，如图：

text标签

<view></view>标签：这个标签我之所以放在最后一个讲，是因为它不太好理解。没关系，我给大家举个例子大家就懂了。就好比image标签和text标签是大狼狗，如果没有东西来约束它们，他们会乱跑乱跳，不服从管教，view标签就像是一个笼子，用把大狼狗扔进笼子里，它就没有办法了，所以呢view标签就是一个看不见摸不着的笼子，它用来约束image标签和text标签。如果大家有网站前端开发经验的话，肯定会想到div标签，没错，它们两个标签的性质是一样的，只不过一个用在了网站制作上，一个用在了微信小程序制作上。根据我刚才讲的，大家可以猜出image标签和text标签是写在view标签里面的，没错，代码如图所示：

view标签

大家把上面三个标签给弄明白之后呢，咱们就开始首页的制作吧，首先大家先来看一下首页的构成：

首页图

很明显，首页是由一个图片，一段文字和一个矩形框组成的，而且这三部分都位于屏幕的中间。弄明白首页的组成之后，我带领大家把它制作出来。

大家先自行创建一个image目录，image目录和pages目录是同级别的，不要放在pages目录里面，image目录用来存放我们的图片。如图所示：

image目录

创建完毕后，右键单击image目录，有一个硬盘打开选项，大家点击，点击后就会找到image文件夹存放的位置，如图所示：

image文件jia

这一步完成后，大家自行去网上找一张图片，把它放在image文件夹里面，我给大家展示一下我找的图片：

image文件夹里的图片

大家把图片放在image文件夹后，回到微信开发者工具里面，点击image目录，大家会发现目录下面出现了自己存放的图片，如图所示：

image目录

出现了之后，我们回到welcome.wxml文件里面，开始编写代码。这个时候welcome.wxml文件里面的代码是如图所示的状态：

welcome.wxml

大家是不是发现image标签里面src还没有填写路径，我们image目录也有了，图片也有了，现在我们就把路径给写上，代码如图所示：

image路径

"/image/1.png"这个路径很好理解，就是在全局找到image目录下的1.png这个图片，“image”前的"/"代表的意思是全局查找，现在界面会出现如图所示的情况：

界面图

图片界面上已经有了，还差一段话和一个矩形框，我们把剩下的给搞定。这个时候大家可以把之前输入的”hello world！“给删掉了。我们把剩下的代码给写上吧，如图所示：

这个代码大家应该能看懂吧，我就不多赘述了，下面来看效果图：

效果图

哈哈，是不是和我们理想中的界面差的多，不用着急，一步一步来，我们先把导航栏给解决掉，哪个部分是导航栏呢，如图所示：

导航栏

完成后的界面的导航栏是粉色的，而且导航栏的字是”ACKING的博客“，那么这些在哪里修改呢，大家自行找到app.json文件，如图所示：

app.json

大家应该理解了“pages”代表的含义，不懂的话可以去看看我的第二篇文章，里面有详细的解释。而这个“window”我没有讲，现在是处理它的时候了，我们想要对导航栏做修改，就是要修改“window”里面的四个属性，其中有一个属性是“navigationBarBackgroundColor”代表的意思是导航栏的背景颜色，我们把它对应的值改成自己喜欢的颜色就好了，它的默认值为“#fff”也就是白色，这里我把它改成粉色，如图所示：

app.json

效果图如下：

效果图

“window”里还有一个属性叫做“navigationBarTitleText”，意思是导航栏标题文字，默认值是”wechat“，大家可以把它修改成自己想要的文字即可，效果图如下：

效果图