手把手第五篇：簡單編寫小程序的 CSS 樣式

時(shí)間：2023-07-24 02:24:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-24 02:24:02 來源：網(wǎng)站運(yùn)營

手把手第五篇：簡單編寫小程序的 CSS 樣式：在上期文章中，我們主要聊了聊如何寫出一個(gè)簡單的小程序。既然聊到了編寫小程序，那不得不提的就是如何編寫其中的 CSS 樣式內(nèi)容，一起來看看吧。

本期文章屬于《手把手系列教學(xué)》的第五篇，如果你還不太了解這一系列，可以點(diǎn)擊 這里 查看詳情。

一、總體樣式

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

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

打開上一篇教程的示例根目錄 app.ftss 文件，內(nèi)容如下。

由于 FinClip 小程序保持了與微信小程序的高度統(tǒng)一，來降低開發(fā)者的學(xué)習(xí)或遷移門檻，事實(shí)上你也可以直接在 FIDE 中編輯基于微信小程序的項(xiàng)目內(nèi)容，或者將基于微信小程序編輯的內(nèi)容進(jìn)行校驗(yàn)后，同步上傳在 FinClip 之中。

.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}FIDE 初始化小程序頁面已經(jīng)給最外層標(biāo)簽添加了 container 類，此時(shí)在 container 類名下添加一個(gè) color 樣式：

color: #ff0000;保存后頁面重新渲染，文字變?yōu)榧t色：

這就是總體樣式，設(shè)置之后會對所有頁面生效。例如第二個(gè)頁面中元素 view 也擁有class：container，那么它的文字顏色也為紅色。

二、頁面樣式

在小程序每個(gè)頁面路徑下 ftss 文件中樣式內(nèi)容只會影響當(dāng)前頁面。

當(dāng)我們在 index 頁給 view 元素添加一個(gè) class：“unique-class”，并在頁面 ftss 文件中改變 font-size 樣式：

<view class="container unique-class">index頁</view>.unique-class{ font-size: 66px;}此時(shí) page1 頁同樣添加class：“unique-class”，樣式并沒有受到影響

三、行內(nèi)樣式

小程序中也可以給元素設(shè)置行內(nèi)樣式，并且可以使用插值變量。同樣，行內(nèi)樣式優(yōu)先于 class 樣式，與普通 css 規(guī)則一致。

使用差值變量：

改變元素 style 屬性 color 值為自定義變量 fontColor

<view class="container unique-class" style="color: {{fontColor}}"> index頁</view>在頁面 data 中添加 fontColor 變量，賦值為想要的顏色

Page({ data: { motto: 'Hello World', fontColor: '#10aeff' }})同樣，插值變量的方式也可以運(yùn)用到 class 中以達(dá)到相似的效果。

四、尺寸單位

小程序中可以使用 rpx 作為尺寸單位。rpx（responsive pixel）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為 750rpx。如在 iPhone6 上，屏幕寬度為 375px，共有 750 個(gè)物理像素，則 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

合理使用 rpx 會讓小程序體驗(yàn)感更好。

五、樣式導(dǎo)入

使用 @import 語句可以導(dǎo)入外聯(lián)樣式表，@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用 ; 表示語句結(jié)束。

/** common.wxss **/.small-p { padding:5px;}/** app.wxss **/@import "common.wxss";.middle-p { padding:15px;}

六、組件內(nèi)置樣式

小程序提供的內(nèi)置組件定義了自有邏輯和默認(rèn)樣式，以供開發(fā)者快速使用。當(dāng)然開發(fā)者也可以在此基礎(chǔ)上修改為其他樣式和行為。

例如：小程序原生的 <swiper> 組件可以讓開發(fā)者快速使用圖片輪播功能。

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

它的代碼很簡單，改一下 index.fxml 文件，并且在 /assets/images/ 目錄下添加想要輪播的圖片即可。

<view> <swiper indicator-dots="{{true}}" autoplay="{{true}}" style="width: 750rpx; height: 750rpx; text-align: center;"> <swiper-item> <image src="/assets/images/logo.png"></image> </swiper-item> <swiper-item> <image src="/assets/images/logo2.png"></image> </swiper-item> <swiper-item> <image src="/assets/images/logo3.png"></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è)置是否自動播放輪播。它們的屬性值都是一個(gè)布爾值，這里要寫成 {{true}}。

---

本期教程講解了基于 FinClip IDE，對小程序的樣式文件進(jìn)行編寫與調(diào)試的過程。

在下一期的文章中，我們將會一起聊聊如何使用 JSS，服務(wù)端調(diào)用等相關(guān)的內(nèi)容，敬請期待。

本教學(xué)文章均由FinClip工程師出品。