一個人開發一個產品，小程序從0到1，第4章 頁面文件

一個小程序應用，由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用的是哪種選擇器？

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

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