全域性的樣式（app.wxss）與通用佈局

在小程式開發的時候，大多時候，頁面的佈局都是基本相同的。因此，頁面佈局也就形成了固定的套路。常見的佈局及全域性樣式如下：

index.wxml檔案

<view class='container'>
  <scroll-view scroll-y="true" class='page-body' bindscrolltolower="loadMore">
        <!-- 在這裡編寫頁面的結構 -->
  </scroll-view>
</view>

佈局解釋：

<view class='container'></view>

<scroll-view scroll-y="true" class='page-body' bindscrolltolower="loadMore"></scroll-view>  表示可滾動檢視區域。

app.wxss檔案

/**app.wxss**/
.page{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.container{
  display: flex;
  /* 縱向排列 */
  flex-direction: column;
  /* 每項居中 */
  align-items: center;
  /* 兩端居中 */
  justify-content: space-around;
  box-sizing: border-box;
  font-family: '微軟雅黑';
}
.page-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 1300rpx;
}
 

樣式解釋：

.page 表示小程式特有的頁面最大的外層容器。另外，其他的解釋見上面程式碼的註釋。