Color-UI 简介及使用教程

这是一个鲜亮的高饱和色彩，专注视觉的小程序组件库 。

ColorUI是一个css库，需要你引入样式后可以根据class来调用使用。只需要在HTML或wxml标签中加入想要样式的class类名，就可以调用组件库中提前编辑好的样式，大大提高了开发效率。

ColorUI下载地址

使用：

                1.原生微信小程序开发；

                2.UniApp开发；

 原生微信小程序开发

• 已有项目

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

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

//App.wxss

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

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

App.js 获得系统信息

//App.js

onLaunch: function() {
  wx.getSystemInfo({
    success: e => {
      this.globalData.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      this.globalData.Custom = custom;  
      this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    }
  })
},

App.json 配置取消系统导航栏,并全局引入组件

//App.json

"window": {
  "navigationStyle": "custom"
},
"usingComponents": {
  "cu-custom":"/colorui/components/cu-custom"
}

page.wxml 页面可以直接调用了

//page.wxml


  返回
  导航栏

参数	作用	类型	默认值
bgColor	背景颜色类名	String	''
isBack	是否开启返回	Boolean	false
isCustom	是否开启左侧胶囊	Boolean	false
bgImage	背景图片路径	String	''

slot块	作用
backText	返回时的文字
content	中间区域
right	右侧区域(小程序端可使用范围很窄！)

UniApp开发

• 已有项目

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

 引入关键Css文件 main.css icon.css

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

App.vue 获得系统信息

//App.vue

onLaunch: function() {
  uni.getSystemInfo({
    success: function(e) {
      // #ifndef MP
      Vue.prototype.StatusBar = e.statusBarHeight;
      if (e.platform == 'android') {
        Vue.prototype.CustomBar = e.statusBarHeight + 50;
      } else {
        Vue.prototype.CustomBar = e.statusBarHeight + 45;
      };
      // #endif
      // #ifdef MP-WEIXIN
      Vue.prototype.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      Vue.prototype.Custom = custom;
      Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      // #endif		
      // #ifdef MP-ALIPAY
      Vue.prototype.StatusBar = e.statusBarHeight;
      Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
      // #endif
    }
  })
},

pages.json 配置取消系统导航栏

//pages.json

"globalStyle": {
  "navigationStyle": "custom"
},

复制代码结构可以直接使用，注意全局变量的获取。

使用封装,在main.js 引入 cu-custom 组件。

//main.js

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

page.vue 页面可以直接调用了

//page.vue


  返回
  导航栏

参数	作用	类型	默认值
bgColor	背景颜色类名	String	''
isBack	是否开启返回	Boolean	false
bgImage	背景图片路径	String	''

slot块	作用
backText	返回时的文字
content	中间区域
right	右侧区域(小程序端可使用范围很窄！)

知识分享还会持续更新，求关注~