WeUI基礎樣式庫——寫一個移動端界面

xiyang 發布于2019-08-29 13:49 / 637人閱讀

摘要：是一套基礎樣式庫，同微信原生視覺體驗一致，由微信官方設計團隊為微信內網頁和微信小程序量身設計的。為了更好的說明這個基礎樣式庫的使用，接下來我將介紹兩個例子。

WeUI是一套基礎樣式庫，同微信原生視覺體驗一致，由微信官方設計團隊為微信內網頁和微信小程序量身設計的。
我們來看看這個基礎庫樣式到底長什么樣。

這些密密麻麻的就是壓縮后的樣式庫。密密麻麻地看起來簡直要急死密集恐懼癥啊。不要急，您請往下看。
仔細看我們能看到，這個樣式庫為很多類寫了樣式。也就是說，我們只要在html頁面中使用這些樣式，就能構建一個頁面了。【只要寫類名，省去了為很多標簽定義樣式，是不是省事多了呢?】
對WeUI的介紹就到這了，下面都是滿滿的干貨啦。

開始寫頁面前的準備

要想有這個樣式庫，當然要先下載WeUI的樣式庫啦，我提供了兩個下載的地址。

一個是騰訊的GitHub下載地址：https://github.com/weui/weui

另一個是我放在GitHub上的weui.min.css樣式：https://raw.githubusercontent...

接下來就為我們的頁面引入這個基礎樣式庫。
我把這個基礎樣式庫放在本地了，就這么引入。

為了更好的說明這個基礎樣式庫的使用，接下來我將介紹兩個例子。單頁應用頁面和彈出框。

單頁應用頁面

我們致敬vue，模仿這個頁面。
縱觀整個頁面，可以分為以下幾個模塊。

最頂上放置logo

中間有兩個cells 也就是單元格，來顯示數據

最底部有一個tabbar導航條

引入代碼：


    
    
    
    
    
    
    current vue version 2.5.2

頂部的圖片插入比較簡單，直接引入圖片就行。我們說說中間cells中內容的添加。
我們看一個單元格，很典型的左中右格式，分為三個結構層次，

左邊是一張圖片，WeUI樣式庫為我們定義了類名，也就是單元格的頭部：weui-cell__hd

中間是一段文字，也就是這個單元格的身體：weui-cell__bd

最右邊是一個小箭頭，也就是單元格的尾部：weui-cell__ft

引入代碼：

這樣，我們就寫完了一個單元格。
第二個單元格有兩個小格怎么辦呢？
不要緊，weui-cell是單元格中的一個小格子，有多少個小格子就嵌套在一個weui-cells中就可以了，每一格weui-cell還是按照上面的左中右方式進行命名：

接下來是最底部的tabbar。
最尾部的導航條類名為weui-tabbar，里面有三項內容，也就是有三個weui-tabbar__item。

為每一個weui-tabbar__item添加內容吧：

我放在GitHub上的項目地址：https://github.com/TeanLee/qs...
這就完成了第一個單頁頁面的編寫。

接下來我們說說一個彈出框。

頁面彈出框

放上我們要寫的頁面成品圖：

這就是我們平常很常見的彈出框了。這里是點擊了第一個按鈕就彈出這個彈框，點擊取消，彈框消失，當然你也可以添加別的事件，點擊取消和保存都會讓彈框消失并且執行相應的步驟。

首先，我們為dialog彈出框制作一個“家”，也就是dialog放置的頁面：
weui-btn 是weui的基本組件是一個按鈕


  
    Dialog
    對話框
  
  
    
    IOS Dialog樣式 default
    IOS Dialog樣式 primary
    IOS Dialog樣式 warn

接下來，我們的dialog就要登場了。直接把dialog的div放在放置按鈕div的后面。


  
      
    
    
      
        彈窗標題
      
      
        
        彈窗內容，告知當前狀態、信息和解決方法，描述文字盡量控制在三行內
      
      
      
        取消
        保存

這里的遮罩層是為整個頁面蒙上一層灰色的背景，把用戶的吸引力引到彈框上。
彈框的內容還是分為三個層次：

weui-dialog__hd：彈框的頭部寫標題；

weui-dialog__bd：彈框的身體寫具體內容；

weui-dialog__ft：彈框的尾部放置按鈕；

接下來，就是給第一個按鈕添加綁定事件了，點擊第一個按鈕就跳出來彈框。

我放在GitHub上的彈框具體代碼：https://github.com/TeanLee/qs...

當然，weu基礎樣式庫還有很多很多組件可以使用，可以進入https://weui.io/ 查看更多的基礎組件。
接下來讓我們一起學習更多吧！

云服務器 GPU云服務器 php寫一個后端管理 css樣式怎么寫 html 內部寫樣式 js寫界面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112729.html

WeUI基礎樣式庫——寫一個移動端界面

摘要：是一套基礎樣式庫，同微信原生視覺體驗一致，由微信官方設計團隊為微信內網頁和微信小程序量身設計的。為了更好的說明這個基礎樣式庫的使用，接下來我將介紹兩個例子。 WeUI是一套基礎樣式庫，同微信原生視覺體驗一致，由微信官方設計團隊為微信內網頁和微信小程序量身設計的。我們來看看這個基礎庫樣式到底長什么樣。showImg(https://segmentfault.com/img/bVYCKd?...

hedge_hog 2019-08-21 17:40 評論0 收藏0
WeUI基礎樣式庫——寫一個移動端界面

摘要：是一套基礎樣式庫，同微信原生視覺體驗一致，由微信官方設計團隊為微信內網頁和微信小程序量身設計的。為了更好的說明這個基礎樣式庫的使用，接下來我將介紹兩個例子。 WeUI是一套基礎樣式庫，同微信原生視覺體驗一致，由微信官方設計團隊為微信內網頁和微信小程序量身設計的。我們來看看這個基礎庫樣式到底長什么樣。showImg(https://segmentfault.com/img/bVYCKd?...

meteor199 2019-08-01 18:00 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 評論0 收藏0