微信小程式WeUI 前端樣式庫

引言

之前在小程式開發文檔上見過WeUI 前端樣式庫，下載下傳下來後一直摸不着頭腦，今天終得撥雲見日。

其實這就是使得微信小程式和頁面界面 UI 統一：WeUI 前端樣式庫（含 Sketch 源檔案）

微信裡使用的 H5 頁面是相當多，特别是小程式更是火爆，為了能讓頁面以及微信小程式的界面能與微信統一，讓使用者看起來就像是微信内置的功能或頁面，那麼建議大家使用推薦的 WeUI 前端架構！

推薦

架構名稱：WeUI 樣式庫

線上示範：https://weui.io

下載下傳位址：https://github.com/weui/weui

Sketch 源檔案

同時也推出了 WeUI 的 Sketch 源檔案，如果你是設計師，可以下載下傳這個設計源檔案來設計新的微信小程式、H5網頁等等，還有 Symbol，很好用哦！

檔案格式：.Sketch

素材版權：免費

官方簡述：WeUI 是一套同微信原生視覺體驗一緻的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令使用者的使用感覺更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素

下面來看看 WeUI 樣式庫的介紹：

圖示

圖示的顔色、樣式和微信原生的樣式幾乎一緻，看不到有什麼差別哦！

Flex 布局

使用 CSS Flex 屬性定制的布局系統，輕松實作多欄自适應排版。

Panel 面闆

可以用它來做文章清單、文章圖文清單。

Footer 頁尾樣式

就是網頁頁腳樣式~

提示樣式

菜單

底部Tabbar

Navbar

WeUI頁面層級

用于規範WeUI頁面元素所屬層級、層級順序及組合規範。

需要制作一個和微信一樣網頁設計界面麼？推薦使用 WeUI 這個架構。

如何使用WeUI樣式庫

WeUI是在遵守微信視覺設計規範下，由官方設計團隊為小程式量身定制的基礎樣式庫。

WeUI是官方出品，并且在10月28号IDE更新後，IDE不能識别和引用css，同時也屏蔽了從網絡擷取樣式檔案，和css劃清界限。

現在到了重點：如何引入WeUI？

1. 下載下傳WeUI

weui.wxss

注意是在【weui-wxss/dist/style/】目錄下，不要【weui-wxss/src】目錄裡面下載下傳

• 元件的wxml結構請看

  dist/example/

  下的元件
• 樣式檔案可直接引用

  dist/style/weui.wxss

  ，或者單獨引用

  dist/style/widget

  下的元件的

  wxss

  文檔

2. 将weui.wxss拷貝到小程式根目錄中

3. 在app.wxss或頁面wxss導入weui.wxss

/**app.wxss**/
@import 'weui.wxss';
                

4. 以上就成功引入了weui.wxss，weui也提供了單個元件的樣式引入，流程同上。

位址為：單個Widget的樣式檔案

如何使用WeUI

• 根元件使用class="page"

<view class="page">
</view>
                

• 頁面骨架元件使用class="page__xxx"(注意是兩個下劃線)

<view class="page">
<!--頁頭-->
<view class="page__hd"></view>
<!--主體-->
<view class="page__bd"></view>
<!--沒有頁腳-->
</view>
                

• 其他元件都已weui-開頭後接元件名稱，例如class="weui-footer"

• 元件的子元件樣式，例如view.weui-footer元件還有連結和版權資訊。

<view class="weui-footer">
<view class="weui-footer__links">
    <navigator url="" class="weui-footer__link">小黃象</navigator>
</view>
<view class="weui-footer__text">Copyright © 精品專欄組</view>
</view>
           

元件和子元件使用兩個下劃線銜接，是以要區分什麼時候用"-",什麼時候用"__"

作者：OzanShareing

來源：簡書

原文：https://www.jianshu.com/p/4198bb72a98b