微信小程序開發: 小程序源文件結構及含義

本文將對微信小程序源文件結構及含義進行詳細講解，部分描述直接轉載於官方文檔，如有不明問題，可繼續查看小程序官方文檔，傳送門>>>

下面是基本的目錄和文件結構：

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

類型文件說明：

• .json 配置文件
• .wxml 模板文件
• .js javascript邏輯文件
• .wxss 樣式文件

如下將對每種類型文件進行詳細說明。

配置文件

小程序中存在三類配置文件，分別爲：

1. 小程序配置：根目錄下的app.json
2. 工具配置：根目錄下的project.config.json文件
3. 頁面配置：pages/index/目錄(具體頁面目錄)下的index.json

小程序配置文件app.json

app.json 是對當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。【摘自官方文檔】

app.json

{
    "pages": [
        "pages/index/index",
        "pages/reward/reward"
    ],
    "window": {
        "navigationBarTitleText": "猜猜你的真實年齡",
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTextStyle": "white",
        "navigationStyle": "default",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": false
    },
    "tabBar": {
        "color": "#9ca0a3",
        "selectedColor": "#00ae66",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首頁",
                "iconPath": "asset/icon/home.png",
                "selectedIconPath": "asset/icon/home_selected.png"
            },
            {
                "pagePath": "pages/reward/reward",
                "text": "打賞",
                "iconPath": "asset/icon/reward.png",
                "selectedIconPath": "asset/icon/reward_selected.png"
            }
        ]
    },
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "downloadFile": 5000,
        "uploadFile": 5000
    },
    "debug": true
}

pages

接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項表明對應頁面的【路徑+文件名】信息，數組的第一項表明小程序的初始頁面。小程序中新增/減小頁面，都須要對 pages 數組進行修改。

文件名不須要寫文件後綴，由於框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。

window

主要用於設置wxss中沒法自定義的樣式，例如修改小程序的狀態欄、導航條、標題、窗口背景色等。

tabBar

設置小程序底部(或頂部)的tab欄的展現和切換時所展現的頁面。

networkTimeout

設置各類網絡請求的超時時間。

debug

設置是否開啓調試模式。

頁面配置index.json

每個小程序頁面也可使用.json文件來對項目app.json 中的 window 項進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

項目配置文件 project.config.json

小程序開發者工具在每一個項目的根目錄都會生成一個 project.config.json，你在工具上作的任何配置都會寫入到這個文件，當你從新安裝工具或者換電腦工做時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。

詳細參數請參考官方文檔

wxml 模板

用來定義小程序頁面的結構，在wxml中咱們能夠：

1. 使用小程序框架提供的豐富的web組件，提升開發效率；
2. 支持wx:if流程控制，數據綁定等特性；
3. DOM渲染和頁面邏輯分離(相似Vue);

WXSS 樣式

WXSS 具備 CSS 大部分的特性，小程序在 WXSS 也作了一些擴充和修改。

1. 新增了尺寸單位。在寫 CSS 樣式時，開發者須要考慮到手機設備的屏幕會有不一樣的寬度和設備像素比，採用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者能夠免去換算的煩惱，只要交給小程序底層來換算便可，因爲換算採用的浮點數運算，因此運算結果會和預期結果有一點點誤差。
2. 提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你能夠寫一個 app.wxss 做爲全局樣式，會做用於當前小程序的全部頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
3. 此外 WXSS 僅支持部分 CSS 選擇器。

JS 邏輯文件

1. 頁面交互邏輯；
2. API調用；

本章結尾

小程序基礎知識本系列文章只介紹這麼多，接下來將進行項目實戰，敬請關注！

更多內容請你們移步官方文檔：

• 官方提供的小程序入門建教程
• 小程序開發框架文檔
• 小程序內置視圖組件文檔
• 小程序可調用的微信API文檔
• 開發者工具文檔

下期預告

下篇文章將進行小程序實際開發講解，敬請期待。

微信交流羣

微信羣二維碼會定時失效，爲了方便更新，將入羣二維碼放到了Github上 傳送門>>>