原生框架开发入门（一） —— 项目初始化和目录结构

上篇教程我们介绍了微信小程序如何申请、注册和配置，并且下载了微信开发者工具，这篇教程我们就来通过微信开发者工具创建第一个微信小程序项目，并且逐步介绍如何通过原生框架开发微信小程序。

创建第一个微信小程序项目

打开微信开发者工具，使用微信扫描二维码登录，就会进入这个入口界面：

选择小程序项目，进入初始化界面，选择项目目录，填写上一篇教程注册的小程序 App ID，最后在下拉列表选择「建立普通快速启动模板」：

点击「确定」，即可进入基于小程序原生框架的示例项目，该项目具备基本的、完整的小程序功能：

最左侧是小程序预览界面，即从微信打开小程序后的入口界面，中间是项目目录结构，最右侧是代码编辑区域，项目主体区域下方是调试面板。关于开发者工具的完整功能介绍，可以参考官方文档，这里就不展开了，下面我们以示例项目为例，介绍原生框架的基本使用。

学院君注：开始之前需要你具备 JavaScript、HTML、CSS 基础，如果你对这些语言不太熟悉，可以通过 MDN 的学习 Web 开发教程快速入门。

目录结构

小程序包含的基本目录结构如上图所示，我们的项目名称是 miniapp，对应的目录结构如下：

testapp
   |---pages
         |---index
               |---index.js
               |---index.json
               |---index.wxml
               |---index.wxss
         |---...
   |---utils
         |---util.js
   |---app.js
   |---app.json
   |---app.wxss
   |---project.config.json

我们从最外层的文件开始介绍：

• app.js：包含小程序公共 JS 代码，相当于整个项目的入口文件，在这里可以启动小程序首页，做全局登录操作，以及其它公共事务等；
• app.json：小程序全局配置文件，包括小程序所有页面（路由），以及一些全局窗口配置，该配置文件支持的所有配置项可以在官方文档查看；
• app.wxss：小程序全局样式代码，在小程序中，没有 HTML 和 CSS 文件，而是通过 WXML 和 WXSS 文件来实现类似的功能，因为微信为小程序定制了一些特有的组件标签和样式语法，原生的 HTML 和 CSS 语法无法实现；
• project.config.json：也是一个配置文件，与 app.json 测试功能不同，该配置文件侧重目录结构配置，比如插件目录、源码目录、打包配置、编译配置，类似前端项目的 package.json 或者 PHP 项目的 composer.json，该配置文件支持的配置项可以在官方文档查看。

utils 目录目前仅包含 util.js 文件，用于定义一些公共的工具函数，类似 Laravel 框架中的 helpers.php 用于存放全局辅助函数。

pages 目录包含了所有的小程序页面，每个页面通过子目录进行管理，小程主要的业务逻辑都包含在这里，比如 index 目录对应首页，logs 目录对应日志页面。以首页子目录 index 为例，每个子目录都包含以下四个文件（文件名和页面目录同名）：

• index.js：首页 JS 代码，页面交互、跳转、数据渲染逻辑都在这里进行；
• index.json：这个文件是可选的，包含首页配置信息，除了前面提到的公共配置之外，每个页面都可以进行自定义配置，如果没有额外配置，可以不添加这个文件，关于页面配置支持的配置项可以参考官方文档；
• index.wxml：首页 WXML（WeiXin Markup Language）文件，把它当做首页的 HTML 视图文件来看就是了，当然，它比传统的 HTML 更强大，后面我们会单独介绍其使用；
• index.wxss：首页 WXSS（WeiXin Style Sheets）文件，同上，把它当做首页的 CSS 样式文件，不过，微信额外提供了一些特殊的语法格式，后面我们会介绍。

这样，我们就将小程序的目录结构和文件含义简单介绍完了，后续在开发具体功能时，我们还会深入编写具体文件代码，从而对每个文件的细节做更深入的阐述。