微信小程式weui的使用

2022-06-22 14:09:14 字數 1166 閱讀 3639

小程式weui官網:

進入github 

解壓後進入資料夾,圖示路徑下的weui.wxss就是我們所需要的weui庫

2.引入weui

3.使用weui

wxss檔案,還有乙個很重要的資料夾,那就是example檔案

上有小程式weui的樣式展示,當然我們也可以直接進weui的小程式手機上檢視weui的樣式,然後根據需求來選擇元件的使用,但是這裡都沒有介紹weui具體的使用,但是example資料夾裡有。

上圖所示就是weui使用**,這裡我們隨意挑選乙個模組badge示例,對應的badge.wxml的**其實就是weui的各個badge徽章標記的樣式,我們直接將badge.wxml中的**複製,貼上到小程式專案中的新建頁面test.wxml中看看。

儲存一下,我們就可以在模擬器中看到如下效果

到這裡我們就已經完成了weui的引入和使用了,接下來只需要根據需求篩選就好

PHP使用weui,微信小程式WeUI引入

引入元件 通過 useextendedlib 擴充套件庫 的方式引入 1.報錯component is not found in path miniprogram npm weui miniprogram dialog dialog 2.報錯 usingcomponents mp dialog 未找...

微信小程式 引入WeUI元件庫(一)

步驟一 初始化 在小程式專案根目錄執行init npm init y 步驟二 在小程式專案目錄中執行命令安裝 npm 包 npm install weui miniprogram production production 目的在於可以減少安裝一些業務無關的 npm 包,從而減少整個小程式包的大小 ...

小程式WeUI的引入方式使用

一.useextendedlib引入 優點 1.引入簡單 2.不占用包體積 缺點 1.自由化低,不能直接修改元件庫,增加功能 2.不穩定,不同版本weui相同元件暴露的方法都會有較大差異,會發現突然有些功能不好使。暫未發現指定版本配置,猜測是動態獲取最新的 3.不支援分包使用 useextended...