调试小程序提示不是开发者(前端｜微信小程序基础知识2)

　　上期“技术哥”先给大家剖析了微信小程序的基本组成架构，如果不记得的话大家可以点击：“小程序基础知识1”复习哦。工欲善其事，必先利其器，那么今天技术哥就给大家说一说着：微信开发者工具吧。

　　微信开发者工具

　　新建小程序主界面

　　微信小程序真的可以说是这世界上最最简易的开发了，这也大大得益于小程序的幕后创造者们为开发人员创造的这个工具，我们先看一眼这个微信开发者工具的基本操作一览：

　　注:本次基础知识介绍旨在给大家拉出几个常用的微信开发者工具中常用的或者很实用的却又容易被忽略的位置，如果大家需要并有耐心看文档的时候大可以查看这100%的说明：

　　启动页：在登录页，可以使用微信扫码登陆开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。

　　二维码登录

　　模式选择页：

　　开发者工具提供两种开发模式的选择。

　　1.公众号网页调试。选择公众号网页调试，将直接进入公众号网页项目调试界面，在地址栏输入 URL，即可调试该网页的微信授权以及微信 JS-SDK 功能。

　　2. 小程序调试。选择小程序调试，将进入小程序本地项目管理页，可以新建、删除本地的项目，或者选择进入已存在的本地项目。

　　开发者主界面：

　　以下将按照图里的红色框数字为顺序一个个给大家讲：

　　1. 菜单栏：在主界面的左上角，依次有：

　　微信开发者工具：

　　切换账号：快速切换登录用户关于：关于开发者工具检查更新：检查版本更新开发者论坛：前往开发者论坛开发者文档：前往开发者文档调试：调试开发者工具、调试编辑器；如果遇到疑似开发者工具或者编辑器的 bug，可以打开调试工具查看是否有出 错日志，欢迎在论坛上反馈相关问题更换开发模式：快速切换公众号网页调试和小程序调试退出：退出开发者工具

　　项目：

　　新建项目：快速新建项目打开最近：可以查看最近打开的项目列表，并选择是否进入对应项目查看所有项目：新窗口打开启动页的项目列表页关闭当前项目：关闭当前项目，回到启动页的项目列表页

　　文件：

　　编辑：

　　工具：

　　编译：编译当前小程序项目（工具栏中有更详细的选项）刷新：与编译的功能一致，由于历史原因保留对应的快捷键 ctrl(?) + R编译配置：可以选择普通编译或自定义编译条件前后台切换：模拟客户端小程序进入后台运行和返回前台的操作清除缓存：清除文件缓存、数据缓存、以及授权数据界面：对主界面显示的界面进行设置

　　设置：

　　外观设置：可进行开发者工具编辑器外观设置与编辑习惯的设置

　　快捷键设置：可更改快捷键匹配开发者编辑习惯

　　编辑设置：

　　代理设置：

　　通知设置：

　　2. 工具栏：工具栏在菜单栏的下方：

　　从左往右开始介绍他们分别是：

　　用户头像：点击用户头像可见我们收到的通知：

　　模拟器设置：点击可打开/关闭主界面中的模拟器

　　编辑器：点击可打开/关闭主界面中的编辑器

　　调试器：点击可打开/关闭主界面中的调试器（模拟器、编辑器、调试器三者必有其一在主界面中显示）。工具栏中间，可以选择普通编译，也可以新建并选择自定义条件进行编译和预览。预览：点击可出现二维码真机使用编辑的小程序：

　　切后台：可以模拟小程序进入后台的情况（工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。）

　　详情：工具栏右侧是开发辅助功能的区域，在这里可以上传代码、申请测试、上传腾讯云、查看项目详情。

　　3. 模拟器：模拟器让我们的开发都成为一个可视化操作的过程，让我们开发者更直观地看到开发过程中对应的用户体验。

　　注: 模拟器顶部的三拉框是可对模拟器进行设置，适配不同手机机型、状态下得出的不同用户体验，开发者工具还非常贴心地将每个机型对应的像素一一列出，方便界面的设计与调试。

　　4. 编辑器：编辑器的左方是我们编辑文件的目录树，右方为主编辑界面

　　5. 调试器：调试器共有调试工具分为 7 大功能模块： Console、Wxml、Sources、Network、Appdata、Storage、Sensor、Trace

　　Console panel：开发者可以在此输入和调试代码、小程序的错误输出，会显示在此处。

　　Wxml panel：Wxml panel 帮助开发者开发 wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属 性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况（仅为实时预览，无法保存到文件）。通过调试模块左上角的选择器，还可以快速定位页面中组件对应的 wxml 代码。

　　Appdata panel：显示程序运行时的实时数据亦可以在此直接添加数据并有效反馈到模拟器上。

　　Sensor panel：这是一个很神奇的存在，可直接在这调试器上更改定位以及模拟真机的罗盘以调试API中的重力感应。

　　好了，微信开发者工具今天就给大家粗略的介绍到这里，当然啦，一个工具的更好的使用是靠切切实实的使用才可为己用诶！

　　"技术哥"写到这里又不经暗叹这微信开发者工具的简便实用，真是越简单的公式越正确，这越简单的工具越是倾注了开发者更大的心血，希望各位真切切地使用起来吧，如果各位手痒痒跃跃欲试，可以回顾我们的：微信小程序开发第一步，开始自己的开发吧。

　　给大家附上微信开发者工具的快捷键一览表：

　　"技术哥"接下来还会给大家带来更深入更详细的小程序教程，请大家关注"技术哥"，做一个持续学习者！