提示：使用colorui組件在微信小程序使用 必須先懂得微信開發工具的使用。

文章目錄

• 前言
• 一、ColorUI是什么？
• 二、使用步驟
• • 1.下載ColorUI組件文件
  • 2.微信開發工具項目引用colorui組件
  • • 2.1 操作方式一 如下（示例）：`前提是項目已經存在，想在引用colorui組件`
    • 2.2 操作二 方式如下（示例）：`前提是項目還沒開始，使用colorui組件`
• 總結

---

前言

如何通過微信開發工具使用ColorUI組件

---

一、ColorUI是什么？

ColorUI是一個Css類的UI組件庫！在你引入樣式后可以根據class來調用組件 ,不是一個Js框架。相比于同類小程序組件庫，ColorUI更注重于視覺交互/

二、使用步驟

1.下載ColorUI組件文件

下載地址：
https://github.com/weilanwl/ColorUI

下載的Colorui組件文件如下：

1. 使用UniApp開發：對應上面圖片中的文件名為：Colorui-UniApp;2. 使用微信開發工具作為開發組件：對應上面圖片的文件名為：template;3. 使用微信開發工具打開Colorui組件示例：對應上面圖片的文件名為：demo;

提示：如果在微信開發工具的項目已經存在了，想在引用Colorui組件只要引用： 上面圖片的template文件下的：colorui文件即可。

2.微信開發工具項目引用colorui組件

**溫馨提示：將 app.json 中的 "style": "v2" 去除，小程序的新版基礎組件強行加上了許多樣式，難以覆蓋，不關閉將造成部分組件樣式混亂**。

2.1 操作方式一 如下（示例）：前提是項目已經存在，想在引用colorui組件

1.打開微信開發工具的已經存在的項目：

2.引用colorui組件：把template文件下的colorui文件拷貝在項目的test下：


3.colorui配置：如下

1. app.wss文件中引用css：

/**app.wxss**/ @import "./colorui/main.wxss";/*引入colorui組件*/ @import "./colorui/icon.wxss";/*引入colorui組件*/

2. app.json文件中配置綁定組件：

"usingComponents": {"cu-custom": "/colorui/components/cu-custom"}

3. 最后展展示效果：

2.2 操作二 方式如下（示例）：前提是項目還沒開始，使用colorui組件

把template文件拷貝至微信開發工具的項目文件目錄下：如下圖：然后可以起自己的項目名稱即可：

使用微信開發工具導入template文件：

不要在配置其他就可以使用 最后效果如下：

---

總結

提示：如有不明白問我

總結

以上是生活随笔為你收集整理的【微信技术-微信小程序】------ 使用ColorUI组件简单入门的全部內容，希望文章能夠幫你解決所遇到的問題。

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