一套組件化、可複用、易擴展的微信小程序 UI 組件庫

如何使用

Wux Weapp 是一套組件化、可複用、易擴展的微信小程序 UI 組件庫。在開始使用之前，需要先閱讀微信小程序自定義組件的相關文檔。

1. 通過 npm 安裝，需要依賴小程序基礎庫 2.2.1 以上版本，同時依賴開發者工具的 npm 構建。具體詳情可查閱 官方 npm 文檔。
2. 通過 GitHub 下載 Wux Weapp 的代碼，然後 將 dist/ 目錄拷貝到自己的項目中。按照如下的方式使用組件，以 Button 為例，其它組件在對應的文檔頁查看：

在 page.json 中引入組件

"usingComponents": {
 "wux-button": "../../dist/button/index"
}

在 page.wxml 中使用組件

<wux-button>
<wux-button>
<wux-button>

組件庫文件體積過大的問題

隨著組件庫越來越豐富，文件的體積也越來越大，某些時候我們可能只需要其中的一個或多個組件，如果直接引入整個組件庫的話是不合適的，這時候就需要我們將要使用到組件給單獨抽離出來，也很簡單直接拷貝 dist/ 目錄下對應的組件即可，當然某些組件存在依賴關係，則抽離過程會相對複雜一些，以 ActionSheet、Badge、Button 為例。

demo/
 |-actionsheet/
 |-animation-group/
 |-backdrop/
 |-badge/
 |-button/
 |-helpers/
 |-index.js

• 首先將 dist/ 目錄下對應組件（如 actionsheet）拷貝至 demo 目錄；
• 其次看其對應目錄下 index.json 是否存在依賴組件，若存在則一一拷貝；
• 然後看組件是否依靠 JavaScript 主動調用（查看對應文檔可得知或存在 index.js 文件中），是則拷貝 index.js 文件，並刪除不需要的組件引用；
• 最後查看組件目錄下 index.js 是否存在對幫助方法的引用，若存在則拷貝 helpers 目錄（抑或直接拷貝不管是否存在引用）。

特性

• UI 樣式可配置，拓展靈活，輕鬆適應不同的設計風格
• 60+ 豐富的組件，能夠滿足移動端開發的基本需求

支持環境

• v3.4.0+ 需要依賴小程序基礎庫 2.2.3 以上版本
• v3.0.0 ~ v3.3.2 需要依賴小程序基礎庫 1.6.3 以上版本

預覽

項目示例在 https://github.com/wux-weapp/wux-weapp example 目錄下，可用微信web開發者工具打開 example 目錄。

文檔

https://wux-weapp.github.io/wux-weapp-docs/#/

項目地址

https://github.com/wux-weapp/wux-weapp