腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

微信小程序如何設(shè)置基本的頁(yè)面樣式，做出用戶界面UI

更新時(shí)間：2022年12月03日 15:43:41 投稿：yin

這篇文章主要介紹了微信小程序如何設(shè)置基本的頁(yè)面樣式，做出用戶界面UI。如何為這個(gè)頁(yè)面添加樣式，使它看上去更美觀，教大家寫(xiě)出實(shí)際可以使用的頁(yè)面。

一、總體樣式

微信小程序允許在頂層放置一個(gè)app.wxss文件，里面采用 CSS 語(yǔ)法設(shè)置頁(yè)面樣式。這個(gè)文件的設(shè)置，對(duì)所有頁(yè)面都有效。

注意，小程序雖然使用 CSS 樣式，但是樣式文件的后綴名一律要寫(xiě)成.wxss。

打開(kāi)上一篇教程的示例，在項(xiàng)目頂層新建一個(gè)app.wxss文件，內(nèi)容如下。

page {
  background-color: pink;
}

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

上面代碼將整個(gè)頁(yè)面的背景色設(shè)為粉紅，然后將<text>標(biāo)簽的字體大小設(shè)為 24 磅，字體顏色設(shè)為藍(lán)色。

可以看到，頁(yè)面的背景色變成粉紅，文本字體變大了，字體顏色變成了藍(lán)色。

實(shí)際開(kāi)發(fā)中，直接對(duì)<text>標(biāo)簽設(shè)置樣式，會(huì)影響到所有的文本。一般不這樣用，而是通過(guò)class屬性區(qū)分不同類(lèi)型的文本，然后再對(duì)每種class設(shè)置樣式。

打開(kāi)pages/home/home.wxml文件，把頁(yè)面代碼改成下面這樣。

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

上面代碼中，我們?yōu)?code><text>標(biāo)簽加上了一個(gè)class屬性，值為title。

然后，將頂層的app.wxss文件改掉，不再直接對(duì)<text>設(shè)置樣式，改成對(duì)class設(shè)置樣式。

page {
  background-color: pink;
}

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

上面代碼中，樣式設(shè)置在 class 上面（.title），這樣就可以讓不同的class呈現(xiàn)不同的樣式。修改之后，頁(yè)面的渲染結(jié)果并不會(huì)有變化。

二、Flex 布局

各種頁(yè)面元素的位置關(guān)系，稱(chēng)為布局（layout），小程序官方推薦使用 Flex 布局。

下面演示如何通過(guò) Flex 布局，將上面示例的文本放置到頁(yè)面中央。

首先，在pages/home目錄里面，新建一個(gè)home.wxss文件，這個(gè)文件設(shè)置的樣式，只對(duì) home 頁(yè)面生效。這是因?yàn)槊總€(gè)頁(yè)面通常有不一樣的布局，所以頁(yè)面布局一般不寫(xiě)在全局的app.wxss里面。

然后，home.wxss文件寫(xiě)入下面的內(nèi)容。

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

下面解釋一下上面這段 WXSS 代碼，還是很簡(jiǎn)單的。

（1）height: 100%;：頁(yè)面高度為整個(gè)屏幕高度。

（2）width: 750rpx;：頁(yè)面寬度為整個(gè)屏幕寬度。

注意，這里單位是rpx，而不是px。rpx是小程序?yàn)檫m應(yīng)不同寬度的手機(jī)屏幕，而發(fā)明的一種長(zhǎng)度單位。不管什么手機(jī)屏幕，寬度一律為750rpx。它的好處是換算簡(jiǎn)單，如果一個(gè)元素的寬度是頁(yè)面的一半，只要寫(xiě)成width: 375rpx;即可。

（3）display: flex;：整個(gè)頁(yè)面（page）采用 Flex 布局。

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

（5）align-items: center;：頁(yè)面的一級(jí)子元素（這個(gè)示例是<view>）垂直居中。一個(gè)元素同時(shí)水平居中和垂直中央，就相當(dāng)于處在頁(yè)面的中央了。

三、WeUI

如果頁(yè)面的所有樣式都自己寫(xiě)，還是挺麻煩的，也沒(méi)有這個(gè)必要。騰訊封裝了一套 UI 框架 WeUI，可以拿來(lái)用。

手機(jī)訪問(wèn) weui.io，可以看到這套 UI 框架的效果。

這一節(jié)就來(lái)看看，怎么使用這個(gè)框架的小程序版本 WeUI-WXSS，為我們的頁(yè)面加上官方的樣式。

首先，進(jìn)入它的 GitHub 倉(cāng)庫(kù)，在dist/style目錄下面，找到weui.wxss這個(gè)文件，將源碼全部復(fù)制到你的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">
    禁止點(diǎn)擊
  </button>
</view>

開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目代碼，頁(yè)面渲染。

可以看到，加入 WeUI 框架以后，只要為按鈕添加不同的 class，就能自動(dòng)出現(xiàn)框架提供的樣式。你可以根據(jù)需要，為頁(yè)面選擇不同的按鈕。

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

weui-btn：按鈕樣式的基類(lèi)
weui-btn_primary：主按鈕的樣式。如果是次要按鈕，就使用weui-btn_default。
weui-btn_loading：按鈕點(diǎn)擊后，操作正在進(jìn)行中的樣式。該類(lèi)內(nèi)部需要用<i>元素，加上表示正在加載的圖標(biāo)。
weui-btn_disabled：按鈕禁止點(diǎn)擊的樣式。

WeUI 提供了大量的元素樣式，完整的清單可以查看這里。

四、加入圖片

美觀的頁(yè)面不能光有文字，還必須有圖片。小程序的<image>組件就用來(lái)加載圖片。

打開(kāi)home.wxml文件，將其改為如下代碼。

<view>
  <image src="http://m.fzitv.net/images/logo.gif"></image>
</view>

開(kāi)發(fā)者工具加載項(xiàng)目代碼，頁(yè)面渲染，可以顯示圖片了。

<image>組件有很多屬性，比如可以通過(guò)style屬性指定樣式。

<view>
  <image
    src="http://m.fzitv.net/images/logo.gif"
    style="height: 375rpx; width: 375rpx;"
  ></image>
</view>

默認(rèn)情況下，圖片會(huì)占滿整個(gè)容器的寬度（這個(gè)例子是<view>的寬度），上面代碼通過(guò)style屬性指定圖片的高度和寬度（占據(jù)頁(yè)面寬度的一半），渲染結(jié)果。

當(dāng)然，圖片樣式不一定寫(xiě)在<image>組件里面，也可以寫(xiě)在 WXSS 樣式文件里面。

五、圖片輪播

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

上面頁(yè)面的圖片上面，有三個(gè)提示點(diǎn)，表示一共有三張圖片，可以切換顯示。

它的代碼很簡(jiǎn)單，只需要改一下home.wxml文件即可。

<view>
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx;">
    <swiper-item>
      <image src="http://m.fzitv.net/images/logo.gif"></image>
    </swiper-item>
    <swiper-item>
      <image src="http://m.fzitv.net/images/logo.gif"></image>
    </swiper-item>
    <swiper-item>
      <image src="http://m.fzitv.net/images/logo.gif"></image>
    </swiper-item>
  </swiper>
</view>

上面代碼中，<swiper>組件就是輪播組件，里面放置了三個(gè)<swiper-item>組件，表示有三個(gè)輪播項(xiàng)目，每個(gè)項(xiàng)目就是一個(gè)<image>組件。

<swiper>組件的indicator-dots屬性設(shè)置是否顯示輪播點(diǎn)，autoplay屬性設(shè)置是否自動(dòng)播放輪播。它們的屬性值都是一個(gè)布爾值，這里要寫(xiě)成{{true}}。這種{{...}}的語(yǔ)法，表示里面放置的是 JavaScript 代碼，這個(gè)放在下一次講解。

到此這篇關(guān)于微信小程序如何設(shè)置基本的頁(yè)面樣式，做出用戶界面UI的文章就介紹到這了,更多相關(guān)微信小程序設(shè)置頁(yè)面樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: