第一次接触开发工具：

在开发工具中创建小程序后，它包含2个目录和4个文件。您可以看到版本号，菜单栏，微信头像以及一些功能菜单等（图3-1）。

图3-1

这里可以模拟手机中小程序的真实状态（图3-2）。

图3-2

框架结构：

HTML页面中带有扩展名“ .html”，“。css”和“ .js”的文件对应于[]中带有扩展名“ .wxml”，“ .wxss”和“ .js”的文件。 k17]页中的文件。

此处（图3-3））位于app开头的三个文件（app.js，app.json，app.jswxss）是小程序的主要描述文件，它们不属于任何文件夹，放在项目的常规目录下，名称也是固定的，app.js用于注册小程序； app.json是小程序的主要配置文件； app.jswxss是样式文件，可以共享。第四个文件（project.cinfig。json）是开发工具的配置项目。通常不要更改这四个项目。

图3-3

中的每个文件

pages目录代表小程序的每一页，而utils是放置通用代码的位置。除了这些，还有放置音频，视频和图片的地方。这些目录可以在主目录中创建（图3-4），

图3-4

框架结构规定必须具有相同的文件名（图3-5），目的是要具有清晰的层次结构并便于管理。

图3-5

调试工具：

调试工具中常用的是“控制台”和“ Wxml”。 “控制台”是可以显示错误，记录操作等的控制面板；通过修改“ Wxml”中的代码，您可以在模拟器中看到显示内容（图3-6）。

图3-6