【1】簡介

? ? 因為小程序的api描述都比較簡單，并沒有wxml及wxss的描述，一定會想小程序有沒有一個UI庫，類似于前端中的Bootstrap，MD，Semantic UI這樣的框架UI庫。有的，它就是WeUI。

? ? WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

? ? WeUI是在微信終端非常出色的UI樣式庫，提供了非常多豐富的基礎UI組件，最重要的是擁有了和微信一致的視覺體驗，使得用戶即使從微信切換到相關小程序，也不會覺得UI感到突兀。

它的界面如圖：

?

【2】下載配置

下載鏈接：https://github.com/Tencent/weui-wxss

將整個文件下載下來，將其中的dist文件夾導入到獨立的小程序中作為參考如下圖

注意：樣式文件可直接引用dist/style/weui.wxss，或者單獨引用dist/style/widget下的組件的wxss。
2.將style文件夾拷貝到小程序根目錄中，如下圖。

? ? ? ? 3.weui.wxss的引入方法
? ? ? ? 方法一.在app.wxss內或者需要的頁面引入style/weui.wxss。

/**app.wxss**/ @import 'style.weui.wxss'

? ? ? ? 方式二：在app.wxss內或者需要的頁面引入style/widget下的組件的wxss。

/**app.wxss---->引入button的wxss**/ @import 'style.widget.weui-button.weui-button.wxss';

? ? ? ? 注意：這樣引入前提是weui.wxss放在全局的位置如圖

? ? ? ? 這樣就可以簡單的調用WeUI組件了。

【3】微信開發工具預覽

使用微信開發者工具打開源代碼工程的dist目錄

打開微信開發者工具，點擊導入項目，選擇weui-wxss項目目錄下的dist目錄。

接著點擊導入，就可以看到weui的預覽了。

?

?

【4】使用

了解了weui的預覽方法，接下來我們就可以使用weui進行一些簡單的開發了，在這里，我們完成一個九宮格的開發。

新建一個空白的小程序工程，選擇新建項目，填寫項目名稱、appId、項目目錄之后，就進入小程序的開發頁面。

新建了小程序工程之后，我們就可以在這個工程上使用weui了。

使用weui進行開發可以簡單分為兩個步驟。

（1）導入weui.wxss文件 （2）參照weui提供的例子使用weui組件

接下來我們按步驟嘗試即可。

?

?

?

?

.

轉載于:https://www.cnblogs.com/jianxian/p/11121514.html

總結

以上是生活随笔為你收集整理的小程序~WeUI下载使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。