微信小程式開發基礎篇之結構概覽（2）

微信小程式開發教學(基礎篇)1-初識微信小程式

在上一篇教學的最後，我們產生了一個類似"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

該檔案包含了程式的主體流程程式碼實現，關於該部分的分析請見下一篇教學。

以上是微信小程式開發基礎篇之結構概覽（2）的詳細內容。更多資訊請關注PHP中文網其他相關文章！