微信小程序开发者工具安装使用

工欲善其事,必先利其器,在正式开发小程序之前,我们还需要做一些准备工作

一、微信小程序开发者工具,首先我们就来初步认识小程序的开发环境和必备软件:微信web开发者工具。

二、下载安装微信小程序开发者工具,我们可以到weixin.qq.com下载这个微信小程序开发者工具,由于官方文档不断在变化,所以地址随时有可能会变更,微信关注光星数云公众号,回复【工具】,就可以随时获取最新的微信小程序开发者工具下载地址,下载好微信小程序开发者工具之后,我们自然需要进行安装,macOS与Windows两个版本的微信小程序开发者工具安装方式有些许差异:

微信小程序开发者工具下载地址
微信小程序开发者工具下载地址

Windows版下载好安装程序后,直接双击打开进入安装流程,安装完毕后,一般可在桌面即可启动开发者工具,macOS版下载好镜像文件后,直接拖动到[Application(应用程序)]文件夹中,在LaunchPad就可以启动开发者工具。大家可以根据相应提示,安装、启动开发者工具

三、新建小程序项目,安装完毕后,我们就可以在开发者工具中,新建小程序工程项目了。

如果是首次启动[微信web开发者工具],你需要使用微信号扫描二维码进行登录。在开发过程中,登录的微信号将会用于微信开放能力相关接口(例如。获取用户资料,发送模版消息等)的调试。

登录完成后,我们就进入项目类别选择的窗口。在这一步,我们选择[小程序项目].

微信小程序开发者工具

首次点击[小程序项目]时,开发者工具会直接要求我们新建一个小程序项目,

项目目录:在这个字段中为小程序工程选择一个文件夹,用于存放小程序项目的代码。

app id,如果你已经有一个小程序的app id,可以在这里将它填入,如果还没有,可以选择下面的[点此体验]链接,

项目名称:为小程序项目起一个名字,这个名字只针对开发者工具中识别,不会影响小程序本身对外显示的名字。确认无误,点击[确定]就可以新建小程序项目,之后,我们就进入[微信web开发者工具]的主界面。

使用开发者工具进行开发

[微信web开发者工具]主要包含四个部分,

顶部为工具栏,可对开发者工具的账户窗口显示进行调整,或是执行编译、预览或上传小程序的操作。左侧为模拟器,开发中的小程序代码,可以直接在预览区中查看模拟运行效果。

右侧上半部分为编辑器,可以在其中浏览小程序工程目录、直接编辑小程序代码。

右侧下半部分为调试器,小程序的运行结果、输出等信息,会在这部分进行显示。

小程序开发者工具
小程序开发者工具

上一篇:

下一篇:

相关文档