一、快速开始

参照colorui官方给出的说明：GitHub - weilanwl/ColorUI: 鲜亮的高饱和色彩，专注视觉的小程序组件库

1.从现有项目开始

下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录

App.wxss 引入关键Css main.wxss icon.wxss

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....

说明：要用现有的项目，直接复制对应目录下的文件夹到自己项目的更目录就可以。

1.1 详细步骤：

1.下载git上的官方项目然后解压，解压后目录结构如下：

一共有三个文件夹：Colorui-UniApp(我们用不到)、demo、template

2. 如果只是想在现有项目中使用ColorUI,那么就复制demo目录下的colorui文件夹，复制到小程序项目中。

复制完以后，是这样的。

3.App.wxss 引入关键Css main.wxss icon.wxss

只有引入才能使用color的组件；赋代码

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

2. 从新项目开始

下载源码解压获得/template，复制/template并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了

ColorUI提供了一个完整的小程序项目，我们可以直接使用。

2.1详细步骤

打开template文件夹，就能看到是一个正常的小程序项目的目录结构，已经引入了colorui。我们只需要将template名字改为你的项目名，然后用小程序开发工具打开就行。

2.2 说明

直接使用template， app.wxss已经引入了需要的文件，我就什么也不需要改。

二、结语

到此，我就就创建好了小程序项目，并且引入了colorui。接下来就能使用了。

下一篇：使用 https://blog.csdn.net/LookOutThe/article/details/120720960

使用ColorUI构建小程序项目相关推荐

全网最全微信小程序项目源码
查看全文 http://www.taodudu.cc/news/show-3737788.html 相关文章: 使用ColorUI构建小程序项目 [小程序从0到1]小程序项目的创建(项目目录结构) 微 ...
微信小程序项目（SECTION A）
我们首先说一说什么是微信小程序和微信云开发(都是自己一个字一个字打的 = =) 微信小程序是一种不需要下载,进入微信就可以直接打开的软件,已经有成千上万的开发者加入了它的开发,一起推动了微信小程序的发 ...
微信小程序项目重构之Redux状态管理
1.以往处理状态的一些方式第一种:App上挂globalData 这种方式就是直接写在App里面啦,取值赋值比较方便 App.js App({globalData: {name: '前端学者',// ...
配置小程序项目的第一个页面—小程序入门与实战（五）
上一小节我们虽然构建了项目的目录,也配置了几个必要文件,但是我们的项目还是不能编译起来,我们还需要完善app.json.app.js.app.wxss这3个文件跟之前我们说的src/pages/ind ...
视频教程-微信小程序项目实战之我画你猜视频课程-微信开发
微信小程序项目实战之我画你猜视频课程精通PHP软件开发和WEB前端开发技术,熟悉PHP.Java.Javascript.HTML等语言,熟悉HTTP协议及W3C相关互联网规范,曾在山西某知名公司担任 ...
12_心理咨询_微信小程序项目实战_数据交互_深入理解小程序
前言我们实现静态页面,只需要稍微懂一点HTML/CSS即可或者零基础都可以,但是如果想要进行数据交互,需要对小程序有一定的理解: 小程序提供了一个简单.高效的应用开发框架和丰富的组件及API,帮助开 ...
4、微信小程序-项目配置
文章目录前言一.公共样式二.app全局配置 1.app.js 2.app.wxss 三.项目搭建目录前言我们在写一个微信小程序项目的时候,需要对项目进行一些基础配置,这些配置可以更加便捷地帮 ...
小程序项目（uniapp）
1.2 开发工具 uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目.主要好处: 模板丰富完善的智能提示一键运行当然,你依然可以根据自己的喜好,选择使用 VS ...
初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和丁香医生小程序加载速度优化的经历整理而成. 效果古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...

使用ColorUI构建小程序项目