微信官方開源UI庫-WeUI

概述

　　WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，爲微信Web開發量身設計，能夠令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。

 　　這有什麼好處呢？其實從上面也能夠看到官方的話，就是讓你的應用跟微信官方版本更加統一，而沒有違和感。固然，更重要的是，這樣的庫在某些時候能夠提供你的開發效率哦。github地址：https://github.com/weui/weui

使用

方法一：

使用bower進行安裝

bower install --save weui

方法二：

使用npm進行安裝

npm install --save weui

開發

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

　　運行gulp -ws命令，會監聽src目錄下全部文件的變動，而且默認會在8080端口啓動一個express服務器，而後在瀏覽器打開http://localhost:8080/example。 

　　手機預覽

　　請用微信掃碼

　　  

　　http://weui.github.io/weui/

 Button

Cell

Dialog

Progress
progress用於上傳、下載等耗時而且須要顯示進度的場景，用戶能夠隨時中斷該操做。

Toast

toast用於臨時顯示某些信息，而且會在數秒後自動消失。這些信息一般是輕量級操做的成功、失敗或等待狀態信息。

Msg Page

結果頁一般來講能夠認爲進行一系列操做步驟後，做爲流程結束的總結性頁面。結果頁的做用主要是告知用戶操做處理結果以及必要的相關細節（可用於確認以前的操做是否有誤）等信息；若該流程用於開啓或關閉某些重要功能，可在結果頁增長與該功能相關的描述性內容；除此以外，結果頁也能夠承載一些附加價值操做，例如提供抽獎、關注公衆號等功能入口。

Article
文字視圖顯示大段文字，這些文字一般是頁面上的主體內容。Article支持分段、多層標題、引用、內嵌圖片、有/無序列表等富文本樣式，並可響應用戶的選擇操做。

在微信客戶端webview中使用Article，必須保證文字有足夠的可讀性和可辨識性、使用規範字體、保證足夠的段間距、段首無縮進。

Icon

Gulp實戰和原理解析（以weui做爲項目實例）http://i5ting.github.io/stuq-gulp/