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

在最近的小程序项目里前端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. Spring MVC(一)Spring MVC的原理

    1.Spring MVC的目的 构建像Spring框架那样灵活和松耦合的Web应用程序. 2.Spring MVC中如何处理Request? 每当用户在Web浏览器中点击链接或者提交表单时,Reque ...

  2. TCP如何保证可靠传输(转)

    TCP协议传输的特点主要就是面向字节流.传输可靠.面向连接.这篇博客,我们就重点讨论一下TCP协议如何确保传输的可靠性的. 确保传输可靠性的方式TCP协议保证数据传输可靠性的方式主要有: 校验和 序列 ...

  3. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  4. RPC性能优化

    优化 1:元数据共享 hessian 序列化会将两种信息写到输出流: 元数据:即类全名,字段名 值数据:即各个字段对应值(如果字段是复杂类型,则会递归传递该复杂类型 的元数据和内部字段的值数据) 在 ...

  5. 【转】FireMonkey ListView 自动计算行高

    说明:展示 ListView 视其每一行 Item 的 Detail 字串长度自动调整高度(可每行高度不同). 适用:Delphi XE7 / XE8 源码下载:[原创]ListView_自动计算行高 ...

  6. 服务器端升级为select模型处理多客户端

    流程图: select会定时的查询socket查询有没有新的网络连接,有没有新的数据需要读,有没有新的请求需要处理,一旦有新的数据需要处理,select就会返回,然后我们就可以处理相应的数据,sele ...

  7. 3.java并发包

    1.java并发包介绍 JDK5.0 以后的版本都引入了高级并发特性,大多数的特性在java.util.concurrent 包中,是专门用于多线程并发编程的,充分利用了现代多处理器 和多核心系统的功 ...

  8. 使用 jenkins 为 nginx 增加上下文

    每次需要在Nginx增加上下文,都需要添加如下两段 ​ server.conf upstream serverdownloadPage { server 10.11.19.6:3023; } ​ ht ...

  9. Windows 端口占用查询

    1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议    本地地址                     外部地址  ...

  10. 设计模式相关面试问题-Builder基础详解与代码解读

    java的builder模式详解: 概念:建造者模式是较为复杂的创建型模式,它将客户端与多含多个组成部分(或部件)的复杂对象的创建过程分离. 使用场景:当构造一个对象需要很多参数的时候,并且参数的个数 ...