微信小程式入門教程之二：頁面樣式

阮一峰發表於2020-10-27
微信小程式

這個系列的上一篇教程，教大家寫了一個最簡單的 Hello world 微信小程式。

但是，那只是一個裸頁面，並不好看。今天接著往下講，如何為這個頁面新增樣式，使它看上去更美觀，教大家寫出實際可以使用的頁面。

所有示例的完整程式碼，都可以從 GitHub 的程式碼倉庫下載。

一、總體樣式

微信小程式允許在頂層放置一個app.wxss檔案，裡面採用 CSS 語法設定頁面樣式。這個檔案的設定，對所有頁面都有效。

注意，小程式雖然使用 CSS 樣式，但是樣式檔案的字尾名一律要寫成.wxss。

開啟上一篇教程的示例，在專案頂層新建一個app.wxss檔案，內容如下。


page {
  background-color: pink;
}

text {
  font-size: 24pt;
  color: blue;
}

上面程式碼將整個頁面的背景色設為粉紅，然後將<text>標籤的字型大小設為 24 磅，字型顏色設為藍色。

開發者工具匯入程式碼之後，得到了下面的渲染結果。

可以看到，頁面的背景色變成粉紅，文字字型變大了，字型顏色變成了藍色。

實際開發中，直接對<text>標籤設定樣式，會影響到所有的文字。一般不這樣用，而是透過class屬性區分不同型別的文字，然後再對每種class設定樣式。

開啟pages/home/home.wxml檔案，把頁面程式碼改成下面這樣。


<view>
  <text class="title">hello world</text>
</view>

上面程式碼中，我們為<text>標籤加上了一個class屬性，值為title。

然後，將頂層的app.wxss檔案改掉，不再直接對<text>設定樣式，改成對class設定樣式。


page {
  background-color: pink;
}

.title {
  font-size: 24pt;
  color: blue;
}

上面程式碼中，樣式設定在 class 上面（.title），這樣就可以讓不同的class呈現不同的樣式。修改之後，頁面的渲染結果並不會有變化。

這個示例的完整程式碼，可以到程式碼倉庫檢視。

二、Flex 佈局

各種頁面元素的位置關係，稱為佈局（layout），小程式官方推薦使用 Flex 佈局。不熟悉這種佈局的同學，可以看看我寫的《Flex 佈局教程》。

下面演示如何透過 Flex 佈局，將上面示例的文字放置到頁面中央。

首先，在pages/home目錄裡面，新建一個home.wxss檔案，這個檔案設定的樣式，只對 home 頁面生效。這是因為每個頁面通常有不一樣的佈局，所以頁面佈局一般不寫在全域性的app.wxss裡面。

然後，home.wxss檔案寫入下面的內容。


page {
  height: 100%;
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

開發者工具匯入專案程式碼，頁面渲染結果如下。

下面解釋一下上面這段 WXSS 程式碼，還是很簡單的。

（1）height: 100%;：頁面高度為整個螢幕高度。

（2）width: 750rpx;：頁面寬度為整個螢幕寬度。

注意，這裡單位是rpx，而不是px。rpx是小程式為適應不同寬度的手機螢幕，而發明的一種長度單位。不管什麼手機螢幕，寬度一律為750rpx。它的好處是換算簡單，如果一個元素的寬度是頁面的一半，只要寫成width: 375rpx;即可。

（3）display: flex;：整個頁面（page）採用 Flex 佈局。

（4）justify-content: center;：頁面的一級子元素（這個示例是<view>）水平居中。

（5）align-items: center;：頁面的一級子元素（這個示例是<view>）垂直居中。一個元素同時水平居中和垂直中央，就相當於處在頁面的中央了。

這個示例的完整程式碼，可以到程式碼倉庫檢視。

三、WeUI

如果頁面的所有樣式都自己寫，還是挺麻煩的，也沒有這個必要。騰訊封裝了一套 UI 框架 WeUI，可以拿來用。

手機訪問 weui.io，可以看到這套 UI 框架的效果。

這一節就來看看，怎麼使用這個框架的小程式版本 WeUI-WXSS，為我們的頁面加上官方的樣式。

首先，進入它的 GitHub 倉庫，在dist/style目錄下面，找到weui.wxss這個檔案，將原始碼全部複製到你的app.wxss檔案的頭部。

然後，將page/home/home.wxml檔案改成下面這樣。


<view>
  <button class="weui-btn weui-btn_primary">
    主操作
  </button>
  <button class="weui-btn weui-btn_primary weui-btn_loading">
    <i class="weui-loading"></i>正在載入
  </button>
  <button class="weui-btn weui-btn_primary weui-btn_disabled">
    禁止點選
  </button>
</view>

開發者工具匯入專案程式碼，頁面渲染結果如下。

可以看到，加入 WeUI 框架以後，只要為按鈕新增不同的 class，就能自動出現框架提供的樣式。你可以根據需要，為頁面選擇不同的按鈕。

這個示例中，<button>元素使用了下面的class。

  • weui-btn：按鈕樣式的基類
  • weui-btn_primary：主按鈕的樣式。如果是次要按鈕，就使用weui-btn_default。
  • weui-btn_loading：按鈕點選後，操作正在進行中的樣式。該類內部需要用<i>元素，加上表示正在載入的圖示。
  • weui-btn_disabled：按鈕禁止點選的樣式。

WeUI 提供了大量的元素樣式，完整的清單可以檢視這裡。

這個示例的完整程式碼，可以到程式碼倉庫檢視。

四、加入圖片

美觀的頁面不能光有文字，還必須有圖片。小程式的<image>元件就用來載入圖片。

開啟home.wxml檔案，將其改為如下程式碼。


<view>
  <image src="https://picsum.photos/200"></image>
</view>

開發者工具載入專案程式碼，頁面的渲染結果如下，可以顯示圖片了。

<image>元件有很多屬性，比如可以透過style屬性指定樣式。


<view>
  <image
    src="https://picsum.photos/200"
    style="height: 375rpx; width: 375rpx;"
  ></image>
</view>

預設情況下，圖片會佔滿整個容器的寬度（這個例子是<view>的寬度），上面程式碼透過style屬性指定圖片的高度和寬度（佔據頁面寬度的一半），渲染結果如下。

當然，圖片樣式不一定寫在<image>元件裡面，也可以寫在 WXSS 樣式檔案裡面。

這個示例的完整程式碼，可以到程式碼倉庫檢視。

五、圖片輪播

小程式原生的<swiper>元件可以提供圖片輪播效果。

上面頁面的圖片上面，有三個提示點，表示一共有三張圖片，可以切換顯示。

它的程式碼很簡單，只需要改一下home.wxml檔案即可。


<view>
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx;">
    <swiper-item>
      <image src="https://picsum.photos/200"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/250"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/300"></image>
    </swiper-item>
  </swiper>
</view>

上面程式碼中，<swiper>元件就是輪播元件，裡面放置了三個<swiper-item>元件，表示有三個輪播專案，每個專案就是一個<image>元件。

<swiper>元件的indicator-dots屬性設定是否顯示輪播點，autoplay屬性設定是否自動播放輪播。它們的屬性值都是一個布林值，這裡要寫成{{true}}。這種{{...}}的語法，表示裡面放置的是 JavaScript 程式碼，這個放在下一次講解。

這個示例的完整程式碼，可以到程式碼倉庫檢視。

頁面樣式就講到這裡，下一篇教程講解怎麼在微信小程式裡面加入 JavaScript 指令碼，跟使用者互動。

（完）

相關文章