【1】簡介

? ? 因?yàn)樾〕绦虻腶pi描述都比較簡單，并沒有wxml及wxss的描述，一定會想小程序有沒有一個UI庫，類似于前端中的Bootstrap，MD，Semantic UI這樣的框架UI庫。有的，它就是WeUI。

? ? WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計團(tuán)隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

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

它的界面如圖：

?

【2】下載配置

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

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

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

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

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

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

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

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

? ? ? ? 這樣就可以簡單的調(diào)用WeUI組件了。

【3】微信開發(fā)工具預(yù)覽

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

打開微信開發(fā)者工具，點(diǎn)擊導(dǎo)入項(xiàng)目，選擇weui-wxss項(xiàng)目目錄下的dist目錄。

接著點(diǎn)擊導(dǎo)入，就可以看到weui的預(yù)覽了。

?

?

【4】使用

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

新建一個空白的小程序工程，選擇新建項(xiàng)目，填寫項(xiàng)目名稱、appId、項(xiàng)目目錄之后，就進(jìn)入小程序的開發(fā)頁面。

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

使用weui進(jìn)行開發(fā)可以簡單分為兩個步驟。

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

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

?

?

?

?

.

轉(zhuǎn)載于:https://www.cnblogs.com/jianxian/p/11121514.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。