在目錄樹下，點擊pages目錄，點擊index目錄，點擊logs目錄，點擊utils目錄，打開一切可以打開的目錄，唯有如此，方能爽爽地窺探整個目錄結構的全貌，方能更好地熟悉配置文件、應用文件和頁面文件的應用。

2.1 配置文件

工程配置文件project.config.json，用來配置appid、項目名稱、調試基礎庫，還有云開發的文件夾路徑。如果你不想開發微信小程序了，不想在IT界混了，那你大可毫不留情地刪除它，否則請保留。

索引配置文件sitemap.json，用於配置頁面是否可被索引(搜索)。 action為allow表示同意索引，disallow表示不同意；page為*表示所有頁面可被索引，pages/index/index則指定某個頁面可被索引。

如果刪除sitemap.json文件，則默認為所有頁面都允許被索引。在實際開發產品時，幾乎都是用默認，既aciton為allow的情況。細的規則在用到時，上網找一下就好了。

2.2 應用文件

一個小程序項目，在根目錄下會有3個應用文件，一個是全局業務邏輯文件app.js，一個是公共配置文件app.json，還有一個是公共樣式表文件app.wxss。在這3個文件中，app.js和app.json是不可刪除，是必須有的文件。

1. app.js

打開文件的那一瞬間，我才知道：人生遇到的人很多，但真正懂你的人卻寥寥無幾。懂你的人，即使你不說話，他也知道你的喜怒哀樂。不懂你的人呢，就給你一大堆代碼，也不管你是否有了基礎。如果有基礎，我看這個幹啥，如果沒有，我看這個幹啥？

清空onLaunch裡面的代碼，只留一個空方法就好。好看的皮囊千篇一律，有趣的靈魂萬里挑一。App()必須且只能在app.js中調用一次，否則會出現無法預期的後果。

在onLaunch或其他函數中，可通過this(App實例)調用globalData全局變量。

<code>//app.js
App({
  onLaunch: function () {
\t\tlet user = this.globalData.userInfo;
  },
  globalData: {
    userInfo: null 

  }
})/<code>

在App()裡，除了onLaunch，還有onShow、onError等函數。

備註：當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並沒有直接銷燬而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。

如果想在onLaunch或onShow函數中，獲取相關參數內容，只要帶上參數option一起飛就可以了。

<code>//app.js
App({
  /**
   *啟動執行的初始化方法
   * 首次打開時執行，全局只觸發一次
   */
  onLaunch: function(options) {
    console.log('page:', options.path);
  },
  //小程序啟動或從後臺進入到前臺時觸發
  onShow: function(options) {
    console.log('scene:', options.scene);
  },
  //全局變量
  globalData: {
    userInfo: null
  }
})/<code>

輸出結果：

<code>page: pages/index/index
scene: 1001/<code>

options可以獲取的值列表

2. app.json

全局配置文件，可配置且必須配置的頁面路徑；可配置窗口風格，如標題欄背景色和標題；可配置全局tab標籤、網絡超時時間和多tab等。常用配置項列表如下。

pages

每一項代表對應頁面的路徑和文件名(不用後綴)，數組的第一項為首頁。小程序添加或刪除頁面時，必須跟pages同步。

<code>"pages": [
  "pages/index/index",
  "pages/logs/logs"
 ]/<code>

window

用於設置小程序的狀態欄、導航條、標題、窗口背景色。

類型中的HexColor為十六進制顏色值，如"#ff0000"。屬性backgroundColor配置的窗口背景色，在下拉刷新或上拉加載時才能見到。如果要配置頁面背景色，可到app.wxss進行全局配置或到index.wxss進行單個頁面配置。

<code>"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#00a24d",
  "navigationBarTitleText": "導航欄標題",
  "backgroundColor": "#cccccc",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true
}/<code>

tabBar

如果小程序是一個多 tab 應用，可以通過tabBar配置項指定tab欄的表現，以及 tab 切換時顯示的對應頁面。tab數目最少 2 個、最多 5 個。

其中 list 接受一個數組，數組中的每個項都是一個對象，屬性列表。

圖標大小限制為40kb，建議尺寸為 81px * 81px，當postion為top，既tab在頂部時，iconPath和selectedIconPath無效。

在項目根目錄下新建images目錄，上網搜索“首頁”、“日誌”圖標。圖標默認顏色為：#8b8b8b，選中時顏色為：#00a24d，大小為81*81。如果實在不想折騰，那就關注公眾號半碼，輸入:芝麻開門，獲取圖標下載地址。

<code>"tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#8b8b8b",
    "selectedColor": "#00a24d",
    "list": [
      {
        "iconPath": "images/index.png",
        "selectedIconPath": "images/index_p.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "iconPath": "images/log.png",
        "selectedIconPath": "images/log_p.png",
        "pagePath": "pages/logs/logs",
        "text": "日誌"
      }
    ]
  }/<code>

networkTimeout

網絡請求的超時時間，默認為60000毫秒，既1分鐘，在調用wx.uploadFile上傳文件，wx.downloadFile下載文件，wx.request上傳/下載數據和wx.connectSocket網絡通信接口時會用到。

<code>"networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }/<code>

requiredBackgroundModes

配置在後臺運行的能力，目前只支持audio:後臺播放音樂和location:後臺定位兩項。

<code>"requiredBackgroundModes": [
   "audio",
   "location"
 ]/<code>

navigateToMiniProgramAppIdList

當前小程序需要使用 wx.navigateToMiniProgram 接口跳轉到其他小程序時，需要先在配置文件中聲明需要跳轉的小程序appId 列表，最多允許填寫 10 個。

<code>navigateToMiniProgramAppIdList

當前小程序需要使用 wx.navigateToMiniProgram 接口跳轉到其他小程序時，需要先在配置文件中聲明需要跳轉的小程序appId 列表，最多允許填寫 10 個。/<code> 

permission

小程序用到敏感功能,如獲取地理位置時，需要彈窗詢問用戶，用戶點擊同意後才可調用接口獲取相關信息，如經緯度。詢問窗口上的內容，就是這裡的desc值。

<code>"permission": {
    "scope.userLocation": {
      "desc": "唯有授予位置權限，才好找你吹牛皮"
    }
  }/<code>

3. app.wxss

WXSS是一套樣式語言，用於描述WXML文件裡的組件樣式，決定組件應該怎麼顯示。為了可對wxss資源進行復用，小程序對CSS進行了擴充，使其支持：通過@import語句後接外聯樣式表的相對路徑並用;結束的方式導入樣式。

app.wxss為公共樣式表，不用顯示引入，便可在頁面文件wxml中使用。

<code>/** common.wxss **/
.bg {
    background-color: #cccccc;
}

/**app.wxss**/
@import "common.wxss";

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} /<code>

2.3 頁面文件

一個小程序應用，由index，logs等多個頁面組成。一個頁面，包含4個同名，不同後綴的文件，它們分別是負責配置的json，佈局的wxml，樣式的wxss和業務邏輯的js。其中，wxml和js是不可刪除，是必須有的文件。

1. index.json

每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋app.json的window中相同的配置項。

以上屬性的含義跟app.json裡的是一模一樣的，我就不重複講了，再講的話，怕你用時間跟我換金錢。

<code>{ 

  "navigationBarTitleText": "首頁",
  "navigationBarTextStyle": "black"
}/<code>

我沒錢，只好說下頁面json文件才有的disableScroll和usingComponents屬性。disableScroll默認為false，設置為true時頁面不能上下滾動。usingComponents用來引入第3方組件，唯有在json文件中引入的，才可以在wxml文件中使用。這個只是示例代碼，等講到組件時，就自然明白了。

<code>{
  "usingComponents": {
    "mp-cells": "../../components/cells/cells",
    "mp-cell": "../../components/cell/cell"
  },
  "disableScroll": true
}/<code>

2. index.js

在頁面js文件中，可在Page()裡面指定頁面的初始數據、生命週期回調、事件處理函數等；可在外面引入模塊和getApp()等。

<code>const util = require('../../utils/util.js')
const app = getApp()

Page({
  data: {
    motto: 'Hello World'
  },
  //自定義函數
  bindViewTap: function() {},
  //頁面加載時觸發
  onLoad: function() {}
})/<code>

初始化數據的data，在頁面第一次渲染時使用。自定義函數bindViewTap，綁定頁面組件，在用戶觸發時調用。onLoad為生命週期函數，在頁面加載時觸發，可通過this調用自定義函數。有關函數的更多內容，咱騎驢看唱本，走著瞧。

3. index.wxml

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，可以構建出wxml頁面的結構。關於WXML的更多內容，在後面會花多點篇章、花多點時間、花多點心思進行詳細的介紹。

<code>
<view>
    <text>{{motto}}/<text>
/<view>/<code>

4. index.wxss

在page的 wxss文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

<code>/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
}

.usermotto {
  margin-top: 200px;
}/<code>

能堅持看到這的人，都是能做事的碼農，如果能答對我要問的問題，肯定會讓他人佩服得五體投床的。那麼問題就來了：仔細觀察上面index.wxss裡的內容，猜一猜哪一個東西在CSS是沒見過的？

沒錯，rpx在CSS裡是不曾有過的，你猜對沒？--如果猜對的話，我就五體投床去了，如果沒猜對的話，我就五體投床去了，因為五體投地還得洗衣服。

rpx為小程序特有的尺寸單位，可解決屏幕寬度進行自適應的問題。它以屏幕寬為750rpx為基準。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

猜對上面問題的人，給你10分鐘，一邊嘚瑟去吧。沒猜對的人，趕緊抓緊機會，猜猜.userinfo和.usermotto用的是哪種選擇器？

沒錯，答案就在下表中。你真聰明！

好了，項目文件就這樣了，沒什麼要說的了。如果你還沒搞懂的話，就從頭到尾再多學幾遍，如果你還沒搞懂的話，就從頭到尾再多學幾遍，直到能去框架語法為止。

閱讀更多 半碼 的文章

關鍵字: 一個 程序 Pages