微信开发者工具的主页面主要是由菜单栏、工具栏、模拟器、编辑器以及调试其组成的。
菜单栏
- 项目:新建或打开一个项目
- 文件:新建、打开或者关闭文件
- 编辑:编辑或格式化代码
- 工具:包含一些辅助工具
- 界面:控制界面部分的显示和隐藏
- 设置:外观、快捷键、编辑器等设置
- 帮助:帮助文档及开发者详情
- 微信开发者工具:账号切换、开发模式更换以及调试等操作
工具栏
- 个人中心:显示登陆用户的用户名及图像
- 模拟器、编辑器、调试器:控制对应工具的显示和隐藏
- 模式切换下拉菜单:在小程序模式、搜索动态页模式和插件模式之间切换
- 编译下拉菜单:默认为普通编译,也可以根据需求添加其他编译模式
- 编译:代码编写结束后,按Ctrl+S保存代码则直接自动编译,单击“编译”按钮则进行手动编译
- 预览:单击生成二维码,微信扫描二维码预览运行效果
- 真机调试:通过网络连接对手机上运行的小程序进行调试
- 切后台:模拟小程序在手机中切后台的效果
- 清缓存:清除数据缓存、文件缓存
- 上传:将代码上传到小程序管理后台,如果是测试号的话,则不会显示“上传”按钮
- 版本管理:通过git对小程序进行版本管理
模拟器
- 手机型号:iPhone5,单击可以切换成其他手机
- 缩放百分比:75%,可以调节预览画面的大小
- 网络环境:WIFI,可以切换为2G、3G、4G或Offline(离线)
- 页面路径:pages/index/index
编辑器
- 左栏为浏览项目目录结构,右栏用于编写代码
- 在左栏中单击某个文件,可以在右栏中对该文件进行编辑
调试
- Console:"控制台"面板,用于输出调试信息,也可以直接编写代码执行
- Sources:"源代码"面板,可以查看或编辑源代码,并支持代码调试
- Network:"网络"面板,用于记录网络请求信息,可根据它进行网络的性能优化
- Security:"安全"面板,用于调试页面的安全和认证等信息,如HTTPS
- AppData:"App数据"面板,可以查看或编辑当前小程序运行时的数据
- Audits:"审计"面板,用于对小程序进行体验评分
- Sensor:"传感器"面板,用于模拟地理位置、重力感应
- Storage:"存储"面板,用于查看和管理本地数据缓存
- Trace:"跟踪"面板,用于真机调试时跟踪调试信息
- Wxml:"Wxml"面板,用于查看和调试WXML和WXSS