官方开发者工具使用教程（附最新demo列表）

天下钞票

官方开发者工具使用，雪大已经有过一次介绍
地址: http://www.wxapp-union.com/forum ... =158&extra=page%3D1

开发工具版本：2017.05.08 （0.17.170800）新增部分功能，详见#4楼。

官方开发者工具功能还是比较全的，更新也比较多，用起来越来越方便，今天就自己的体验写点东西，给新来的同学一点帮助。
先对界面一些细节介绍一下吧。
（一）        编辑界面

1、        帮助列表，在帮助/查看更新日志，可以直达 小程序文档，很方便
2、        手机选择列表，在里面可以选择不同机型，来判断页面设计在不同手机上显示是否有问题，一般来说，如果使用微信的专用的长度单位（rpx），问题应该不大。
3、        网络选择，也是测试网络用，用的不多。
4、        点击可以隐藏目录框，对于小屏幕的电脑，可以点击隐藏目录，增大代码编辑区域
5、        在这里添加目录、文件什么的，很方便
6、        当前界面的目录及场景值（经常有人跟踪页面时找不到当前页面，打开各个页面找，下次记得看看这里哦）。
7、        这里删除缓存用。
（二）        认识调试界面：

1、        Console标签，就是在js代码里面使用console.log()时显示在这里，并且代码的各种警告和错误会出现在这里，黄色背景是警告，红色的是错误。
2、        Storage标签，这里是缓存数据

3、        AppData标签，这个是每个页面的数据，由于setData函数异步的原因，有些同学在setData后直接打印某个数据，会发现数据没有变化，会怀疑setData没有成功。到底有没有成功，在这里就可以查到了。
另外， data数据在这个界面是可以修改的，某些时候调试时，需要修改参数看页面效果，在这里修改也是可以的，并且不会影响代码，很方便。

4、        Wxml标签 在这里，可以查看当前页面的wxml代码，主要在设计界面阶段发现布局问题的时候用到，非常方便，左边选择标签，右边有css样式，在这里，也可修改样式查看效果的哦，有没有注意到？

其他几个标签，平时我很少用到，如果有人对其他几个标签有特殊见解，可以跟帖并私密我一下。
（三）        项目界面：

这里只介绍3个点吧。
1、        使用其他开发工具编写程序时，其他工具保存代码，本开发工具自动更新。
2、        调试阶段，或没有https网站时，记得勾选该选项
3、        删除项目，就是在开发工具中删除该项目而已，并未删除源文件。
（四）        其他
另外再讲几点开发工具中的小技巧
1、        代码的折叠功能，在微信小程序的几个标准文件中，把鼠标移动到函数名前面的空白、控件前面的空白等，会有“-”符号，点击可折叠该函数、控件，这个在分析结构的时候非常有用。
2、        自动补全功能也很不错，比如新建的js空白页面，直接输入page，并选择，可以直接补全整个page页面，还有各个控件的补全，也都非常不错。

以上只是个人的一点浅薄的认识，业余编程爱好者而已，如果有其他的未写明白的地方，欢迎指正。同时也欢迎跟帖发表其他技巧。
最新demo列表：

开发工具版本：2017.05.08 （0.17.170800）更新内容简略说明：

1、编辑菜单内新增“编辑器设置”功能，如下图：

（注意是编辑区域，就是右边那一块），从上到下分别是设置编辑器背景颜色、字体、字号、行距，这里注意设置字号以后，行距需要重新设置一次，即便不更改，也要触发一次焦点，否则行距会自行变大或变小。其他默认就可以了。个人感觉编辑器背景变深色比白色舒服一点。
2、很多快捷键可以查询到了，常用的汇总如下：
保存：ctrl+S
保存所有文件：shift+ctrl+S
关闭当前文件：ctrl+W
格式化代码：shift+alt+F
全局搜索：Shift+Ctrl+F
跳转到文件：Ctrl + P
跳转到最近文件：Ctrl + E
编译：Ctrl + B

3、新增“开发者文档”“开发者社区”两个链接，很顺手，不错。
顺便，@天下雪，如果能联系官方把微信小程序联盟网址也加进来，就完美了，哈哈。
退而求其次，如果能联系个破解高手，来个第三方插件把小程序联盟网址加进来也可以啊。^_^

4、编译选项新增“设置应用进入的场景”选项。

5、项目选项卡 新增“基础库版本”选项， 可通过 wx.canIUse 获取兼容性

暂时发现这么多更新，如果有未发现的，欢迎提醒更新。

好棒啊

腻害

学习了

腻害

学到了

棒棒的

哪里有下载吗？

非常感谢, 提供了好多的demo

感谢, 提供了好多的demo,小白必备

天下钞票 发表于 2017-5-9 12:34
开发工具版本：2017.05.08 （0.17.170800）更新内容简略说明：

1、编辑菜单内新增“编辑器设置”功能，如 ...

666

学习

太好了