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

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

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

開始寫頁面前的準備

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

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

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

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

<link rel="stylesheet" href="./css/weui.min.css">

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

單頁應用頁面

咱們致敬vue，模仿這個頁面。
縱觀整個頁面，能夠分爲如下幾個模塊。

• 最頂上放置logo

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

• 最底部有一個tabbar導航條

引入代碼：

<div style="height:100%">
    <div class="center">
    </div>
    <div class="weui-cells">
    </div>
    <div class="weui-cells">
    </div>
    <p class="vue-version">current vue version 2.5.2</p>
    <div class="weui-tabbar">
    </div>
</div>

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

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

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

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

引入代碼：

<div class="weui-cells">
    <!-- _access能顯示一個箭頭 -->
    <a href="#" class="weui-cell weui-cell_access">
    <div class="weui-cell__hd">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="">
    </div>
    <div class="weui-cell__bd">
    <p>Live Demo</p>
    </div>
    <div class="weui-cell__ft"></div>
    </a>
</div>

這樣，咱們就寫完了一個單元格。
第二個單元格有兩個小格怎麼辦呢？
沒關係，weui-cell是單元格中的一個小格子，有多少個小格子就嵌套在一個weui-cells中就能夠了，每一格weui-cell仍是按照上面的左中右方式進行命名：

<div class="weui-cells">
    <a href="" class="weui-cell weui-cell_access">
    <span class="weui-cell__hd"></span>
    <span class="weui-cell__bd"></span>
    <span class="weui-cell__ft">
        <!-- weui-badge是顯示在箭頭前面的紅色提示小框 -->
        <div class="weui-badge"></div>
    </span>
    </a>
    <a href="" class="weui-cell weui-cell_access">
    <span class="weui-cell__hd"></span>
    <span class="weui-cell__bd"></span>
    <span class="weui-cell__ft"></span>
    </a>
</div>

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

<div class="weui-tabbar">
    <a href="" class="weui-tabbar__item">
    </a>
    <a href="" class="weui-tabbar__item">
    </a>
    <a href="" class="weui-tabbar__item">
    </a>
</div>

爲每個weui-tabbar__item添加內容吧：

<div class="weui-tabbar">
    <a href="" class="weui-tabbar__item">
        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
        <p class="weui-tabbar__label">Home</p>
    </a>
    <a href="" class="weui-tabbar__item">
        <span style="position:relative;display:inline-block">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <!-- weui-badge表示一個紅色的展現區 -->
            <span class="weui-badge" style="position:absolute;top:-6;right:-11px">8</span>
        </span>
        <p class="weui-tabbar__label">Demos</p>
    </a>
    <a href="" class="weui-tabbar__item">
        <span style="position:relative;display:inline-block">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <!-- weui-badge_dot小圓點，給一個相對於span的定位，放在右上角 -->
            <span class="weui-badge weui-badge_dot" style="position:absolute;top:0;right:-6px"></span>
        </span>
        <p class="weui-tabbar__label">Donate</p>
    </a>
</div>

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


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

頁面彈出框

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

這就是咱們日常很常見的彈出框了。這裏是點擊了第一個按鈕就彈出這個彈框，點擊取消，彈框消失，固然你也能夠添加別的事件，點擊取消和保存都會讓彈框消失而且執行相應的步驟。


首先，咱們爲dialog彈出框製做一個「家」，也就是dialog放置的頁面：
weui-btn 是weui的基本組件是一個按鈕

<div class="page dialog">
  <div class="page__hd">
    <h1 class="page__title">Dialog</h1>
    <p class="page__desc">對話框</p>
  </div>
  <div class="page__bd page__bd__spacing">
    <!-- 設置三個按鈕，可是我只爲第一個按鈕綁定了彈框彈出的事件 -->
    <a href="#" class="weui-btn weui-btn_default" id="showIOSDialog1">IOS Dialog樣式 default</a>
    <a href="#" class="weui-btn weui-btn_primary">IOS Dialog樣式 primary</a>
    <a href="#" class="weui-btn weui-btn_warn">IOS Dialog樣式 warn</a>
  </div>
</div>

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

<div class="dialogs">
  <div id="iosDialog1" class="js_dialog" style="display: none">
      <!-- weui-mask 遮罩層 -->
    <div class="weui-mask"></div>
    <div class="weui-dialog">
      <div class="weui-dialog__hd">
        <div class="weui-dialog__title">彈窗標題</div>
      </div>
      <div class="weui-dialog__bd">
        <!-- 任何東西  說明文字， 表單 -->
        彈窗內容，告知當前狀態、信息和解決方法，描述文字儘可能控制在三行內
      </div>
      <!-- 彈窗底部的兩個小按鈕，有兩個選項就放置兩個 weui-dialog__btn  -->
      <div class="weui-dialog__ft">
        <a href="#" class="weui-dialog__btn weui-dialog__btn_default" id="dialogCancle">取消</a>
        <a href="#" class="weui-dialog__btn weui-dialog__btn_primary">保存</a>
      </div>
    </div>
  </div>

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

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

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

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

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

<script>
  document.getElementById('showIOSDialog1').click(function () {
    $('#iosDialog1').show();
  });
  document.getElementById('dialogCancle').click(function () {
    $('#iosDialog1').show();
  });
</script>

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


固然，weu基礎樣式庫還有不少不少組件可使用，能夠進入https://weui.io/ 查看更多的基礎組件。接下來讓咱們一塊兒學習更多吧！