color ui的使用_color ui使用

官网网站：https://github.com/weilanwl/ColorUI

注意：colorui会有全局wxss样式，所以直接贸然引入已经开发好的项目，可能会对其它页面样式造成影响，所以如果仅仅是单个页面样式改变，可以直接引用复制它的部分的源码来使用。

一、什么是ColorUI

ColorUI是一个微信小程序css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。

二、如何使用:

第一步 下载代码包，获取素材

如何下载呢？直接在GitHub上面下载压缩包，然后解压获取其中的demo文件

解压后的文件，如上图；

打开，获取其中的demo文件夹，如下图；

第二步 使用demo文件，正式使用

两种使用方法，分别为

直接将demo文件夹导入工程进行开发或者仅仅引入demo文件夹中的colorui文件

如上图，demo文件夹下面的colorui文件；

我们采用第二种方式：引入colorui文件

第三步 正式使用（再次强调，我是基于上面提到的第二种方式引入colorui组件的）

步骤如下：

• 将demo文件夹中的colorui文件夹复制到我本地已经创建好的工程目录中，如下图

• 用微信开发者程序打开我们自己的工程，我这里名称为miniprogram；

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
1
2

• 此时就可以直接使用colorui的元素了，如何使用？就是直接复制粘贴它的源码，源码在哪里，就是deme文件夹中，所以需要用微信小程序开发工具打开刚才的deme文件夹,想要什么组件，直接找到对应源码即可，下图是不同源码对应的页面

• 我们以第一个元素页面为例，打开其中的图标部分，如下图

• 以引入第一个图标为例，先进入icon.wxml

<!-- 关键部分代码 -->
<view class="cu-list grid col-3">
  <view class="cu-item" wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
    <text class="cuIcon-{{item.name}} lg text-gray"></text>
    <text>{{item.name}}</text>
  </view>
</view>

1
2
3
4
5
6
7
8

• 再进入icon.js文件找参数

//关键部分代码
{ name: 'appreciate', isShow: true }
1
2

• 将两部分代码结合一下得到我们自己的代码：

  <!-- 关键部分代码 -->
  <view class="cu-list grid col-3">
    <view class="cu-item" wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
      <text class="cuIcon-{{item.name}} lg text-gray"></text>
      <text>{{item.name}}</text>
    </view>
  </view>
  
  1
  2
  3
  4
  5
  6
  7
  8

//关键部分代码
{ name: 'appreciate', isShow: true }
1
2

得到我们的代码,并且粘贴到我们自己的wxml页面中，编译运行，即可使用了。

<view class="cu-list grid col-3">
  <view class="cu-item" >
    <text class="cuIcon-appreciate lg text-gray"></text>
    <text>appreciate</text>
  </view>
   </view>
1
2
3
4
5
6

如下图，成功使用：

结束~~~