{"id":13537112,"url":"https://github.com/wux-weapp/wux-weapp","last_synced_at":"2025-05-13T23:05:43.507Z","repository":{"id":37318521,"uuid":"78492853","full_name":"wux-weapp/wux-weapp","owner":"wux-weapp","description":":dog: 一套组件化、可复用、易扩展的微信小程序 UI 组件库","archived":false,"fork":false,"pushed_at":"2024-04-25T10:22:39.000Z","size":49909,"stargazers_count":5058,"open_issues_count":30,"forks_count":879,"subscribers_count":153,"default_branch":"master","last_synced_at":"2025-04-29T17:47:36.963Z","etag":null,"topics":["bem-css","mini-program","miniprogram","ui-design","weapp","weapp-demo","wechat-weapp","weixin","wux","wux-weapp","wuxui","wx-component","wxapp"],"latest_commit_sha":null,"homepage":"https://wuxui.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wux-weapp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-10T03:12:26.000Z","updated_at":"2025-04-26T10:53:09.000Z","dependencies_parsed_at":"2024-04-24T09:35:24.939Z","dependency_job_id":"e920ef9b-dc56-4f4e-8e5f-29d8ae4d1078","html_url":"https://github.com/wux-weapp/wux-weapp","commit_stats":{"total_commits":648,"total_committers":16,"mean_commits":40.5,"dds":0.03240740740740744,"last_synced_commit":"3fffadaa57e562cc37329b0ee5ac08905c5a36f3"},"previous_names":["skyvow/wux"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wux-weapp%2Fwux-weapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wux-weapp%2Fwux-weapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wux-weapp%2Fwux-weapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wux-weapp%2Fwux-weapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wux-weapp","download_url":"https://codeload.github.com/wux-weapp/wux-weapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251584376,"owners_count":21613025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem-css","mini-program","miniprogram","ui-design","weapp","weapp-demo","wechat-weapp","weixin","wux","wux-weapp","wuxui","wx-component","wxapp"],"created_at":"2024-08-01T09:00:55.262Z","updated_at":"2025-04-29T21:24:43.653Z","avatar_url":"https://github.com/wux-weapp.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","9. 其他与展望","前端开发框架及项目","组件","UI模板"],"sub_categories":["5. 参考材料","多工具库支持或纯JS","3、小程序模板"],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://wuxui.com/\"\u003e\n        \u003cimg width=\"200\" src=\"./screenshots/logo.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eWux Weapp\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cp\u003e一套组件化、可复用、易扩展的微信小程序\u003c/p\u003e\n    \u003ca href=\"https://github.com/wux-weapp/wux-weapp/\" target=\"_blank\"\u003e\n        \u003cimg alt=\"star this repo\" src=\"https://img.shields.io/github/stars/wux-weapp/wux-weapp\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/wux-weapp/wux-weapp/fork\" target=\"_blank\"\u003e\n        \u003cimg alt=\"fork this repo\" src=\"https://img.shields.io/github/forks/wux-weapp/wux-weapp\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://circleci.com/gh/wux-weapp/wux-weapp\" target=\"_blank\"\u003e\n        \u003cimg alt=\"circleci\" src=\"https://img.shields.io/circleci/build/github/wux-weapp/wux-weapp/master.svg?label=circleci\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://travis-ci.org/wux-weapp/wux-weapp\" target=\"_blank\"\u003e\n        \u003cimg alt=\"travis\" src=\"https://img.shields.io/travis/wux-weapp/wux-weapp.svg?label=travis\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/wux-weapp/wux-weapp/actions\" target=\"_blank\"\u003e\n        \u003cimg alt=\"github workflow\" src=\"https://img.shields.io/github/actions/workflow/status/wux-weapp/wux-weapp/test.yml?branch=master\u0026label=github workflow\" /\u003e\n    \u003c/a\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.npmjs.com/package/wux-weapp\" target=\"_blank\"\u003e\n        \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/wux-weapp.svg\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/wux-weapp\" target=\"_blank\"\u003e\n        \u003cimg alt=\"downloads\" src=\"https://img.shields.io/npm/dm/wux-weapp.svg\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/wux-weapp\" target=\"_blank\"\u003e\n        \u003cimg alt=\"downloads\" src=\"https://img.shields.io/npm/dt/wux-weapp.svg\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/wux-weapp\" target=\"_blank\"\u003e\n        \u003cimg alt=\"license\" src=\"https://img.shields.io/npm/l/wux-weapp.svg\" /\u003e\n    \u003c/a\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/wux-weapp/wux-weapp-sublime-snippets\" target=\"_blank\"\u003e\n        \u003cimg alt=\"Snippets for Sublime\" src=\"https://img.shields.io/badge/Snippets%20for-Sublime-blue\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/wux-weapp/wux-weapp-snippets\" target=\"_blank\"\u003e\n        \u003cimg alt=\"Snippets for VScode\" src=\"https://img.shields.io/badge/Snippets%20for-VScode-blue\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/wux-weapp/wux-weapp-atom-snippets\" target=\"_blank\"\u003e\n        \u003cimg alt=\"Snippets for Atom\" src=\"https://img.shields.io/badge/Snippets%20for-Atom-blue\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n# 快速上手\n\n## 使用之前\n\n在开始使用之前，你需要先阅读 [微信小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/) 的相关文档。\n\n## 如何安装\n\n### 方式一. 通过 npm 安装\n\n通过 `npm` 安装，需要依赖小程序基础库 `2.2.1` 以上版本，同时依赖开发者工具的 `npm` 构建，[详见 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。\n\n```bash\n# Using npm\nnpm i wux-weapp -S --production\n\n# Using yarn\nyarn add wux-weapp --production\n```\n\n### 方式二. 通过下载代码\n\n通过 [GitHub](https://github.com/wux-weapp/wux-weapp/) 下载 `Wux Weapp` 的代码，然后 将 `packages/lib/` 目录拷贝到自己的项目中。\n\n- `packages/lib/` - 压缩版（ES5）\n- `packages/es/` - 未压缩版（ES6，使用时需要开启 `ES6 转 ES5`，位于开发者工具右上角-详情-本地配置）\n\n```bash\ngit clone https://github.com/wux-weapp/wux-weapp.git\ncd wux-weapp\n```\n\n### 方法三. 选择需要的模块，量身定制\n\n参考 [量身定制](https://wuxui.com/#/customize-theme)。\n\n## 如何使用\n\n按照如下的方式使用组件，以 `Button` 为例，其它组件在对应的文档页查看：\n\n### 在 page.json 中引入组件\n\n```json\n\"usingComponents\": {\n    \"wux-button\": \"../../dist/button/index\"\n}\n```\n\n### 在 page.wxml 中使用组件\n\n```html\n\u003cwux-button size=\"small\"\u003eButton\u003c/wux-button\u003e\n\u003cwux-button size=\"default\"\u003eButton\u003c/wux-button\u003e\n\u003cwux-button size=\"large\"\u003eButton\u003c/wux-button\u003e\n```\n\n### 组件库文件体积过大的问题\n\n随着组件库越来越丰富，文件的体积也越来越大，某些时候我们可能只需要其中的一个或多个组件，如果直接引入整个组件库的话是不合适的，这时候就需要我们将要使用到组件给单独抽离出来。\n\n1. 使用 [量身定制](https://wuxui.com/#/customize-theme) 功能自动抽离组件（官方推荐）。\n\n2. 手动抽离组件，也很简单直接拷贝 `packages/` 目录下对应的组件即可，当然某些组件存在依赖关系，则抽离过程会相对复杂一些，以 ActionSheet、Badge、Button 为例。\n\n```\ndemo/\n  |-actionsheet/\n  |-animation-group/\n  |-backdrop/\n  |-badge/\n  |-button/\n  |-helpers/\n  |-index.js\n```\n\n- 首先将 `packages/` 目录下对应组件（如 `actionsheet`）拷贝至 `demo` 目录；\n- 其次看其对应目录下 `index.json` 是否存在依赖组件，若存在则一一拷贝；\n- 然后看组件是否依靠 JavaScript 主动调用（查看对应文档可得知或存在 `index.js` 文件中），是则拷贝 `index.js` 文件，并删除不需要的组件引用；\n- 最后查看组件目录下 `index.js` 是否存在对帮助方法的引用，若存在则拷贝 `helpers` 目录（抑或直接拷贝不管是否存在引用）。\n\n## 预览\n\n您可以扫描下方的小程序码体验或用 [微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html) 打开 `example` 目录（请注意，是 example 目录，不是整个项目）。\n\n![logo](./screenshots/qrcode.jpg)\n\n\u003cimg src=\"./screenshots/screenshorts-01.png\" width=\"375\" style=\"display: inline;\"\u003e\n\n## 相关链接\n\n- [Wux Weapp 源码地址](https://github.com/wux-weapp/wux-weapp/)\n- [Wux Weapp 文档地址](https://wuxui.com/)\n- [Wux Weapp 更新日志](https://wuxui.com/#/changelog)\n- [Wux Weapp 案例征集](https://github.com/wux-weapp/wux-weapp/issues/123)\n\n## 讨论组\n\n您可以扫码添加下方的左侧『Wux 小助手』微信并备注『Wux Weapp』或者『加群』进交流群。\n注意：如果添加『Wux 小猪手』没有反应，可以再尝试添加后边作者『Skyvow』微信。\n\n\u003cp\u003e\n  \u003cimg src=\"./screenshots/wxrobot-helper.png\" width=\"256\" style=\"display: inline;\"\u003e\n  \u003cimg src=\"./screenshots/wechat.png\" width=\"256\" style=\"display: inline;\"\u003e\n\u003c/p\u003e\n\n## 赞助\n\n请作者喝营养快线补补小身体(`・ω・´)\n\n\u003cp\u003e\n  \u003cimg src=\"./screenshots/alipay.jpg\" width=\"256\" height=\"350\" style=\"display: inline;\"\u003e\n  \u003cimg src=\"./screenshots/wxpay.jpg\" width=\"256\" height=\"350\" style=\"display: inline;\"\u003e\n\u003c/p\u003e\n\n## 案例\n\n\u003cimg src=\"./screenshots/cases.png\" style=\"display: inline;\"\u003e\n\n## 贡献\n\n有任何意见或建议都欢迎提 issue\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwux-weapp%2Fwux-weapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwux-weapp%2Fwux-weapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwux-weapp%2Fwux-weapp/lists"}