如何使用

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

通過 npm 安裝，需要依賴小程序基礎庫 2.2.1 以上版本，同時依賴開發者工具的 npm 構建。具體詳情可查閱 官方 npm 文檔。

通過 GitHub 下載 Wux Weapp 的代碼，然后 將 dist/ 目錄拷貝到自己的項目中。按照如下的方式使用組件，以 Button 為例，其它組件在對應的文檔頁查看：

在 page.json 中引入組件

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

在 page.wxml 中使用組件

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

隨著組件庫越來越豐富，文件的體積也越來越大，某些時候我們可能只需要其中的一個或多個組件，如果直接引入整個組件庫的話是不合適的，這時候就需要我們將要使用到組件給單獨抽離出來，也很簡單直接拷貝 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

總結

以上是生活随笔為你收集整理的小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。