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

4.1 index.json

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

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

{
  "navigationBarTitleText": "首頁",
  "navigationBarTextStyle": "black"
}

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

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

4.2 index.js

在頁面js檔案中，可在Page()裡面指定頁面的初始資料、生命週期回撥、事件處理函式等；可在外面引入模組和getApp()等。

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

Page({
  data: {
    motto: 'Hello World'
  },
  //自定義函式
  bindViewTap: function() {},
  //頁面載入時觸發
  onLoad: function() {}
})

初始化資料的data，在頁面第一次渲染時使用。自定義函式bindViewTap，繫結頁面元件，在使用者觸發時呼叫。onLoad為生命週期函式，在頁面載入時觸發，可通過this呼叫自定義函式。有關函式的更多內容，咱騎驢看唱本，走著瞧。

4.3 index.wxml

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

<!—pages/index/index.wxml-->
<view class="container">
    <text class="user-motto">{{motto}}</text>
</view>

4.4 index.wxss

在page的 wxss檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

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

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

.usermotto {
  margin-top: 200px;
}

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

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

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

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

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

好了，專案檔案就這樣了，沒什麼要說的了。如果你還沒搞懂的話，就從頭到尾再多學幾遍，如果你還沒搞懂的話，就從頭到尾再多學幾遍，直到能去基礎語法為