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

2022-07-11 09:00:14 字數 1680 閱讀 8672

步驟一:初始化

在小程式專案根目錄執行init

npm init -y	

步驟二:

在小程式專案目錄中執行命令安裝 npm 包

npm install weui-miniprogram --production

// --production 目的在於可以減少安裝一些業務無關的 npm 包,從而減少整個小程式包的大小

步驟三:

勾選「使用 npm 模組」選項

步驟四:

點選開發者工具中的選單欄:工具 --> 構建 npm

如下圖所示構建完成啦

檔案目錄中即多了個「miniprogram_npm」的資料夾

資料夾下面即有了我們需要的weui件庫

步驟六:

頁面中引入dialog彈窗元件,

比如在乙個初始化的index的page裡面引用

(1)、先在index頁面的 json 檔案加入 usingcomponents 配置字段

}

(2)、然後在index頁面的 wxml 中直接使用該元件

<

!--index.wxml--

>

="container"

>

我是首頁<

/text>

"test" show=

"}" bindbuttontap=

"tapdialogbutton" buttons=

", ]}}"

>

test content<

/view>

<

/mp-dialog>

<

/view>

結果如下圖所示:

可以選擇「預覽」、「真機除錯」用手機來看效果

可能會會出現下面這種情況

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

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

微信小程式weui的使用

小程式weui官網 進入github 解壓後進入資料夾,圖示路徑下的weui.wxss就是我們所需要的weui庫 2.引入weui 3.使用weui wxss檔案,還有乙個很重要的資料夾,那就是example檔案 上有小程式weui的樣式展示,當然我們也可以直接進weui的小程式手機上檢視weui的...

微信小程式 自定義元件(modal) 引入元件

專案結構 步驟一 建立元件 宣告這一組檔案為自定義元件 modal.json 可選項,用於引用別的元件 步驟二 編寫元件 1.邏輯層 modal.js component 這裡定義了modalhidden屬性,屬性值可以在元件使用時指定.寫法為modal hidden modalmsg data m...