微信小程序开发手记之一：项目的代码结构

编码前的准备工作

1. 登陆微信开发者账号。
   如有账号，直接登陆，没有，申请一个即可。输入账号密码登陆时，需要手机扫码确认。

2. 查看文档
   登陆后台后，在网页右上角，点击文档，就能进入文档界面，与我们密切相关的就是开发模块
   

可以看到，在开发模块中又细分了6个子模块。

• 简易教程
  这个子模块中有官方提供的组件+API的演示demo，还可以扫码安装demo小程序，同时，也能从这里下载开发工具。

• 框架
  这里介绍的是小程序的项目结构

• 组件
  介绍所有的组件及使用方法

• API
  介绍所有的API，包括获取用户信息，本地缓存，支付功能等。

• 工具
  提供小程序开发所使用的小工具的下载地址

• Q&A
  提供了一些问题的答案，同时还有开发者社区。

打开开发工具

1. 第1张图是打开开发工具时的第一个界面，需要扫码登陆。
2. 第2张图是扫码成功后的界面，点击第一个小程序开发。
3. 第3张图，在这里可以添加项目，也可以打开之前的项目。如果是第一次打开，那么只有添加项目的按钮，点击添加项目。
4. 第4张图，在第一个输入框内需要使用AppID，获取的方式查看这里。

ok！经过了上面4步，我们终于打开了开发工具

上图展示的是编辑状态下的结构

• 第2个绿框是小程序运行的界面，相当于模拟器

• 第3个黑框是项目代码的结构数

• 第4个黄框是我们编辑代码的地方。

• 第1个红框中，有如下6个部分

  • 编辑，上面说的就是编辑状态
  • 调试，在这里可以查看控制台，一些打印能在这里看到
  • 项目，这里有一个预览功能，可以通过扫码，将我们的小程序安装到手机上。
  • 编译，顾名思义，就是编译小程序代码。ctrl+s保存代码时，也会编译一次。
  • 后台/前台，前台时展示场景值，也可以在这里查看场景值。
  • 缓存，在这里可以清除3种缓存，数据存储，文件存储，授权数据。

下面，我们说一下项目结构，也就是上图中第3个框和第4个框。

项目结构

这部分对应文档中的框架部分。
一个完整的小程序，包含描述整个项目的app文件系统（app.js，app.json，app.wxss）和各个page（每个page包含js，json，wxml，wxss）。其中，js文件处理逻辑，json存放配置，wxml存放页面结构，wxss存放样式表。

• app文件系统
  app.js，app.json，app.wxss这3个文件放在项目的根目录下，其中app.wx