微信小程序开发教程(基础篇)2-微信小程序结构概览

在上一篇教程的最后，咱们生成了一个相似"Hello World"的小程序，这个过程当中没有编写任何一行代码。
在新建一个项目后，微信小程序会生成一个默认的程序框架，后续程序的开发工做都在这个框架上进行。这个默认框架包含下面几部分：

app.xx

每一个微信小程序都会包含app.js, app.json, app.wxss 三个文件，其中app.js文件包含了程序的逻辑实现代码，app.json是一个全局配置文件，app.wxss是一个全局样式文件。后面会详细介绍每一个文件的内容和做用。

pages 目录

pages目录包含了程序当前的页面文件，以默认生成的程序为例，该目录下包含了index，logs两个目录，说明程序包括index和logs两个页面。

以index为例，该目录下包含index.js，index.wxss，index.wxml3个文件，其中js是代码文件，wxss是样式文件，wxml是页面结构描述文件。

熟悉web开发的同窗应该会感受很熟悉。微信小程序的开发模式确实和web开发很类似。目前逻辑部分仅支持javascript语言，并使用wxml(相似html)和wxss(相似css)来描述页面的结构和样式。此处的javascript和web中是彻底同样的，但由于不是运行在浏览器环境中，所以没法使用 windows，document等对象，天然也没法使用jquery等第三方库。而wxml，wxss的语法和html，css也是十分相近的。

页面也一样能够包含一个index.json文件用于配置，不过这不是必须的。

一般一个完整的微信小程序包含上面两部分，固然咱们也能够定义本身的目录用于存放公共代码和程序须要的其它文件。

app.json

打开app.json文件,能够看到以下代码

{
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }

其中pages部分包含了程序的页面，这样框架就能知道从哪里找到页面文件。而window部分包含了程序窗口的一些配置。详细的配置项能够参考配置 小程序

app.wxss

app.wxss文件包含了全局的样式信息，在默认生成的程序中，只有一个类选择器.container，该类型在index.wxml和 logs.wxml中有使用到。

app.js

该文件包含了程序的主体流程代码实现，关于该部分的分析请见下一篇教程。