目錄

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

官網(wǎng)網(wǎng)站：https://github.com/weilanwl/ColorUI

注意：colorui會(huì)有全局wxss樣式，所以直接貿(mào)然引入已經(jīng)開(kāi)發(fā)好的項(xiàng)目，可能會(huì)對(duì)其它頁(yè)面樣式造成影響，所以如果僅僅是單個(gè)頁(yè)面樣式改變，可以直接引用復(fù)制它的部分的源碼來(lái)使用。

一、什么是ColorUI

ColorUI是一個(gè)微信小程序css庫(kù)！！！在你引入樣式后可以根據(jù)class來(lái)調(diào)用組件，一些含有交互的操作我也有簡(jiǎn)單寫，可以為你開(kāi)發(fā)提供一些思路。

二、如何使用:

第一步 下載代碼包，獲取素材

如何下載呢？直接在GitHub上面下載壓縮包，然后解壓獲取其中的demo文件

解壓后的文件，如上圖；

打開(kāi)，獲取其中的demo文件夾，如下圖；

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

兩種使用方法，分別為

直接將demo文件夾導(dǎo)入工程進(jìn)行開(kāi)發(fā)或者僅僅引入demo文件夾中的colorui文件

如上圖，demo文件夾下面的colorui文件；

我們采用第二種方式：引入colorui文件

第三步 正式使用（再次強(qiáng)調(diào)，我是基于上面提到的第二種方式引入colorui組件的）

步驟如下：

• 將demo文件夾中的colorui文件夾復(fù)制到我本地已經(jīng)創(chuàng)建好的工程目錄中，如下圖

• 用微信開(kāi)發(fā)者程序打開(kāi)我們自己的工程，我這里名稱為miniprogram；

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

• 此時(shí)就可以直接使用colorui的元素了，如何使用？就是直接復(fù)制粘貼它的源碼，源碼在哪里，就是deme文件夾中，所以需要用微信小程序開(kāi)發(fā)工具打開(kāi)剛才的deme文件夾,想要什么組件，直接找到對(duì)應(yīng)源碼即可，下圖是不同源碼對(duì)應(yīng)的頁(yè)面

• 我們以第一個(gè)元素頁(yè)面為例，打開(kāi)其中的圖標(biāo)部分，如下圖

• 以引入第一個(gè)圖標(biāo)為例，先進(jìn)入icon.wxml

<!-- 關(guān)鍵部分代碼 --> <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>

• 再進(jìn)入icon.js文件找參數(shù)

//關(guān)鍵部分代碼 { name: 'appreciate', isShow: true }

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

  <!-- 關(guān)鍵部分代碼 --> <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>

//關(guān)鍵部分代碼 { name: 'appreciate', isShow: true }

得到我們的代碼,并且粘貼到我們自己的wxml頁(yè)面中，編譯運(yùn)行，即可使用了。

<view class="cu-list grid col-3"><view class="cu-item" ><text class="cuIcon-appreciate lg text-gray"></text><text>appreciate</text></view></view>

如下圖，成功使用：

結(jié)束~~~

總結(jié)

以上是生活随笔為你收集整理的color ui的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。