开发工具介绍

创建项目后会进入项目开发界面。开发工具提供了小程序的开发、调试和代码提交等功能。

从上到下，从左到右依次是菜单栏、工具栏、模拟器、编辑器（调试器需要在工具栏中选择调试模式后才会展现并覆盖编辑器）。

调试模式下的调试器

仔细对比不难发现，开发工具的界面与WEB页面制作很相似。

小程序相关简介

获取微信小程序的AppID

登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。

注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序，那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

小程序目录结构

点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，它已经初始化，并包含了一些简单的代码文件。

以下的三个文件非常重要，微信小程序会读取这些文件，并生成小程序实例。

• app.js - .js后缀的是脚本文件
• app.json - .json后缀的文件是配置文件
• app.wxss - .wxss后缀的是样式表文件

我们简单了解一下这三个文件的功能，方便修改和从头学习开发自己的微信小程序。

• app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 API 文档。
• app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解。
• app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

小程序页面结构

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。