前言:这是一篇简单粗暴的使用指南

在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件。

步骤一:下载源码

地址在这里
主要是里面的dist文件夹,下载下来之后就把dist文件夹放到mpvue脚手架自动生成的static文档中。具体的目录层级各位都可以按自己的喜好来设计。贴上我的仅供参考。

步骤二:引入组件

我们需要在app.json文件中进行配置,其中有一个"usingComponents"配置属性。需要使用什么组件,按需引入就行。配置如下:

步骤三:使用组件

最后就是使用啦,该UI组件也有官方的文档,已经写得很详细了。


Tips:

    • 小程序的限制
      由于小程序的定位是轻、快、小吧,所以小程序的代码包的大小也是有限制的,一个包不能超过2M。所以,我们引入到项目中的wux组件的代码小程序也会进行编译因而增加了代码包的大小,所以最好还是按需使用。
    • 如何在Wux的基础上自定义样式
      比如我想在wux修改wux按钮组件的颜色,因为这种行为是会存在的,可能项目需求要按钮就得是一种特定的颜色,而且我们想直接写css来修改颜色也有点困难。那么不妨,我们可以从组件源码下手,其实加个背景颜色什么的还算是简单的,只要在wxss文件里加一个css 的class就差不多了…这一直是其中一种思路,其实也给了我们机会去看看别人是如何实际出一个UI组件库的。(我想我们大多数人都是用过,却很少看过代码八)
    • 更新(2019-4-18)
      对于第二点改源码这种事情还是太粗暴了,我们可以找到组件的css类修改之。指路

微信小程序mpvue项目使用WuxWeapp前端UI组件的更多相关文章

  1. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

  2. 微信小程序把玩(二十七)audio组件

    原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...

  3. 微信小程序把玩(二十三)modal组件

    原文:微信小程序把玩(二十三)modal组件 modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件-- ...

  4. 微信小程序把玩(十九)radio组件

    原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...

  5. 微信小程序把玩(二十)slider组件

    原文:微信小程序把玩(二十)slider组件 slider滑动组件用的不太多,在其他平台反正我是用的不多 主要属性: wxml <slider max="100" step= ...

  6. 微信小程序把玩(二十一)switch组件

    原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</vi ...

  7. 微信小程序把玩(十八)picker组件

    原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...

  8. 微信小程序把玩(十五)checkbox组件

    原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...

  9. 微信小程序把玩(十六)form组件

    原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...

随机推荐

  1. nginx-host

    下载nginx镜像 docker pull docker.io/nginx:latest 由于calico网络不支持http协议,所以即使你在iptables中配置了nat路由,将访问宿主机80端口的 ...

  2. 怎样理解DOM

    一句话总结: DOM 是一个 js 对象. 他可以赋予 js 控制 html 文档的能力.  全称: Document Object Model. DOM 的最小组成单位是: 节点 , 节点有7种类型 ...

  3. 深入理解hive之事务处理

    事务的四个特性 1.automicity:原子性 2.consistency:一致性 3. isolation:独立性 4.durability:持久性 5.支持事务有几个条件需要满足:1.所有的事务 ...

  4. 05 正确运行一个Go程序

    Go代码文件,程序中必须指定启动函数main() Hello.go package main //声明为main包,即可以编译成二进制程序 import "fmt" //导入fmt ...

  5. 6 java 笔记

    1 java的类通过构造器来创建该类的对象 2 java提供extends关键字来实现子类继承父类 3 初始化块总是在构造器调用之前被执行 4 可以吧java中的类当成一种自定义的类型 5 类定义的变 ...

  6. Java高并发程序设计学习笔记(三):Java内存模型和线程安全

    转自:https://blog.csdn.net/dataiyangu/article/details/86412704 原子性有序性可见性– 编译器优化– 硬件优化(如写吸收,批操作)Java虚拟机 ...

  7. 文本分析:初识Gensim

    作者:doze_worm来源:https://www.douban.com/note/620615113/ gensim 起步:本节介绍理解和使用 gensim 所必须的基础概念和术语,并提供一个简单 ...

  8. 使用HandyJSON导致的内存泄漏问题相关解决方法

    在移动开发中,与服务器打交道是不可避免的,从服务器拿到的接口数据最终都会被我们解析成模型,现在比较常见的数据传输格式是json格式,对json格式的解析可以使用原生的解析方式,也可以使用第三方的,我们 ...

  9. mysql计算QPS

    首先连接上mysql: $ mysql -h .x -P3306 -uusername -p123456 进入Mysql之后,查询general_log: mysql> SHOW VARIABL ...

  10. shell 中执行Oracle查询和执行存储过程

    [oracle@master2 test]$ more b.sh #!/bin/sh #数据库地址 ip=192.168.1.250 port sid=orcl username=c##scott p ...