開發微信小程序之WeUI組件庫的引入和使用

@

目錄

• WeUI組件庫簡介
• 一、引入組件
• 二、如何使用
• 總結

---

WeUI組件庫簡介

這是一套基於樣式庫weui-wxss開發的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫，由微信官方設計團隊和小程序團隊為微信小程序量身設計，令用戶的使用感知更加統一。

---

一、引入組件

1. 通過 useExtendedLib 擴展庫 的方式引入，這種方式引入的組件將不會計入代碼包大小。
2. 可以通過npm方式下載構建，npm包名為weui-miniprogram

如何使用npm方式下載構建，可參考：《設置微信小程序支持npm（解決微信小程序npm構建時提示“沒有找到可以構建的NPM包，請確認需要參與構建的npm都在miniprogramroot目錄內，或配置project...”錯誤）的方法》

二、如何使用

1. 首先要在 app.wxss 里面引入 weui.wxss，如果是通過 npm 引入，需要先構建 npm（“工具”菜單 --> “構建 npm”）。如果是通過 useExtendedLib 擴展庫 的方式引入，可省略 import 步驟。

@import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss';

2. 然后可以在頁面中引入 dialog 彈窗組件

   在頁面的 json 文件加入 usingComponents 配置字段

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

   在對應頁面的 wxml 中直接使用該組件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '確認'}]}}">
    <view>test content</view>
</mp-dialog>

至此，即已引入並可使用WeUI組件。

---

總結

以上便是如何引入和使用WeUI組件庫的過程。