好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

wux-weapp

wux-weapp 介绍

wux-weapp一套组件化、可复用、易扩展的 微信小程序 UI 组件库

如何使用

通过 npm 安装,需要依赖 小程序 基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档。

通过 GitHub 下载 Wux Weapp 的 代码 ,然后 将 dis t/ 目录拷贝到自己的项目中。按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看:

在 page.json 中引入组件

"usingComponents": {"wux-button": " dis t/button/index"}

在 page.wxml 中使用组件

<wux-button size="small" />

<wux-button size="default" />

<wux-button size="large" />

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

随着组件库越来越丰富, 文件 的体积也越来越大,某些时候我们可能只需要其中的 一个 或多个组件,如果直接引入整个组件库的话是不合适的,这时候就需要我们将要使用到组件给单独抽离出来,也很简单直接拷贝 dis t/ 目录下对应的组件即可,当然某些组件存在依赖关系,则抽离过程会相对复杂一些,以 ActionSheet、Badge、Button 为例。

demo/

|-actionsheet/

|-animation-group/

|-backdrop/

|-badge/

|-button/

|-helpers/

|-index.js

首先将 dis t/ 目录下对应组件(如 actionsheet)拷贝至 demo 目录;?

其次看其对应目录下index.json 是否存在依赖组件,若存在则一一拷贝;

然后看组件是否依靠 JavaScript 主动 调用 (查看对应文档可得知或存在index.js 文件 中),是则拷贝 index.js 文件 ,并 删除 不需要的组件引用;?

最后查看组件目录下 index.js 是否存在对帮助 方法 的引用,若存在则拷贝 helpers 目录(抑或直接拷贝不管是否存在引用)。

网站地址 : https://wux-weapp.github.io/wux-weapp-docs/#/

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

网站描述: 组件化、可复用、易扩展的 微信小程序 UI 组件库

wux-weapp官方网站

官方网站: https://wux-weapp.github.io/wux-weapp-docs/#/

如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。

查看更多关于wux-weapp的详细内容...

  阅读:54次

上一篇

下一篇

第1节:PhoneGap    第2节:WXPage    第3节:Remax    第4节:Mobiscroll    第5节:mobilebone.js    第6节:WeZRender    第7节:weex    第8节:image-cropper    第9节:mobile-calendar    第10节:amazeui    第11节:weui    第12节:wxapp-market    第13节:material-kit    第14节:AUI Mobile    第15节:touchui    第16节:alita    第17节:vum    第18节:FrozenUI    第19节:Touch WX    第20节:Flutter    第21节:nutui    第22节:Onsen UI    第23节:Tina.js    第24节:fastclick    第25节:golden-layout    第26节:Weex Ui    第27节:cordova    第28节:wxParse    第29节:antmove    第30节:GMU    第31节:react-use-gesture    第32节:labrador    第33节:wux-weapp    第34节:vux    第35节:noUiSlider    第36节:wechat-im    第37节:jquery-weui    第38节:vant    第39节:pulltorefresh.js    第40节:slip.js    第41节:react-native-sideswipe    第42节:BeautyWe.js    第43节:lottie-web    第44节:react-native-elements    第45节:cube-ui    第46节:lin-ui    第47节:wxSearch    第48节:DHTMLX    第49节:bttn.css    第50节:微信小程序    第51节:westore    第52节:framework7    第53节:uni-app    第54节:vue2-elm    第55节:vue-ydui    第56节:bindingx    第57节:Jingle UI    第58节:weui-wxss    第59节:WeexBox 2.0    第60节:vant-weapp    第61节:NativeScript    第62节:快应用    第63节:weui+    第64节:Taro    第65节:NativeBase    第66节:graceUI    第67节:mavonEditor    第68节:Ratchet    第69节:AKjs.Mobile    第70节:mobile-angular-ui    第71节:React Belle    第72节:Hermes    第73节:ColorUI    第74节:Atom-Design    第75节:ionic    第76节:wxapp-img-loader    第77节:React Native    第78节:jquery Mobile    第79节:vueg    第80节:mand-mobile    第81节:wemark    第82节:vasern    第83节:mint-ui    第84节:uni-simple-router    第85节:switchery    第86节:mobi.css    第87节:Mand Mobile    第88节:react-virtualized    第89节:iview-weapp    第90节:eros    第91节:minui    第92节:react-native-ui-lib