微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南
在最近的小程序项目里前端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组件的更多相关文章
- 微信小程序-基于高德地图API实现天气组件(动态效果)
微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
- 微信小程序把玩(二十七)audio组件
原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...
- 微信小程序把玩(二十三)modal组件
原文:微信小程序把玩(二十三)modal组件 modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件-- ...
- 微信小程序把玩(十九)radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...
- 微信小程序把玩(二十)slider组件
原文:微信小程序把玩(二十)slider组件 slider滑动组件用的不太多,在其他平台反正我是用的不多 主要属性: wxml <slider max="100" step= ...
- 微信小程序把玩(二十一)switch组件
原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</vi ...
- 微信小程序把玩(十八)picker组件
原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...
- 微信小程序把玩(十五)checkbox组件
原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...
- 微信小程序把玩(十六)form组件
原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...
随机推荐
- Jmeter之逻辑控制器/定时器
Jmeter逻辑控制器 更新中 线程组->添加->逻辑控制器->XX控制器 1.仅一次控制器 使用场景:线程数为1,登录1次,循环浏览N次. 如果,登录账号参数化,线程数为M时,登录 ...
- java的Thread Dump诊断工具
1.1什么是Thread Dump? Thread Dump是非常有用的诊断Java应用问题的工具.每一个Java虚拟机都有及时生成所有线程在某一点状态的thread-dump的能力,虽然各个 Jav ...
- RHEL8运维新利器--Cockpit使用方法
在web浏览器中查看服务器并使用鼠标执行系统任务,很容易管理存储.配置网络和检查日志等操作. # 安装cockpit yum -y install cockpit # 启用cockpit system ...
- STL-set 容器以及迭代器的简单理解
先说下set的基本操作和时间复杂度 begin() ,返回set容器的第一个元素 end() ,返回set容器的最后一个元素 clear() ,删除set容器中的所有的元素 em ...
- java启动server时报端口无效解决方法
今天在Java里配置Tomcat服务器,启动时出现如下图报错信息 The server cannot be started because one or more of the ports are i ...
- (๑•̀ㅂ•́)و✧QQ用户信息管理系统
这是第二篇文章,就直接切主题 这次剖析的也是自己的作业之一:QQ信息管理系统 一:(此处省略了建Proarams类,其实目的只是想强调把连接语句单独放一个类里更容易调用,命名规范如图) 二:(导入SQ ...
- Vue-Cli项目如何查看依赖调用关系?
Vue是个优秀的前端框架,不管是前端还是后端开发人员都能很快使用Vue来开发应用.但是随着项目开发的深入,组件之间的依赖就变得越来越多,耦合越来越严重.这时候我们迫切地需要分析下组件和依赖之间的调用关 ...
- python转化13位时间戳
# -*- coding: utf-8 -*- def get_time_stamp13(datetime_obj): import datetime, time # 生成13时间戳 eg:15578 ...
- c#传入类名添加类对应的表数据
添加方法: public int Insert<T>(T model) where T : class, new() { int sucess = 0; if (model is Temp ...
- 14、yum仓库搭建
一.本地仓库 1.yum搭建本地仓库(单台如何实现) 1) 挂载cd光盘,因为里面很多的软件包 [root@www.oldboyedu.com ~]# mount /dev/cdrom /mnt 2) ...