
在上一篇的文章中,我想大家应该看到了那个首页头图,在讲解如何实现首页前我们先把准备工作先做好。
微信小程序“工欲善其事,必先利其器”。首先,我们要在电脑上下载微信开发者工具,如图:
微信开发者工具电脑上没有的话,度娘一下就OK了。
下载完毕后,我们打开这个东东,一开始会让你微信扫一扫,扫完之后会出现下图的界面:
因为我们做的是小程序,所以我们点击左侧的小程序项目,点击完会出现下图所示的界面:
项目目录就是你的小程序选择放在哪里,这里我放在了桌面,大家根据自己的喜好自行放置,AppID先不用注册,点击APPID输入框下面的测试号有个蓝色字体的小程序,点击后APPID就会出现了,这里不注册是我给大家做演示用,大家先用测试号开发,开发完后再注册一个APPID,到时候直接把代码扔过去就行了。项目名称就是你在项目目录的地方新建一个文件夹,我的项目目录在桌面上,所以我在桌面上新建一个文件夹aa,上述东整完后,点击确定按钮,会进入下图的界面:
微信小程序开发该界面的左侧是调试器,右侧是代码编写区,大家在右侧写完代码后,可以在左侧看到效果。看到这里是不是有点心动了呢,别急,慢慢来。
右侧有个pages目录,我们的代码就是要在这个里面写,下面让我们在pages目录里面新建一个目录叫做welcome的目录,然后在welcome目录里面新建welcome.wxml、welcome.js、welcome.wxss这三个文件。具体做法就是右键单击pages目录,新建目录,然后目录名定义为welcome,welcome目录建成后,右键单击welcome目录,新建wxml、wxss、js文件并都命名为welcome。新建完后pages目录如图所示:
welcome目录然后我们打开welcome.wxml文件,在里面输入一个hello world!然后保存,看看会出现什么。
很明显,大家期望中的hello world!并没有出现,而是出现这一个界面:
首页这个界面中的Hello World 可不是我们写的”hello world!“,为什么我们输入了hello world!后却没有出现呢?大家在目录中自行找到app.json的文件并打开,打开后如图所示:
app.json可以看到,app.json是一个数组,由pages和window组成,大家找到pages,里面第一个是“pages/index/index”,大家在pages目录里面自行查找,找到后打开index.wxml,看看里面的代码,
index.wxml大家先不用管代码看不看得懂,是不是看到了”获取头像昵称“这几个字,在看看你左侧调试器中的界面是不是也有这几个字,看到这里你是不是明白了点什么,我们尝试着把我们自己创建的目录页写到app.json的pages里面,
大家在app.json的pages数组里面输入"pages/welcome/welcome",并把它放在“pages/index/index”上面,如图:
然后大家保存一下,进行调试,效果图如下:
效果图这样是不是就可以了呢,大家是不是可以想到,我想显示那个页面,我就在app.json的pages数组里面把我想显示页面的路径放在第一个就ok了,确实是这样。
其他的目录或者文件我没有提到是因为现在还没有用到,等用到的时候我会介绍给大家,大家好好消化消化,把这个流程在过一遍,把这些东西弄懂之后,下篇文章就开始我们的实战之旅了,准备好了吗?
希望大家能够点一下那个关注,这样我一发文章,大家就能在第一时间看到,也希望大家能够踊跃评论,点赞和转发~~~
大家有兴趣可以加一下下面的这个群,在群里面我会解决大家开发时遇到的问题。