【融职培训】Web前端学习 第10章 小程序开发2 微信开发者工具介

一，微信开发者工具简介

微信开发者工具是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。微信团队发布了微信小程序开发者工具，微信小程序开发文档和微信小程序设计指南，全新的开发者工具，集成了开发调试，代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。

启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有操作都会基于这个微信的帐号

程序调试主要有三大功能区：模拟器，调试工具和小程序操作区

二，模拟器

模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的API均能在模拟器上呈现出正确的状态。

三，调试工具

调试工具分为6个大功能模块：Wxml，控制台，源，网络，Appdata，存储以及WxmlPannel

• Wxml Pannel用于帮助开发人员开发Wxml转换后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性，同时可以通过修改wxss属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的wxml代码。
• Pannel源代码用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架脚本脚本进行编译的工作，所以在Sources Pannel中开发者看到的文件是经过处理之后的脚本文件，开发的者的代码都会被包裹在define函数中，并且对于Page代码，在尾部将会需要的主动调用。
• Netwrok Pannle用于观察和显示请求和套接字的请求情况。
• Appdata Pannel用于显示当前项目当前时刻appdata具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。
• Storage Pannel用于显示当前项目的使用wx.setStorage或wx.setStorageSync后的数据存储情况。
• Console Pannel具有两大功能：开发者可以在此输入和调试代码以及​​微信小程序的错误输出。

四，小程序操作区

微信小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从微信小程序中返回聊天窗口，会触发一个微信小程序被设置为后台的api。