下载并安装微信开发者工具

首先下载微信小程序开发者工具并安装，开发者工具安装完成后我们就可以打开了，第一次打开需要用微信扫描二维码登录，用手机微信扫描后确认登录即可。

登录成功后，如果第一次使用该工具，会弹出创建项目的窗口，如下图所示：

在创建过程中，如果选择的本地文件夹为空文件夹，会出现“在当前目录创建项目”的勾选框。为了帮助新手了解微信小程序的基本代码结构，请勾选该选项。勾选之后，开发者工具会帮我们在开发目录下生成一个简单的demo，如下图所示：

以下是项目代码结构的解释：

微信小程序中的文件类型有四种

js ---------- 文件

json --------项目配置文件，负责窗口颜色等。

wxml-------类似于HTML文件

wxss ------- 类似CSS文件

根目录中以“app”为名的四类文件是程序入口文件。

应用程序.json

这个文件必须存在，如果不存在IDE会报错，因为微信框架用这个作为配置文件入口，你只需要创建这个文件，在里面写一个花括号就可以了。后面我们会在这里全局配置整个小程序，记录页面组成，配置小程序的窗口背景色，配置导航栏样式，配置默认。

应用程序.js

这个文件必须存在，如果没有会报错！不过这个文件只需要创建，什么都不用写，后面我们可以在这个文件中监控、处理小程序的生命周期函数、声明全局变量等。

应用程序.wxss

此文件不是必需的。因为它只是一个全局 CSS 样式文件

应用程序文件

这个不是必须的，而且这个不是指主界面~因为小程序的主页面是由JSON文件中的配置决定的

创建一个简单的

app.js文件管理整个程序的生命周期，所以在其中添加如下代码：（输入App IDE会提示）

具体API解释如下

json文件负责配置颜色，我们只需要在里面添加如下代码即可，下图为参数说明！

参数说明

现在让我们继续编写我们的第一个界面。

为了美化页面，我们使用了 wxml 和 wxss 文件

为了简化程序代码结构，我们需要在根目录下新建一个文件夹，名字随意，我们叫它这里，然后在文件夹中新建一个文件夹，名字随意，我们叫它这里，然后我们创建一个.wxml文件，在里面写入如下代码

然后创建一个.wxss文件，在里面写入以下代码

然后我们创建一个.js文件，在文件中输入如下代码（输入Page后IDE会提示）

该函数解释如下：