微信開發（網頁樣式庫）

阿新 • • 發佈：2019-01-11

首先，我們先聊下這個微信網頁樣式庫，它是幹嘛的，怎麼用；

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信

內網頁開發量身設計，可以令使用者的使用感知更加統一。在微信網頁開發中使用 WeUI，有如下優勢：

同微信客戶端一致的視覺效果，令所有微信使用者都能更容易地使用你的網站
便捷獲取快速使用，降低開發和設計成本
微信設計團隊精心打造，清晰明確，簡潔大方

該樣式庫目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已經在 GitHub上開源。訪問 http://weui.github.io/weui/

安裝

方法一：使用bower進行安裝

bower install --save weui

方法二：使用npm進行安裝

npm install --save weui

任選一種方法安裝後，只需要在頁面中引入 dist/style/weui.css 或者 dist/style/weui.min.css 其中之一即可。例如:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>WeUI</title>
        <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
    </head>
    <body>
  
    </body>
</html>

開發

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws

執行 gulp -ws 命令，會監聽 src 目錄下所有檔案的變更，並且預設會在8080埠啟動伺服器，然後在瀏覽器開啟 http://localhost:8080/example。

元素型別

Button

按鈕可以使用 a 或者 button 標籤。wap 上要觸發按鈕的 active 態，必須觸發 ontouchstart 事件，可以在 body 上加上 ontouchstart="" 全域性觸發。

按鈕常見的操作場景：確定、取消、警示，分別對應 class：weui_btn_primary

、weui_btn_default、weui_btn_warn，每種場景都有自己的置灰態weui_btn_disabled，除此外還有一種鏤空按鈕 weui_btn_plain_xxx，客戶端 webview 裡的按鈕尺寸有兩類，預設寬度100%，小型按鈕寬度自適應，兩邊邊框與文字間距0.75em：

<a href="#" class="weui_btn weui_btn_primary">按鈕</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按鈕</a>
<a href="#" class="weui_btn weui_btn_warn">確認</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">確認</a>
<a href="#" class="weui_btn weui_btn_default">按鈕</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按鈕</a>
<div class="button_sp_area">
    <a href="#" class="weui_btn weui_btn_plain_default">按鈕</a>
    <a href="#" class="weui_btn weui_btn_plain_primary">按鈕</a>

    <a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按鈕</a>
    <a href="#" class="weui_btn weui_btn_mini weui_btn_default">按鈕</a>
</div>

Cell

Cell，列表檢視，用於將資訊以列表的結構顯示在頁面上，是 wap 上最常用的內容結構。Cell 由多個 section 組成，每個 section 包括 section header weui_cells_title以及 cells weui_cells。

Cell 由 thumbnail weui_cell_hd、body weui_cell_bd、accessory weui_cell_ft 三部分組成，cell 採用自適應佈局，在需要自適應的部分加上 class weui_cell_primary即可：

帶說明的列表項

<div class="weui_cells_title">帶說明的列表項</div>
<div class="weui_cells">
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <p>標題文字</p>
        </div>
        <div class="weui_cell_ft">
            說明文字
        </div>
    </div>
</div>

Cell 可根據需要進行各種自定義擴充套件，包括輔助說明、跳轉、單選、複選等。下面以帶圖示、說明、跳轉的列表項，其他情況可以直接參考 example 下的程式碼：

<div class="weui_cells_title">帶圖示、說明、跳轉的列表項</div>
<div class="weui_cells weui_cells_access">

    <a class="weui_cell" href="#">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            說明文字
        </div>
    </a>
    <a class="weui_cell" href="#">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            說明文字
        </div>
    </a>
</div>

Dialog

若系統的 alert 窗體無法滿足網頁的臨時檢視內容需求，則可以自定義實現與 alert 形式相似的 dialog，並且在 dialog 中可以自定義地使用各種控制元件，來滿足需求。

<div class="weui_dialog_confirm">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">彈窗標題</strong></div>
        <div class="weui_dialog_bd">自定義彈窗內容，居左對齊顯示，告知需要確認的資訊等</div>
        <div class="weui_dialog_ft">
            <a href="#" class="weui_btn_dialog default">取消</a>
            <a href="#" class="weui_btn_dialog primary">確定</a>
        </div>
    </div>
</div>

<div class="weui_dialog_alert">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">彈窗標題</strong></div>
        <div class="weui_dialog_bd">彈窗內容，告知當前頁面資訊等</div>
        <div class="weui_dialog_ft">
            <a href="#" class="weui_btn_dialog primary">確定</a>
        </div>
    </div>
</div>

Progress

Progress 用於上傳、下載等耗時並且需要顯示進度的場景，使用者可以隨時中斷該操作。

<div class="weui_progress">
    <div class="weui_progress_bar">
        <div class="weui_progress_inner_bar" style="width: 50%;"></div>
    </div>
    <a href="#" class="weui_progress_opr">
        <i class="weui_icon_cancel"></i>
    </a>
</div>

Toast

Toast 用於臨時顯示某些資訊，並且會在數秒後自動消失。這些資訊通常是輕量級操作的成功、失敗或等待狀態資訊。

<div id="toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">已完成</p>
    </div>
</div>

<div id="loadingToast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <!-- :) -->
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">資料載入中</p>
    </div>
</div>

額~~~還有許多的樣式！我門可以到官網上看看！有什麼不懂的地方可以給我留言哦！

微信開發（網頁樣式庫）

開發

元素型別

Button

Cell

Dialog

Progress

Toast

微信開發（網頁樣式庫）

微信開發（1）：網頁授權獲取使用者的基本資訊實現微信登入（java）

微信開發（準備工作簡版）

微信開發（3） -- 支付後接收回調信息測試

名師帶你學微信開發（Java版）

Senparc.Weixin微信開發（3）自定義菜單與獲取用戶組

Senparc.Weixin微信開發（3）自定義選單與獲取使用者組

springboot與微信開發（一）

springboot與微信開發（二）

微信開發（二）——獲取微信使用者的基本資訊

php微信支付（僅Jsapi支付）詳細步驟.----僅適合第一次做微信開發的程式設計師

tp5微信開發（四） ---- 微信模板訊息推送

【微信】微信開發（3）不要掉進Cookie的坑！

微信開發（四）：獲取access_token和微信伺服器IP

微信開發（2）:微信js sdk分享朋友圈，朋友，獲取config介面注入許可權驗證（java）

微信開發（從註冊到上線的一整套流程）第一章申請伺服器資源

微信開發（一）申請介面與token獲取

基於Python的微信開發（1）：Hello World

微信開發（1）

微信開發（微信掃一掃）商品建立

微信開發（網頁樣式庫）

開發

元素型別

Button

Cell

Dialog

Progress

Toast

相關推薦