微信小程序学习之路 —— 开发者工具的认识

微信开发者工具的主页面主要是由菜单栏、工具栏、模拟器、编辑器以及调试其组成的。

菜单栏

• 项目：新建或打开一个项目
• 文件：新建、打开或者关闭文件
• 编辑：编辑或格式化代码
• 工具：包含一些辅助工具
• 界面：控制界面部分的显示和隐藏
• 设置：外观、快捷键、编辑器等设置
• 帮助：帮助文档及开发者详情
• 微信开发者工具：账号切换、开发模式更换以及调试等操作

工具栏

• 个人中心：显示登陆用户的用户名及图像
• 模拟器、编辑器、调试器：控制对应工具的显示和隐藏
• 模式切换下拉菜单：在小程序模式、搜索动态页模式和插件模式之间切换
• 编译下拉菜单：默认为普通编译，也可以根据需求添加其他编译模式
• 编译：代码编写结束后，按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