天天看點

小程式weui的使用指南

最近在開發小程式,使用到weui,在此記錄一下weui的使用流程。

WEUI 是什麼

WeUI 是一套同微信原生視覺體驗一緻的基礎樣式庫。

由微信官方設計團隊為微信内網頁和微信小程式量身設計,令使用者的使用感覺更加統一。

它最初是為了給在微信端頁面提供一緻的視覺體驗而開發開源的一個樣式庫,

後續随着小程式、企業微信等等的開放能力出現,WeUI也提供了小程式、企業微信等等的版本。

我們将要介紹的,就是WeUI的小程式版本。

預覽

weui的基礎元件有很多,具體可以到 WEUI的官方,位址是 https://weui.io/ 進行浏覽;GitHub開源代碼,位址是 https://github.com/Tencent/weui-wxss/。

手機預覽,掃描下面二維碼:

小程式weui的使用指南

 開發工具預覽:

從GitHub上下載下傳的檔案,weui-wxss-master檔案打開後有很多檔案,但隻需,在開發者工具中打開dist檔案就OK。

小程式weui的使用指南

使用weui進行開發

在項目中建立一個檔案夾,将weui.wxss拷貝到檔案夾中:

ps:weui.wxss

檔案位于項目的

dist/style

目錄下

在項目中導入weui.wxss檔案:

可以在app.wxss中全局引入,也可以在單頁面的XXX.wxss中引入。

引入方式:@import   'thirdparty/weui.wxss';

參照weui提供的例子使用weui元件:

可以在example目錄中,找到想要使用的元件的demo,将代碼複制到自己的項目中。

大功告成啦!