目錄

• • • 一、什么是ColorUI
    • 二、如何使用:
    • • • 第一步 下載代碼包，獲取素材
        • 第二步 使用demo文件，正式使用
        • 第三步 正式使用（再次強調，我是基于上面提到的第二種方式引入colorui組件的）

官網網站：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";

• 此時就可以直接使用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>

• 再進入icon.js文件找參數

//關鍵部分代碼 { name: 'appreciate', isShow: true }

• 將兩部分代碼結合一下得到我們自己的代碼：

  <!-- 關鍵部分代碼 --> <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>

//關鍵部分代碼 { name: 'appreciate', isShow: true }

得到我們的代碼,并且粘貼到我們自己的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>

如下圖，成功使用：

結束~~~

總結

以上是生活随笔為你收集整理的color ui的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。