体验微信小程序

本章会详细介绍微信小程序工具以及微信小程序结构，包括微信小程序工具操作、目录结构、常用快捷键等。

2.1 界面与操作

微信小程序开发工具的功能非常强大和便捷，其工具内部集成了代码编辑、开发调试及程序发布等功能，微信小程序开发工具界面如图21所示。

微信小程序开发工具界面基本划分为四大区域：顶部菜单区域、导航菜单区域、目录文件&模拟运行区域、编辑&调试开发区域。顶部菜单区域和导航菜单区域是固定的，目录文件&模拟运行区域和编辑&调试开发区域会根据选择导航菜单的不同功能而有所不同。

顶部菜单区域在开发小程序的过程中使用的机会并不多，其中“设置”页面用于配置开发模拟器运行程序时连接的网络代理（见图22）。“动作”页面用于刷新、后退、前进等操作。“帮助”页面用于显示开发工具的版本和版权声明等信息。导航菜单区域是开发者经常使用的功能区域。特别是其中的编辑和调试的功能对开发者来说是非常重要的功能。下面重点介绍这两个功能。

图21 开发工具主界面

图22 设置页面

2.2 编辑功能

编辑区分为两个部分，在右侧的编辑区域可以对当前项目进行编写、文件添加和删除以及重命名等基本操作。在左侧的模拟器区域可以实时预览编辑的情况，如图23所示。编辑器同时也提供了比较完善的自动补全和自动保存功能，编写代码后，工具会自动帮助用户保存当前代码为编辑状态，如果直接关闭工具或者切换项目，也不会丢失当前代码的编辑状态。但是要注意，处于编辑状态的代码只保存到工具内部，并没有写到硬盘上，只有手动保存文件后，修改的内容才会写到硬盘上，并触发实时预览。

图23 编辑区页面

2.3 调试功能

调试工具分为七大功能模块：Console、Sources、Network、Storage、AppData、Wxml和Sensor，如图24所示。

图24 调试工具选择区（1） Console选项卡有以下两大功能。

① 开发人员可以在此输入和调试代码，如图25所示。

图28 Network页面（4） Storage选项卡用于显示当前项目使用wx.setStorage或者wx.setStorageSync后的数据存储情况，如图29所示。

图29 Storage页面（5） AppData选项卡的主要功能是显示当前项目在当前时刻AppData的具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上，如图210所示。

图210 AppData页面（6） Wxml选项卡的主要功能是帮助开发者开发WXML转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性，同时可以通过修改对应的wxss属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的WXML代码，如图211所示。

图211 Wxml页面（7） Sensor选项卡有两大功能。

① 开发人员可以在这里选择模拟地理位置，如图212所示。

图212 设置模拟地理位置② 开发人员可以在这里模拟移动设备表现，用于调试重力感应API，如图213

图213 调试模拟器重力感应

2.4 项目功能编辑器

项目选项卡主要用于显示和设置项目的信息，其中显示的信息包括图标、AppID、本地开发目录、最新更新时间、最近上传时间以及代码包大小，如图214所示。· 预览：指上传源码到微信服务器并成功后会生成一个二维码，开发者用最新版本的微信扫描二维码后，即可在手机上体验到最新的效果。

图214 项目设置页面· 上传：指上传源码到微信服务器后，开发者可以在微信管理后台看到本地提交情况，此功能只限于管理员微信号操作。

· 开启ES6转ES5：在微信0.10.101000以及之后版本的开发工具

中，会默认使用babel将开发者代码中的ES6语法转换为三端都能很好支持的ES5代码，帮助开发者解决因环境不同所带来的开发问题。

开发者可以在项目设置中关闭这个功能。

· 开启上传代码时样式文件自动补全：开启此功能后，开发工具会自动检测并补全缺失样式。

· 开启代码压缩上传：开启此功能后，会在上传代码时帮助开发者压缩代码，减小代码包的体积。

· 监听文件变化，自动刷新开发者工具：开启此功能后和当前项目相关文件改变时，会自动帮助开发者刷新模拟器。

· 开发环境不校验请求域名及TLS版本：开启此功能后，开发工具在开发环境中将不会校验安全域名和TLS版本。

2.5 常用快捷键

为了提高开发效率，微信小程序的编辑器中设置了很多快捷键供开发者使用，下面介绍一些常用的快捷键的功能，如表21所示。

表21

2.6 项目的目录与文件结构

在创建小程序项目时，小程序开发工具会默认生成一些文件，这些文件就是小程序的基本结构。除此之外，在开发过程中，可以根据产品需求自定义小程序的目录和文件，本章会简单介绍一下微信小程序的结构。

项目目录

• 程序