微信小程序学习(三):开发工具菜单介绍

1.开发工具界面

微信小程序学习(三):开发工具菜单介绍_第1张图片

2.菜单区介绍

2.1 编辑

默认为编辑状态显示,下面的编译为手动编译功能,通常情况下修改文件后保存会刷新界面显示,如果修改的是.js文件,保存时会自动进行编译和刷新界面显示

2.2 调试

微信小程序学习(三):开发工具菜单介绍_第2张图片

通过界面我们可以看出编辑状态的菜单栏与chrome浏览器的调试界面几乎相同,包括控制台、源码、网络等,并且支持断电调试,功能几乎与前端开发调试类似,不再介绍,

调试的时候,菜单栏下面会多出一个后台和缓存按钮:

后台: 是模拟程序运行到后台(按Home键回到主页面,不是退出程序)时的执行情况,进入后台时再次点击会进入前台执行。

缓存 : 数据的本地缓存,可以在这里进行清除缓存等操作。

2.3 项目菜单

3.界面显示栏

微信小程序学习(三):开发工具菜单介绍_第3张图片

界面显示栏包括上下两部分,上面设置运行环境,下面显示运行效果,各部分介绍:

1选择运行的环境,上面的手机型号不具体指该手机,单指相同的分辨率,例如iphone6 指375 * 667分辨率的所有机型

2模拟网络运行环境,包括wifi、4G、3G、2G,默认为wifi运行环境

3界面效果展示区,主要显示程序的运行效果

注意:切换运行的手机分辨率时记得要手动编译以下,否则界面显示不正确

4.目录结构栏和编辑栏

目录结构已经介绍过了,不在多做介绍;

编辑区显示当前正在编辑的文件,如果是正在编辑的文件,名字显示为淡绿色,并且未保存的文件,文件名后面会有一个绿色的点,注意如果修改过文件后没有保存,程序不能正确运行

微信小程序学习(三):开发工具菜单介绍_第4张图片

你可能感兴趣的:(微信小程序学习(三):开发工具菜单介绍)