紹：

騰訊游戲盒子是由騰訊自主研發(fā)的一款專為網(wǎng)頁游戲用戶定制的網(wǎng)頁游戲輔助工具，具有智能加速、防掉線、帳號多開、全屏等特點。

騰訊游戲盒子官網(wǎng)頁面也非常簡單明了，這也是目前很多簡單介紹型網(wǎng)站所采用的風格。頁面下半部分的圓形圖標使用了 CSS3 transform 旋轉(zhuǎn)屬性，當鼠標移動到上面時會順時針旋轉(zhuǎn) 20 度，但 IE6 – IE9 不支持該屬性，所以沒有效果。

演示地址：

https://www.361zy.com/demo/379/

下載地址：

https://cloud.06dn.com/s/qR9SW

解壓碼：

LSr69TPA

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

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

所有示例的完整代碼，都可以從 GitHub 的代碼倉庫^[1]下載。

一、總體樣式

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

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

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

page {
background-color: pink;
}

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

上面代碼將整個頁面的背景色設為粉紅，然后將<text>標簽的字體大小設為 24 磅，字體顏色設為藍色。

開發(fā)者工具導入代碼之后，得到了下面的渲染結(jié)果。

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

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

打開pages/home/home.wxml文件，把頁面代碼改成下面這樣。

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

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

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

page {
background-color: pink;
}

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

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

這個示例的完整代碼，可以到代碼倉庫^[2]查看。

二、Flex 布局

各種頁面元素的位置關(guān)系，稱為布局（layout），小程序官方推薦使用 Flex 布局。不熟悉這種布局的同學，可以看看我寫的《Flex 布局教程》^[3]。

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

首先，在pages/home目錄里面，新建一個home.wxss文件，這個文件設置的樣式，只對 home 頁面生效。這是因為每個頁面通常有不一樣的布局，所以頁面布局一般不寫在全局的app.wxss里面。

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

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

開發(fā)者工具導入項目代碼，頁面渲染結(jié)果如下。

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

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

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

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

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

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

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

這個示例的完整代碼，可以到代碼倉庫^[4]查看。

三、WeUI

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

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

這一節(jié)就來看看，怎么使用這個框架的小程序版本 WeUI-WXSS^[7]，為我們的頁面加上官方的樣式。

首先，進入它的 GitHub 倉庫^[8]，在dist/style目錄下面，找到`weui.wxss`^[9]這個文件，將源碼^[10]全部復制到你的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>

開發(fā)者工具導入項目代碼，頁面渲染結(jié)果如下。

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

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

“

• weui-btn：按鈕樣式的基類

• weui-btn_primary：主按鈕的樣式。如果是次要按鈕，就使用weui-btn_default。

• weui-btn_loading：按鈕點擊后，操作正在進行中的樣式。該類內(nèi)部需要用<i>元素，加上表示正在加載的圖標。

• weui-btn_disabled：按鈕禁止點擊的樣式。

”

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

這個示例的完整代碼，可以到代碼倉庫^[12]查看。

四、加入圖片

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

打開home.wxml文件，將其改為如下代碼。

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

開發(fā)者工具加載項目代碼，頁面的渲染結(jié)果如下，可以顯示圖片了。

<image>組件有很多屬性^[13]，比如可以通過style屬性指定樣式。

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

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

當然，圖片樣式不一定寫在<image>組件里面，也可以寫在 WXSS 樣式文件里面。

這個示例的完整代碼，可以到代碼倉庫^[14]查看。

五、圖片輪播

小程序原生的`^[15]可以提供圖片輪播效果。

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

它的代碼很簡單，只需要改一下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>組件就是輪播組件，里面放置了三個`^[16]，表示有三個輪播項目，每個項目就是一個<image>組件。

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

這個示例的完整代碼，可以到代碼倉庫^[17]查看。

頁面樣式就講到這里，下一篇教程講解怎么在微信小程序里面加入 JavaScript 腳本，跟用戶互動。

注意，由于腳本代碼比較多，這個系列的后兩篇教程將不在微信公號上連載了，大家可以去我的個人網(wǎng)站閱讀。

（完）

參考資料

[1]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos

[2]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/03.css

[3]

《Flex 布局教程》: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[4]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/04.flex

[5]

WeUI: https://github.com/Tencent/weui

[6]

weui.io: https://weui.io/

[7]

WeUI-WXSS: https://github.com/Tencent/weui-wxss/

[8]

GitHub 倉庫: https://github.com/Tencent/weui-wxss/

[9]

weui.wxss:https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss

[10]

源碼: https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/style/weui.wxss

[11]

這里: https://github.com/Tencent/weui-wxss

[12]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/05.weui

[13]

很多屬性: https://developers.weixin.qq.com/miniprogram/dev/component/image.html

[14]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/06.image

[15]

<swiper>組件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

[16]

<swiper-item>組件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html

[17]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/07.swiper