【微信小程序6】引入第三方UI的方法（ColorUi）

红太狼 2024-03-16 16:40 8阅读 0赞

小程序的ColorUI是基于原生开发的一套非常优秀的UI。能够让我们在开发过程中，很好、很契合地使用。具体介绍参考ColorUI官方网址：[http://docs.xzeu.com/\#/][http_docs.xzeu.com]

![e52151fca1804797b4e17bf86c52f314.png][]

## **一、下载ColorUI** ##

点击官网首页中的GitHub，进入下载页面。然后按照如下图标记进行操作。

![72520cf14c474ac7bbe06db136add0a7.png][]

下载完成后解压缩，打开之后，显示目录结构如下：

![8173d7337707476d8aa6d079d6e4f61b.png][]

## **二、引入ColorUI** ##

###  **1、复制colorui文件夹** ###

打开上面目录结构中的demo文件夹，把里面的colorui文件夹整个复制到你的小程序项目中，放置到pages文件夹同层级中。

![61f2ae9bfb0747369ae52e3f9df97059.png][]

###  **2、设置引入路径** ###

打开项目目录下的**app.wxss**文件，在其中写入如下代码：

/**app.wxss**/
    @import '/colorui/main.wxss';
    @import '/colorui/icon.wxss';
    @import '/colorui/animation.wxss';

###  **3、开发文档** ###

开发过程中，可以参考官方文档的说明：[http://docs.xzeu.com/\#/info/快速开始/快速布署][http_docs.xzeu.com_info]

同样的，也可以直接打开 ColorUI文件包中提供的demo文件，从里面查找想要的内容，直接复制到个人项目中。

![9eca9dbf2ace450c9655a87d6934e662.png][]

###  **4、ColorUi官方包** ###

为方便大家的下载，我把已经下载好的ColorUi2.0的包上传CSDN了，可以直接从此处下载：[https://download.csdn.net/download/m0\_60318025/87894170][https_download.csdn.net_download_m0_60318025_87894170]

[http_docs.xzeu.com]: http://docs.xzeu.com/#/
[e52151fca1804797b4e17bf86c52f314.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fb3a6a951ce94317a947ab5d732c389f.png
[72520cf14c474ac7bbe06db136add0a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2e6c1e42fc9e486cadab63409d0f4d7b.png
[8173d7337707476d8aa6d079d6e4f61b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/742f9ed11ddf449a80f674fc0dd93ce3.png
[61f2ae9bfb0747369ae52e3f9df97059.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/49fc03a6b7dc4b9a94fde4c7383c35c5.png
[http_docs.xzeu.com_info]: http://docs.xzeu.com/#/info/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/%E5%BF%AB%E9%80%9F%E5%B8%83%E7%BD%B2
[9eca9dbf2ace450c9655a87d6934e662.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a3fe6b95621146289d0bdd61a1ebe0a5.png
[https_download.csdn.net_download_m0_60318025_87894170]: https://download.csdn.net/download/m0_60318025/87894170