1.3 微信小程序开发工具介绍

“工欲善其事必先利其器”,在开始编写代码之前,先来了解一下微信官方提供的微信小程序开发工具,这个开发工具可以对微信小程序进行项目管理、开发调试、发布、功能设置等。

1.3.1 项目创建

打开微信小程序开发工具,如图1-7所示。上面为微信开发工具的版本号,中间为要创建的项目类型,底部为当前登录的微信账号。

图1-7 微信开发工具首页

单击“小程序项目”可以编辑、调试小程序项目。如果本地没有项目,如图1-8所示,那么直接创建项目;如果项目已经存在,如图1-9所示,那么右侧会显示出已经存在的项目,包括程序的首页截图,项目的Logo、名称和路径,单击右下角的“+”创建新的项目。

图1-8 本地不存在项目

图1-9 本地存在项目

也可以单击“管理项目”,然后单击右下角的“新增”来创建新的项目,如图1-10所示。

图1-10 利用项目管理新增项目

如果已经打开了项目,可以单击菜单栏中的“项目”->“新建项目”来新建项目。如图1-11所示。

图1-11 利用菜单栏新建项目

图1-8中“项目目录”栏指的是项目存放的路径。AppID就是我们在1.2.2节开发准备中所提到的(在“设置”->“开发设置”中查看AppID),不填写AppID的话会有部分功能不能使用,如预览、上传等。“项目名称”即项目的名字,与发布后显示的名字无关。

勾选“建立普通快速启动模板”,系统会帮你建立一个小的Demo。

需要注意的是,最好将每一个项目都单独存放在一个目录下,同一个目录下不要存放多个项目,并且项目名称与项目路径中最好不要使用中文。

1.3.2 项目删除

如果想删除项目,首先到如图1-10所示的项目管理页面,然后单击项目后面的“垃圾桶”图标进行删除,或者选中项目,单击左下角的“删除”。

单击菜单栏中的“查看所有项目”,如图1-12所示,可以进入如图1-9所示的页面,然后单击“管理项目”进入如图1-10所示的项目管理页面。

图1-12 利用菜单栏查看所有项目

注意,微信小程序提供的项目删除功能不会删除本地文件,所以建议再手动删除本地项目文件。

1.3.3 开发工具界面介绍

打开项目,如图1-13所示。

图1-13 打开项目

上面为工具栏,左侧为模拟器窗口,右上为代码编辑窗口,右下为调试窗口。

工具栏如图1-14所示。

图1-14 工具栏

从左往右开始介绍工具栏:首先是当前开发者的微信头像,可以查看接收的信息。然后是控制模拟器、编辑器、调试器窗口的开关,单击可以进行对应窗口的打开、关闭操作。往右是开发模式的选择,这里创建的是小程序,所以显示的是小程序模式。再往右是编译、预览,可以自定义编译模式来模拟用户进入小程序的状态,如扫描进入,单击分享进入等。预览则会生成一个二维码,用手机微信App扫描可以在真机上进行演示。

真机调试即手机远程调试,与预览效果差不多,区别是远程调试的打印日志会显示在电脑端的调试面板中。

切后台是模拟用户进入后台的各种效果、用户来电等情况。清缓存是模拟用户清除登录信息、存储信息、授权信息等情况。

模拟器窗口如图1-15所示。

图1-15 模拟器窗口

左上角可以切换模拟器的屏幕尺寸,以查看不同分辨率下的页面展示效果,也可以进行自定义操作。往右是一个百分比,指定屏幕的缩放显示比例。单击上图标可以把窗口独立出来,方便调整位置。

编辑窗口如图1-16所示。

图1-16 编辑窗口

左侧为文件目录,右侧为当前打开的文件内容。

调试窗口如图1-17所示,与网页端的调试一模一样。

图1-17 调试窗口

单击窗口右上角的按钮可以使窗口独立出来,方便开发者移动位置。

1.3.4 项目调试介绍

Console面板:用于打印调试,如图1-18所示。

图1-18 Console面板

当代码有错误的时候,错误信息会显示在Console面板中。同时,当执行console.log()打印代码的时候,也会把里面的内容显示在Console面板中,也可以在Console面板中输入JavaScript代码并执行。

Sources面板:进行断点调试,如图1-19所示。

图1-19 Sources面板

左侧显示的是项目的文件目录;中间是某个文件的内容,文件内容的左侧有行数标识,点击行数标识可以添加断点,进行断点调试;右侧Watch可以查看某个元素值的变化,Watch上面的按钮控制单步执行和断点执行。

Network面板:用于网络查看,如图1-20所示。

图1-20 Network面板

查看发送的网络请求及参数、接收到的响应信息等具体情况,也可以看到每个请求的用时等详细情况。

Wxml面板:用于查看页面元素,如图1-21所示。

图1-21 Wxml面板

查看页面上的元素的结构,查看CSS样式等,调试面板左上角的图标可以快速地选择要查看的Wxml元素。

AppData面板:用于查看当前页面的全局数据,如图1-22所示。

图1-22 AppData面板

可以实时地查看当前页面的数据值,方便观察数据的变化情况。