微信小程序开发(二)认识开发工具

微信小程序开发(二)认识开发工具

腾讯微信团队提供非常优秀的微信小程序开发工具,大大降低了开发者的入门门槛,为他们点赞!上一篇文章已经说明了,如何注册及下载开发工具,现在我们就来一起认识见识一下开发工具的庐山真面目。

首次打开这个开发工具,会让我们进行扫码登录,是否有一种浓浓的微信的味道!

在这里插入图片描述

这时,我们需要用以后管理此小程序的微信来进行扫码,成为此小程序的管理员。大家以后在开发小程序的时候,要习惯扫码,其实早就习惯了,扫码付款,扫码乘车,扫码共享单车等。微信开发的真机测试时,也需要扫码的。

在这里插入图片描述

扫码成功后,还需要我们在手机微信上确认登录。

然后,你就会到小程序项目向导,如下图示。

在这里插入图片描述

由于是首次运行,我们选择新建项目。当然,你如果已经使用过,也会列出你以前做的工程,你也可以选择打开已有的项目工程。此处我仍选择新建,来展示从头建一个项目的过程。

在这里插入图片描述

新建项目时,你需要填写项目名称,项目目录及AppID,AppID在注册帐号时会提供给我们一个,详见上一篇文章。当然如果没有,我们也可以选择用测试号来开发,系统会自动为我们填写一个AppID。全部完成后,如上图示,点击新建。

经历这几步,终于,我们见到了期待已久的小程序开发工具界面,是不是有点激动呢!

哎呀,有人说,成功了的感觉会有点晕!

得了,先别晕了,来认识一下开发工具布局吧,虽然这图搞的,确实有点晕。

在这里插入图片描述

窗口选择器,点击会显示或关闭相应窗口。

模拟器,所见即所得,你在代码编辑窗口所做的修改,会直接显示在模拟器,不用运行。只需要保存就好了。

真机测试,你点一下,会出现一个二维码,用微信扫一扫,就可以真机测试了。

资源管理器(也就是项目结构图),代码窗口,调试窗口,就不用多说了吧!谁用谁知道。

So easy!

下面我们来重点说一下,小程序项目都包含哪些文件,都有什么用!在这里插入图片描述
先说通用的

*.js 放置javascript代码,主要处理业务逻辑的代码都放在这里
*.json 配置文件,json格式,就是键值对格式,这里不多说了,不懂就百度或者留言吧
*.wxss 样式表,小程序的样式文件,类似css文件,语法也通用
*.wxml 页面结构,类似html,语法除了微信新增的,html语法通用
  • pages——放置小程序的页面,一个页面对应一个子文件夹,如本例中index,log就是2个页面,每个页面由4个文件组成。
  • utils——放置通用工具函数文件,通常放置一些js文件。
  • app.*——当前应用程序的文件,影响整个应用程序的,放在这里,比如app.wxss放置小程序通用样式表。
  • project.config.json——当前项目配置文件

好了,这篇文章就先到这里,有问题留言!

我希望你们看完文章的结果是:

ig.json——当前项目配置文件

好了,这篇文章就先到这里,有问题留言!

我希望你们看完文章的结果是:

没有了,没有问题了!