1.2.2 开发工具功能介绍

微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南。微信小程序开发者工具集成了开发调试、代码编辑及程序发布等功能,帮助开发者简单、高效地开发微信小程序。

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

程序调试主要有4大功能区:模拟器、编辑器、调试器和云开发。

1.模拟器

模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的API模拟器能够呈现出正确的状态,如图1-14所示。

图1-14 模拟器

2.编辑器

微信小程序编辑器可以对当前项目进行代码编写和文件的添加、删除及重命名等基本操作,如图1-15所示。工具目前提供了对5种文件的编辑功能:wxml、wxss、js、json、wxs,并具有图片文件的预览功能。同大多数编辑器一样,工具提供了较为完善的自动补全功能:js文件编辑能帮助开发者补全所有的API及相关的注释解释,并提供代码模板支持;wxml文件编辑能帮助开发者直接写出相关的标签和标签中的属性;json文件编辑能帮助开发者补全相关的配置,并给出实时的提示。

图1-15 微信小程序编辑器

单击上方“预览”功能按钮,开发工具会自动编译和构建代码,并生成代码包上传到微信服务器,成功后将会显示该项目的二维码,开发者用微信扫描二维码即可在手机上看到相应项目的真实表现。

3.调试器

调试器分为11个功能模块:Console、Sources、Network、Security、Mock、AppData、Audits、Sensor、Storage、Trace和Wxml。

Console模块有两大功能:开发者输入和调试代码,以及微信小程序的错误输出,如图1-16所示。Sources模块用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译,所以在Sources模块中,开发者看到的文件是处理之后的脚本文件,开发者的代码都会被包裹在define函数中。Network模块用于观察和显示request和socket的请求情况。

Security、Mock、Audits和Trace模块分别可以对小程序进行安全认证、数据模拟、体验评分和性能监控。AppData模块用于显示当前项目当前时刻appdata的具体数据,实时地反馈项目数据情况,用户可以在此处编辑数据,数据结果将及时反馈到界面上。Sensor模块主要有两个功能,分别用于选择模拟地理位置和模拟移动设备表现(用于调试重力感应API)。Storage模块用于显示当前项目使用wx.setStorage或wx.setStorageSync后的数据存储情况。Wxml模块用于帮助开发者开发Wxml转化后的界面,如图1-17所示。在这里可以看到真实的页面结构及结构对应的WXSS属性,同时可以修改对应的WXSS属性,在模拟器中实时看到修改的情况。

图1-16 Console模块

图1-17 Wxml模块

4.云开发

云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,开发者无须搭建服务器,使用平台提供的API进行核心业务开发,即可实现快速上线和迭代。同时,这一功能同开发者已经使用的云服务相互兼容,并不互斥。

单击微信小程序开发工具的“云开发”模块,会弹出云开发控制台窗口,如图1-18所示。云开发控制台主要包括运营分析、数据库、存储和云函数4个模块。开发者可以使用云开发的云函数、数据库、存储和云调用等功能。

图1-18 云开发控制台