微信小程序入门ColorUI组件库使用方法

自学入门小程序不久，在对比现在主流的组件库后，笔者我选择了ColorUI，因为ColorUI界面精美，使用方法简单，只需将ColorUI的代码片段复制到你的小程序中即可，还方便自己定制。

下面是ColorUI官方的小程序，可以在手机上先预览实际效果

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

GitHub：https://github.com/weilanwl/ColorUI

废话不多说，现在介绍下我的使用方法：

首先在官方网站下载压缩包解压后，打开目录/demo/colorui，将里面的两个文件icon.wxss和main.wxss复制到你的项目下

之后再在app.wxss里面写入：

@import "icon.wxss";

@import "main.wxss";

意义就是将复制进来的css样式导入全局样式文件中，这样你就可以在项目其他地方直接引用你导入的ColorUI样式

完成这些后就可以从ColorUI的源码中复制自己想要的部分去用了，我的使用方式是导入下载的压缩包里面的那个demo文件

那个demo文件实质是个可以运行的小程序源码

打开后这里就可以查看你所需要的元素的源代码了

之后找到你需要的标签，点击左下角打开路径（方便找到对应代码在哪，可忽略此步骤），再打开相应的xxx.html文件将你需要代码复制到你自己的项目中，就可以使用了。

微信小程序入门ColorUI组件库使用方法相关推荐

A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”
注意:本篇文章不含技术方面的内容,只是感慨一下,如果你有类似的情况,或者想感受一下搞笑的bug,可以继续看一看,如果你想学习技术,本篇文章大概不会为你提供什么教学帮助. 我在做微信小程序的时候遇到过一 ...
微信小程序引入WeUI组件库（笔记）
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
微信小程序集成WeUI组件库
1.引入nmp依赖(前提是已经安装了nmp) 在小程序根目录(app.js所在目录),打开cmd, 输入:npm init -y,回车初始nmp 然后再输入:npm i miniprogram-sm- ...
微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
微信小程序引入WeUI组件库并使用组件
1. git 下载:weui,解压,打开文件夹,dist文件夹,style-->weui.wxss,复制到项目里 2.useExtendedLib引入根目录的app.json里引入 " ...
微信小程序引用Vant组件库message：没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...
问题描述 message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,或配置 project.config.json 的 pack ...
【微信小程序】-- 自定义组件 -- 数据、方法和属性（三十三）

微信小程序入门ColorUI组件库使用方法

微信小程序入门ColorUI组件库使用方法相关推荐

最新文章

热门文章