四十八、微信小程序开发系统组件
@Author：Runsen
Hello，現(xiàn)在中午，結(jié)果寫完到了下午。還是再復(fù)習(xí)學(xué)習(xí)下小程序的組件，以后開發(fā)項目就有了強(qiáng)大的基礎(chǔ)。來吧，不學(xué)習(xí)就是辣雞。
文章目錄
- 組件
- scroll-view
- swiper
- icon
組件
什么叫組件呢？凡是在軟件開發(fā)中用到了軟件的復(fù)用，被復(fù)用的部分都可以稱為組件，組件的英文也是component。很多人也稱之為控件，控件和組件其實是一個意思只是翻譯的不同而已。
小程序的視圖容器組件分為五個組件，分別是view組件、scroll-view組件、swiper、icon組件、
scroll-view
scroll-view是容器組件，如果該組件的子組件超過scroll-view的高度或?qū)挾?#xff0c;該組件會允許子組件在垂直或水平方向滾動視圖，以便顯示其他沒有顯示的子組件。官方文檔
下面主要介紹如何讓scroll-view垂直滾動。如果要讓scroll-view垂直滾動，需要設(shè)置scroll-y屬性值為true。如果需要設(shè)置scroll-view縱向滑動，那么需要設(shè)置scroll-y屬性值為flase。
<scroll-view scroll-y="true" style="height:200px"><view style="background:black;width:100px;height:100px"></view><view style="background:green;width:100px;height:100px"></view><view style="background:pink;width:100px;height:100px"></view></scroll-view><scroll-view scroll-x="true" style="white-space:nowrap;display:flex"><view style="background:black;width:100px;height:100px;display:inline-block"></view><view style="background:green;width:100px;height:100px;display:inline-block"></view><view style="background:pink;width:100px;height:100px;display:inline-block"></view> <view style="background:white;width:100px;height:100px;display:inline-block"></view> <view style="background:grey;width:100px;height:100px;display:inline-block"></view></scroll-view>具體效果如下。
swiper
有時候，我們總是需要把多張圖片通過輪播圖來展示給用戶，使用戶體驗更佳。同樣，在微信小程序中也會經(jīng)常使用到輪播圖，所以這次小編通過介紹swiper組件使讀者們了解輪播圖的實現(xiàn)方法。
對應(yīng)的官方文檔如下：官方文檔
<swiper indicator-dots='true'autoplay='true'interval='6000'duration='2000'circular='true'><swiper-item><image src='/images/chunjie.jpg'></image></swiper-item><swiper-item><image src='/images/yuer.jpg'></image></swiper-item><swiper-item><image src='/images/chunzi.jpg'></image></swiper-item> </swiper>icon
原生圖標(biāo)只有這么幾個，遠(yuǎn)遠(yuǎn)不夠用啊！
WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，基于小程序自定義組件構(gòu)建。
由微信官方設(shè)計團(tuán)隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，令用戶的使用感知更加統(tǒng)一。
要使用WeUI組件，我們需要到組件下載頁面去下載icon組件：
具體文檔：developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
但更多的是使用打開 Iconfont-阿里巴巴矢量圖標(biāo)庫：https://www.iconfont.cn/
然后點擊第一個圖標(biāo)庫，其詳情如下。這里我們把鼠標(biāo)放到第三個圖標(biāo)——點贊圖標(biāo)上面，會出現(xiàn)三個按鈕，分別是加入購物車、收藏、下載。我們需要點擊加入購物車按鈕。
此時右上角的購物會有紅色的角標(biāo)，點擊一下右上角的按鈕出現(xiàn)以下界面。
此時我們點擊中間的“查看在線鏈接”按鈕，會生成一系列代碼，并在網(wǎng)頁中間顯示。此時我們在 iconfont.cn 的任務(wù)就已經(jīng)完成，我們已經(jīng)拿到了我們想要的圖標(biāo)遠(yuǎn)程鏈接和 Unicode 值。其中剛剛生成的代碼就是圖標(biāo)的遠(yuǎn)程鏈接，點贊圖標(biāo)下邊的 字樣就是圖標(biāo)對應(yīng)的 Unicode 值。這兩個內(nèi)容在下邊編寫微信小程序代碼時會用到。
微信小程序的代碼編寫就比較容易了，首先編寫 WXSS 文件，將剛剛拿到的遠(yuǎn)程字體鏈接直接粘貼到 WXSS 中，然后編寫自定義的 iconfont 樣式，最后在 icon 組件中引用即可。其代碼如下：
@font-face {font-family: 'iconfont'; /* project id 1962872 */src: url('//at.alicdn.com/t/font_1962872_6n23mwderv.eot');src: url('//at.alicdn.com/t/font_1962872_6n23mwderv.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.woff2') format('woff2'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.woff') format('woff'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.ttf') format('truetype'),url('//at.alicdn.com/t/font_1962872_6n23mwderv.svg#iconfont') format('svg'); }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-star:before {content: "\e60c";color: darkgoldenrod;font-size: 70px; }WXML 代碼
<icon class="iconfont icon-star"></icon>
使用矢量字體自定義小程序 icon 組件圖標(biāo)的流程就介紹完了。
參考：《微信小程序全棧開發(fā)實戰(zhàn)》第七課·極客時間: https://time.geekbang.org/course/intro/100052401
總結(jié)
以上是生活随笔為你收集整理的四十八、微信小程序开发系统组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 四十七、微信小程序开发页面结构WXML
- 下一篇： 重庆正宗酸菜鸡怎么做？