微信小程序开发工具,在开始编写代码之前,先来了解一下微信官方提供的微信小程序开发工具,这个开发工具可以对微信小程序进行项目管理、开发调试、发布、功能设置等。
项目创建
打开微信小程序开发工具,如图所示。上面为微信开发工具的版本号,中间为要创建的项目类型,底部为当前登录的微信账号。
单击“小程序项目”可以编辑、调试小程序项目。如果本地没有项目,如图A
所示,那么直接创建项目;如果项目已经存在,如图B
所示,那么右侧会显示出已经存在的项目,包括程序的首页截图,项目的Logo、名称和路径,单击右下角的“+”创建新的项目。
图A
本地不存在项目
图B
本地存在项目
也可以单击“管理项目”,然后单击右下角的“新增”来创建新的项目,如图C
所示。
如果已经打开了项目,可以单击菜单栏中的“项目”->“新建项目”来新建项目。如图所示。
图A
中“项目目录”栏指的是项目存放的路径。在“设置”->“开发设置”中查看AppID,不填写AppID的话会有部分功能不能使用,如预览、上传等。“项目名称”即项目的名字,与发布后显示的名字无关。
勾选“建立普通快速启动模板”,系统会帮你建立一个小的Demo。
需要注意的是,最好将每一个项目都单独存放在一个目录下,同一个目录下不要存放多个项目,并且项目名称与项目路径中最好不要使用中文。
项目删除
如果想删除项目,首先到如图C
所示的项目管理页面,然后单击项目后面的“垃圾桶”图标进行删除,或者选中项目,单击左下角的“删除”。
单击菜单栏中的“查看所有项目”,如下图所示,可以进入如图B
所示的页面,然后单击“管理项目”进入如图C
所示的项目管理页面。
注意,微信小程序提供的项目删除功能不会删除本地文件,所以建议再手动删除本地项目文件。
开发工具界面介绍
打开项目,如图所示。
上面为工具栏,左侧为模拟器窗口,右上为代码编辑窗口,右下为调试窗口。
工具栏如图所示。
从左往右开始介绍工具栏:首先是当前开发者的微信头像,可以查看接收的信息。然后是控制模拟器、编辑器、调试器窗口的开关,单击可以进行对应窗口的打开、关闭操作。往右是开发模式的选择,这里创建的是小程序,所以显示的是小程序模式。再往右是编译、预览,可以自定义编译模式来模拟用户进入小程序的状态,如扫描进入,单击分享进入等。预览则会生成一个二维码,用手机微信App扫描可以在真机上进行演示。
真机调试即手机远程调试,与预览效果差不多,区别是远程调试的打印日志会显示在电脑端的调试面板中。
切后台是模拟用户进入后台的各种效果、用户来电等情况。清缓存是模拟用户清除登录信息、存储信息、授权信息等情况。
模拟器窗口如图所示。
左上角可以切换模拟器的屏幕尺寸,以查看不同分辨率下的页面展示效果,也可以进行自定义操作。往右是一个百分比,指定屏幕的缩放显示比例。单击上图标可以把窗口独立出来,方便调整位置。
编辑窗口如图所示。
左侧为文件目录,右侧为当前打开的文件内容。
调试窗口如图所示,与网页端的调试一模一样。
单击窗口右上角的按钮可以使窗口独立出来,方便开发者移动位置。
项目调试介绍
Console面板:用于打印调试,如图所示。
当代码有错误的时候,错误信息会显示在Console面板中。同时,当执行console.log()
打印代码的时候,也会把里面的内容显示在Console面板中,也可以在Console面板中输入JavaScript代码并执行。
Sources面板:进行断点调试,如图所示。
左侧显示的是项目的文件目录;中间是某个文件的内容,文件内容的左侧有行数标识,点击行数标识可以添加断点,进行断点调试;右侧Watch可以查看某个元素值的变化,Watch上面的按钮控制单步执行和断点执行。
Network面板:用于网络查看,如图所示。
查看发送的网络请求及参数、接收到的响应信息等具体情况,也可以看到每个请求的用时等详细情况。
Wxml面板:用于查看页面元素,如图所示。
查看页面上的元素的结构,查看CSS样式等,调试面板左上角的图标可以快速地选择要查看的Wxml元素。
AppData面板:用于查看当前页面的全局数据,如图所示。
可以实时地查看当前页面的数据值,方便观察数据的变化情况。
酷客网相关文章:
评论前必须登录!
注册