微信小程序開發教程(基礎篇)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

該文件包含了程序的主體流程代碼實現，關於該部分的分析請見下一篇教程。