小程序項(xiàng)目結(jié)構(gòu)分析

小程序項(xiàng)目結(jié)構(gòu)分析：

• app.js文件是小程序的入口文件（小程序從該文件開始執(zhí)行）。
• app.wxss文件是小程序的全局樣式文件。
• pages文件夾用來放置小程序的頁面。
  • wxml 模板文件，類似于HTML文件。
  • wxss 樣式文件，類似于css文件。
  • js 文件，用于處理js的交互邏輯，與原生js作用類似。
  • json文件，用于當(dāng)前頁面的配置。
• utils文件夾用于提供一些工具方法。

├── app.js ...................................................... 小程序入口文件
├── app.json .................................................... 小程序全局配置
├── app.wxss .................................................... 小程序全局樣式
├── pages ....................................................... 所有頁面目錄
│   ├── index ................................................... index頁面目錄
│   │   ├── index.js ............................................ index頁面業(yè)務(wù)邏輯
│   │   ├── index.wxml .......................................... index頁面布局結(jié)構(gòu)
│   │   └── index.wxss .......................................... index頁面布局樣式
│   └── logs .................................................... logs頁目錄
│       ├── logs.js ............................................. logs頁面業(yè)務(wù)邏輯
│       ├── logs.json ........................................... logs頁面配置文件
│       ├── logs.wxml ........................................... logs頁面布局結(jié)構(gòu)
│       └── logs.wxss ........................................... logs頁面布局樣式
├── project.config.json ......................................... 開發(fā)工具配置文件
└── utils ....................................................... 公共邏輯
    └── util.js ................................................. 實(shí)用工具

小程序基本配置

網(wǎng)頁編程采用的是HTML+CSS+JS這樣的組合，其中HTML是用來描述當(dāng)前這個(gè)頁面的結(jié)構(gòu)，CSS 是用來描述頁面的樣式，JS通常是用來處理這個(gè)頁面和用戶的交互。

在小程序中也有類似的處理方式，只是語法不同而已，相應(yīng)的小程序中提供了WXML+WXSS+JS的方式。

• wxml（模板）
• wxss（樣式）
• js（交互邏輯）
• json（配置文件）

全局配置

通過 app.json 文件對(duì)小程序進(jìn)行全局配置，如頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

app.json 配置清單：

• 小程序默認(rèn)打開的頁面是pages中的第一個(gè)路徑
• 所有的小程序頁面都需要在pages下配置路徑

示例代碼：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/my/my",
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#262626",
    "navigationBarTitleText": "主頁",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "backgroundColor": "#FECA49",
    "color": "#D78B09",
    "selectedColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "static/icons/home-default.png",
        "selectedIconPath": "static/icons/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "卡券",
        "iconPath": "static/icons/ticket-default.png",
        "selectedIconPath": "static/icons/ticket-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/icons/face-default.png",
        "selectedIconPath": "static/icons/face-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意：

1. 在 app.json 中配置 tabBar 時(shí)所設(shè)置的圖標(biāo)只支持本地資源路徑。不能使用網(wǎng)絡(luò)路徑。

頁面配置

每個(gè)頁面可以有不同的表現(xiàn)，通過 pages 目錄下的 .json 文件，如 logs.json ，實(shí)現(xiàn)頁面的局部配置。但是只能設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

示例代碼：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#eee",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的"
}