微信小程序mpvue项目使用WuxWeapp前端UI组件

71次阅读

共计 636 个字符,预计需要花费 2 分钟才能阅读完成。

前言:这是一篇简单粗暴的使用指南
在最近的小程序项目里前端 UI 框架最后选择使用 WuxWeapp,这篇文章记录一下如何在小程序 mpvue 项目中使用该 UI 组件。
步骤一:下载源码
(地址在这里)主要是里面的 dist 文件夹,下载下来之后就把 dist 文件夹放到 mpvue 脚手架自动生成的 static 文档中。具体的目录层级各位都可以按自己的喜好来设计。贴上我的仅供参考。

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

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

Tips:

小程序的限制 由于小程序的定位是轻、快、小吧,所以小程序的代码包的大小也是有限制的,一个包不能超过 2M。所以,我们引入到项目中的 wux 组件的代码小程序也会进行编译因而增加了代码包的大小,所以最好还是按需使用。

如何在 Wux 的基础上自定义样式 比如我想在 wux 修改 wux 按钮组件的颜色,因为这种行为是会存在的,可能项目需求要按钮就得是一种特定的颜色,而且我们想直接写 css 来修改颜色也有点困难。那么不妨,我们可以从组件源码下手,其实加个背景颜色什么的还算是简单的,只要在 wxss 文件里加一个 css 的 class 就差不多了…这一直是其中一种思路,其实也给了我们机会去看看别人是如何实际出一个 UI 组件库的。(我想我们大多数人都是用过,却很少看过代码八)

写到这里,希望能对你有帮助 (#^.^#)

正文完
 0