微信官方開源UI庫-WeUI - shanyou－IT工程師數位筆記本

文章出處

概述

　　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

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