All Projects → wux-weapp → Wux Weapp

wux-weapp / Wux Weapp

Licence: mit
🐶 一套组件化、可复用、易扩展的微信小程序 UI 组件库

Programming Languages

javascript
184084 projects - #8 most used programming language
Less
1899 projects

Projects that are alternatives of or similar to Wux Weapp

wxbizdatacrypt
微信小程序加密数据解密算法Go版
Stars: ✭ 132 (-97.2%)
Mutual labels:  weixin, weapp, wxapp, wechat-weapp
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-96.07%)
Mutual labels:  mini-program, weixin, weapp, wxapp
Awesome Wechat Weapp
微信小程序开发资源汇总 💯
Stars: ✭ 36,769 (+681.32%)
Mutual labels:  wxapp, wechat-weapp, weapp-demo, miniprogram
Wxa Plugin Canvas
小程序海报组件-生成朋友圈分享海报并生成图片
Stars: ✭ 2,692 (-42.8%)
Mutual labels:  weixin, weapp, wxapp
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (-75.5%)
Mutual labels:  weixin, weapp, wxapp
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (-71.21%)
Mutual labels:  weixin, weapp, wxapp
Dva Wxapp
微信小程序的dva集成
Stars: ✭ 183 (-96.11%)
Mutual labels:  mini-program, weapp, wxapp
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+158.24%)
Mutual labels:  mini-program, weapp, miniprogram
Weapp Demo Breadtrip
基于面包旅行 API 制作的微信小程序示例
Stars: ✭ 282 (-94.01%)
Mutual labels:  mini-program, weixin, weapp
Wxapp Boilerplate
使用 webpack, babel, scss 开发的微信/支付宝小程序项目脚手架
Stars: ✭ 367 (-92.2%)
Mutual labels:  mini-program, weapp, wxapp
taro-icons
基于 Taro 的小程序图标库
Stars: ✭ 53 (-98.87%)
Mutual labels:  weixin, weapp, mini-program
Taro Ui
一款基于 Taro 框架开发的多端 UI 组件库
Stars: ✭ 3,806 (-19.12%)
Mutual labels:  ui-design, wxapp, wechat-weapp
Iview Weapp
一套高质量的微信小程序 UI 组件库
Stars: ✭ 6,145 (+30.58%)
Mutual labels:  weixin, weapp, ui-design
Leshare Shop Weapp
基于微信小程序的电商平台,采用原生框架开发
Stars: ✭ 183 (-96.11%)
Mutual labels:  weixin, weapp, wxapp
weapp.request
为微信小程序提供的网络请求组件,是 wx.request 的扩展,基于 Promise API,添加缓存控制
Stars: ✭ 29 (-99.38%)
Mutual labels:  weapp, wxapp, miniprogram
mobx-wxapp
在小程序中使用mobx
Stars: ✭ 54 (-98.85%)
Mutual labels:  weapp, wxapp, miniprogram
wxapp-computed
在微信小程序中使计算值(computed)
Stars: ✭ 20 (-99.58%)
Mutual labels:  weapp, wxapp, miniprogram
xdk-cli
微信小程序cli脚手架,目前提供的功能有:快速创建启动模版功能【页面 / 组件】, 自动发布体验版功能,设置版本号/版本描述功能,自定义指令功能
Stars: ✭ 43 (-99.09%)
Mutual labels:  weapp, wxapp
7yue api server
旧岛小程序的 api server
Stars: ✭ 48 (-98.98%)
Mutual labels:  weixin, mini-program
wxapp-api-interceptors
微信小程序api拦截器
Stars: ✭ 99 (-97.9%)
Mutual labels:  weapp, wxapp

Wux Weapp

一套组件化、可复用、易扩展的微信小程序

star this repo fork this repo circleci travis github workflow
npm downloads downloads license
Snippets for Sublime Snippets for VScode Snippets for Atom

快速上手

使用之前

在开始使用之前,你需要先阅读 微信小程序自定义组件 的相关文档。

如何安装

方式一. 通过 npm 安装

通过 npm 安装,需要依赖小程序基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建,详见 npm 支持

# Using npm
npm i wux-weapp -S --production

# Using yarn
yarn add wux-weapp --production

方式二. 通过下载代码

通过 GitHub 下载 Wux Weapp 的代码,然后 将 packages/lib/ 目录拷贝到自己的项目中。

  • packages/lib/ - 压缩版(ES5)
  • packages/es/ - 未压缩版(ES6,使用时需要开启 ES6 转 ES5,位于开发者工具右上角-详情-本地配置)
git clone https://github.com/wux-weapp/wux-weapp.git
cd wux-weapp

方法三. 选择需要的模块,量身定制

参考 量身定制

如何使用

按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看:

在 page.json 中引入组件

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

在 page.wxml 中使用组件

<wux-button size="small">Button</wux-button>
<wux-button size="default">Button</wux-button>
<wux-button size="large">Button</wux-button>

组件库文件体积过大的问题

随着组件库越来越丰富,文件的体积也越来越大,某些时候我们可能只需要其中的一个或多个组件,如果直接引入整个组件库的话是不合适的,这时候就需要我们将要使用到组件给单独抽离出来。

  1. 使用 量身定制 功能自动抽离组件(官方推荐)。

  2. 手动抽离组件,也很简单直接拷贝 packages/ 目录下对应的组件即可,当然某些组件存在依赖关系,则抽离过程会相对复杂一些,以 ActionSheet、Badge、Button 为例。

demo/
  |-actionsheet/
  |-animation-group/
  |-backdrop/
  |-badge/
  |-button/
  |-helpers/
  |-index.js
  • 首先将 packages/ 目录下对应组件(如 actionsheet)拷贝至 demo 目录;
  • 其次看其对应目录下 index.json 是否存在依赖组件,若存在则一一拷贝;
  • 然后看组件是否依靠 JavaScript 主动调用(查看对应文档可得知或存在 index.js 文件中),是则拷贝 index.js 文件,并删除不需要的组件引用;
  • 最后查看组件目录下 index.js 是否存在对帮助方法的引用,若存在则拷贝 helpers 目录(抑或直接拷贝不管是否存在引用)。

预览

您可以扫描下方的小程序码体验或用 微信web开发者工具 打开 example 目录(请注意,是 example 目录,不是整个项目)。

logo

相关链接

讨论组

您可以扫码添加下方的左侧『Wux 小助手』微信并备注『Wux Weapp』或者『加群』进交流群。 注意:如果添加『Wux 小猪手』没有反应,可以再尝试添加后边作者『Skyvow』微信。

赞助

请作者喝营养快线补补小身体(`・ω・´)

案例

贡献

有任何意见或建议都欢迎提 issue

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].