原生小程序-引用UI框架-colorUI的使用方法

简单介绍下，这是款颜值在线的UI框架 。如果你觉得微信提供的原生效果太丑，自己又是懒癌患者，且又是外貌协会VIP，那么这款colorUI你值得入手。

 

下面是colorUi的小程序码，有兴趣的同学可以扫码进去感受一波。

这是个人开源项目，链接放下面了（听说作者只有18岁，汗颜ing)。

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

使用方法：

首先你得把GitHub的项目下载下来，然后解压像下面这样你会看demo和 template这两个文件。这两个文件夹都是可以直接部署在小程序开发工具上的项目，第一个就是ColorUI的作者制作的ColorUI小程序的项目源码，我们可以将其导入到小程序开发工具中，查看每个组建的源码并且使用，第二个template是一个空白的小程序模板，作者已经将ColorUI的使用环境搭建好了，我们可以直接在上边开始我们自己的项目。

如果已经有正在做的项目了，也可以把template里面colorUI文件夹‘复制，粘贴’到现有的项目里和pages平级即可。如图2所示；

如上图，粘贴好的文件放到和pages平级的时候，则再需要把当前项目的app.js  在onLaunch 加点东西进去如下图所示，这里面的添加的东西是从原作者搭建的template空白小程序模板里面的app.js复制过来的，如果不加这一则会在你使用自定义顶部导航栏的时候出现报错。（或者你不用自定义导航栏用微信原生提供的，这个时候要注意，在app.js里把globalData全局变量写上，不然就会报错）。

当以上步骤都完成之后，再在app.wxss里面完成colorUi的样式引用。如下图所示；

然后你的小程序就可以使用colorUi了。

具体你想要使用colorUi里面的哪部分可以直接打开作者提供的另一个文件夹demo.在小程序开发者工具里打开，想用哪块就用哪块很方便。