如何使用

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

通過 npm 安裝，需要依賴小程序基礎(chǔ)庫 2.2.1 以上版本，同時(shí)依賴開發(fā)者工具的 npm 構(gòu)建。具體詳情可查閱 官方 npm 文檔。

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

在 page.json 中引入組件

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

在 page.wxml 中使用組件

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

隨著組件庫越來越豐富，文件的體積也越來越大，某些時(shí)候我們可能只需要其中的一個(gè)或多個(gè)組件，如果直接引入整個(gè)組件庫的話是不合適的，這時(shí)候就需要我們將要使用到組件給單獨(dú)抽離出來，也很簡單直接拷貝 dist/ 目錄下對(duì)應(yīng)的組件即可，當(dāng)然某些組件存在依賴關(guān)系，則抽離過程會(huì)相對(duì)復(fù)雜一些，以 ActionSheet、Badge、Button 為例。

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

• 首先將 dist/ 目錄下對(duì)應(yīng)組件(如 actionsheet)拷貝至 demo 目錄；
• 其次看其對(duì)應(yīng)目錄下 index.json 是否存在依賴組件，若存在則一一拷貝；
• 然后看組件是否依靠 JavaScript 主動(dòng)調(diào)用(查看對(duì)應(yīng)文檔可得知或存在 index.js 文件中)，是則拷貝 index.js 文件，并刪除不需要的組件引用；
• 最后查看組件目錄下 index.js 是否存在對(duì)幫助方法的引用，若存在則拷貝 helpers 目錄(抑或直接拷貝不管是否存在引用)。

特性

• UI 樣式可配置，拓展靈活，輕松適應(yīng)不同的設(shè)計(jì)風(fēng)格
• 60+ 豐富的組件，能夠滿足移動(dòng)端開發(fā)的基本需求

支持環(huán)境

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

預(yù)覽

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

文檔

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

項(xiàng)目地址

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。