微信小程序使用colorui

蔚落 2022-11-20 04:59 776阅读 0赞

一，下载colorui源码

[官方网站：https://www.color-ui.com/][https_www.color-ui.com]

[GitHub：https://github.com/weilanwl/ColorUI][GitHub_https_github.com_weilanwl_ColorUI]

二，使用

1， 这个是下载好的colorui文件，打开目录**/demo/colorui**，将里面的两个文件**icon.wxss**和**main.wxss**复制到你的项目下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

![20201107152301653.png][]

2，然后在**app.wxss**里面引入以下两个文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

3，使用组件

列：我们使用cu-custom组件的话，需要在app.json定义以下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3][]

需要的页面引入index.wxml

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4][]

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 5][]

三，查看

直接把刚才在现在的文件源码的demo文件导入到小程序中查看源码分析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 6][]

使用colorui写小程序的话，引入colorui样式源码就可以直接使用了，在我们打开的demo里面把需要的源码复制到项目中就可以使用里面的组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 7][]

[https_www.color-ui.com]: https://www.color-ui.com/
[GitHub_https_github.com_weilanwl_ColorUI]: https://github.com/weilanwl/ColorUI
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221120/82e7be4af81049f58b3c1d9bcdd702f8.png
[20201107152301653.png]: /images/20221120/be915e649d1340e089fd1be33093cf01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: /images/20221120/4e3446db014d440a9be406df7d33e0d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: /images/20221120/fa3e3fe4b42d4ea8a3dfa0a8fa4cdd6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3]: /images/20221120/18fba28ff788479eb52f3fb6f2a0011d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4]: /images/20221120/b6f3b689cdd04883905372e33d60eb99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 5]: /images/20221120/c352cd1056a647d5b7ecb5624f259b97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 6]: /images/20221120/2898a74a02e74b0c8c87bb52e98a9560.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 7]: /images/20221120/22e3096c68904b5d86432f8471ce91e3.png