请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 717|回复: 0

微信小程序开发(二)软件安装并进行初步调试

[复制链接]

514

主题

519

帖子

2424

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2424
admin实名认证 发表于 2019-5-11 17:15:30 | 显示全部楼层 |阅读模式
在上一篇的文章中,我想大家应该看到了那个首页头图,在讲解如何实现首页前我们先把准备工作先做好。
ddsd.jpg
“工欲善其事,必先利其器”。首先,我们要在电脑上下载微信开发者工具,如图:
ddssd.jpg
电脑上没有的话,度娘一下就OK了。
下载完毕后,我们打开这个东东,一开始会让你微信扫一扫,扫完之后会出现下图的界面:

ddsddd.jpg
因为我们做的是小程序,所以我们点击左侧的小程序项目,点击完会出现下图所示的界面:
3211.jpg
项目目录就是你的小程序选择放在哪里,这里我放在了桌面,大家根据自己的喜好自行放置,AppID先不用注册,点击APPID输入框下面的测试号有个蓝色字体的小程序,点击后APPID就会出现了,这里不注册是我给大家做演示用,大家先用测试号开发,开发完后再注册一个APPID,到时候直接把代码扔过去就行了。项目名称就是你在项目目录的地方新建一个文件夹,我的项目目录在桌面上,所以我在桌面上新建一个文件夹aa,上述东整完后,点击确定按钮,会进入下图的界面:
32141.jpg
该界面的左侧是调试器,右侧是代码编写区,大家在右侧写完代码后,可以在左侧看到效果。看到这里是不是有点心动了呢,别急,慢慢来。

右侧有个pages目录,我们的代码就是要在这个里面写,下面让我们在pages目录里面新建一个目录叫做welcome的目录,然后在welcome目录里面新建welcome.wxml、welcome.js、welcome.wxss这三个文件。具体做法就是右键单击pages目录,新建目录,然后目录名定义为welcome,welcome目录建成后,右键单击welcome目录,新建wxml、wxss、js文件并都命名为welcome。新建完后pages目录如图所示:

222111.jpg
然后我们打开welcome.wxml文件,在里面输入一个hello world!然后保存,看看会出现什么。

很明显,大家期望中的hello world!并没有出现,而是出现这一个界面:

6514.jpg
这个界面中的Hello World 可不是我们写的”hello world!“,为什么我们输入了hello world!后却没有出现呢?大家在目录中自行找到app.json的文件并打开,打开后如图所示:
999.jpg
可以看到,app.json是一个数组,由pages和window组成,大家找到pages,里面第一个是“pages/index/index”,大家在pages目录里面自行查找,找到后打开index.wxml,看看里面的代码,
5558.jpg

大家先不用管代码看不看得懂,是不是看到了”获取头像昵称“这几个字,在看看你左侧调试器中的界面是不是也有这几个字,看到这里你是不是明白了点什么,我们尝试着把我们自己创建的目录页写到app.json的pages里面,

大家在app.json的pages数组里面输入"pages/welcome/welcome",并把它放在“pages/index/index”上面,如图:

然后大家保存一下,进行调试,效果图如下:

111.jpg
这样是不是就可以了呢,大家是不是可以想到,我想显示那个页面,我就在app.json的pages数组里面把我想显示页面的路径放在第一个就ok了,确实是这样。

其他的目录或者文件我没有提到是因为现在还没有用到,等用到的时候我会介绍给大家,大家好好消化消化,把这个流程在过一遍,把这些东西弄懂之后,下篇文章就开始我们的实战之旅了,准备好了吗?

希望大家能够点一下那个关注,这样我一发文章,大家就能在第一时间看到,也希望大家能够踊跃评论,点赞和转发~~~

大家有兴趣可以加一下下面的这个群,在群里面我会解决大家开发时遇到的问题。


本文采集百度百家号:web开发那些事 原文链接https://mbd.baidu.com/newspage/d ... A%22bjhauthor%22%7D
maomivip@mail.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表