1.首先前往开发者工具下载安装开发工具：

2.安装后微信扫码，并填写自己的AppID选择自己的项目目录后登录：

登陆后点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。

3.代码构成：可以看到在项目的根目录有一个 app.json 和 project.config.json，在app.json中是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等，内容如下：

project.config.json的作用：你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。内容如下：

4.app.js（交互逻辑）响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。本js中写的是获取微信的头像，显示信息（hello word！）以及点击它们时所触发的事件，代码如下：

下面在page中再建一个login目录用来写登录页面，login.xml中写页面的模板，相当于html：

在login.wxss中写模板的样式，相当于css：

login.js中写当点击登陆时所触发的事件：

页面显示：