[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8617":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":33,"discoverSource":34},8617,"coloruicss","weilanwl\u002Fcoloruicss","weilanwl","鲜亮的高饱和色彩，专注视觉的小程序组件库","https:\u002F\u002Fwww.color-ui.com\u002F",null,"Vue",12395,2192,247,7,0,2,70.2,"MIT License",false,"master",true,[24,25,26,27,28,29],"css","mp-weixin","scss","uniapp","vue","vue2","2026-06-12 04:00:40","\n\n\u003Cp align=\"center\">V3 测试版：https:\u002F\u002Fgithub.com\u002Fweilanwl\u002FcoloruiBeta\u003C\u002Fp>\n\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fcos.color-ui.com\u002Fweb\u002Fzva3m.png\" alt=\"ColorUI简介\" width=\"75%\">\u003C\u002Fimg>\u003C\u002Fp>\n\n## 素材\nColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！\n[语雀-ColorUI群资源](https:\u002F\u002Fwww.yuque.com\u002Fcolorui)\n\n## 前言\nColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。\n\n## 交流\n微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fcos.color-ui.com\u002Fweb\u002Fkm4js.png\" alt=\"\" style=\"max-width:100%;\" width=\"748\">\u003C\u002Fp>\t\t\t\t  \n\n\n## 使用UniApp开发\n### 开始\n下载源码解压获得`\u002FColorui-UniApp`文件夹，复制目录下的 `\u002Fcolorui` 文件夹到你的项目根目录\n\n`App.vue` 引入关键Css `main.css` `icon.css`\n```css\n\u003Cstyle>\n@import \"colorui\u002Fmain.css\";\n@import \"colorui\u002Ficon.css\";\n@import \"app.css\"; \u002F* 你的项目css *\u002F\n....\n\u003C\u002Fstyle>\n```\n\n### 使用自定义导航栏\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\n`App.vue` 获得系统信息\n```js\nonLaunch: function() {\n  uni.getSystemInfo({\n    success: function(e) {\n      \u002F\u002F #ifndef MP\n      Vue.prototype.StatusBar = e.statusBarHeight;\n      if (e.platform == 'android') {\n        Vue.prototype.CustomBar = e.statusBarHeight + 50;\n      } else {\n        Vue.prototype.CustomBar = e.statusBarHeight + 45;\n      };\n      \u002F\u002F #endif\n      \u002F\u002F #ifdef MP-WEIXIN\n      Vue.prototype.StatusBar = e.statusBarHeight;\n      let custom = wx.getMenuButtonBoundingClientRect();\n      Vue.prototype.Custom = custom;\n      Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;\n      \u002F\u002F #endif\t\t\n      \u002F\u002F #ifdef MP-ALIPAY\n      Vue.prototype.StatusBar = e.statusBarHeight;\n      Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;\n      \u002F\u002F #endif\n    }\n  })\n},\n```\n\n`pages.json` 配置取消系统导航栏\n```json\n\"globalStyle\": {\n  \"navigationStyle\": \"custom\"\n},\n```\n复制代码结构可以直接使用，注意全局变量的获取。\n\n使用封装,在`main.js` 引入 `cu-custom` 组件。\n```\nimport cuCustom from '.\u002Fcolorui\u002Fcomponents\u002Fcu-custom.vue'\nVue.component('cu-custom',cuCustom)\n```\n\n`page.vue` 页面可以直接调用了\n```html\n\u003Ccu-custom bgColor=\"bg-gradual-blue\" :isBack=\"true\">\n  \u003Cblock slot=\"backText\">返回\u003C\u002Fblock>\n  \u003Cblock slot=\"content\">导航栏\u003C\u002Fblock>\n\u003C\u002Fcu-custom>\n```\n| 参数       | 作用   |类型    |  默认值 |\n| --------   | :----:  |:----:  | :----:  |\n| bgColor    | 背景颜色类名 |String  |   ''    |\n| isBack     | 是否开启返回 | Boolean |   false |\n| bgImage    | 背景图片路径 | String  |  ''     |\n\n| slot块       | 作用   |\n| --------   | :----:  |\n| backText    | 返回时的文字 | \n| content     | 中间区域 | \n| right    | 右侧区域(小程序端可使用范围很窄！)  | \n\n## 使用原生小程序开发\n### 从现有项目开始 \n下载源码解压获得`\u002Fdemo`，复制目录下的 `\u002Fcolorui` 文件夹到你的项目根目录\n\n`App.wxss` 引入关键Css `main.wxss` `icon.wxss`\n```css\n@import \"colorui\u002Fmain.wxss\";\n@import \"colorui\u002Ficon.wxss\";\n@import \"app.css\"; \u002F* 你的项目css *\u002F\n....\n```\n\n### 从新项目开始\n下载源码解压获得`\u002Ftemplate`，复制`\u002Ftemplate`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了\n\n### 使用自定义导航栏\n导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。\n\n`App.js` 获得系统信息\n```js\nonLaunch: function() {\n  wx.getSystemInfo({\n    success: e => {\n      this.globalData.StatusBar = e.statusBarHeight;\n      let custom = wx.getMenuButtonBoundingClientRect();\n      this.globalData.Custom = custom;  \n      this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;\n    }\n  })\n},\n```\n\n`App.json` 配置取消系统导航栏,并全局引入组件\n```json\n\"window\": {\n  \"navigationStyle\": \"custom\"\n},\n\"usingComponents\": {\n  \"cu-custom\":\"\u002Fcolorui\u002Fcomponents\u002Fcu-custom\"\n}\n```\n\n`page.wxml` 页面可以直接调用了\n```html\n\u003Ccu-custom bgColor=\"bg-gradual-pink\" isBack=\"{{true}}\">\n  \u003Cview slot=\"backText\">返回\u003C\u002Fview>\n  \u003Cview slot=\"content\">导航栏\u003C\u002Fview>\n\u003C\u002Fcu-custom>\n\n```\n| 参数       | 作用   |类型    |  默认值 |\n| --------   |:----:  |:----:  | :----:  |\n| bgColor    | 背景颜色类名 |String  |   ''    |\n| isBack     | 是否开启返回 | Boolean |   false |\n| isCustom   | 是否开启左侧胶囊 | Boolean |   false |\n| bgImage    | 背景图片路径 | String  |  ''     |\n\n| slot块       | 作用   |\n| --------   | :----:  |\n| backText    | 返回时的文字 | \n| content     | 中间区域 | \n| right    | 右侧区域(小程序端可使用范围很窄！)  | \n\n## 赞赏\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fcos.color-ui.com\u002Fweb\u002Fyehv3.jpg\" alt=\"\" style=\"max-width:100%;\" width=\"600\">\u003C\u002Fp>\n\n\n## License\n\n[MIT](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\nCopyright (c) 2020-present, XiaoGang Wen\n","ColorUI 是一个专注于视觉效果的小程序组件库，提供鲜亮的高饱和色彩和丰富的样式组件。它基于 Vue 框架开发，支持 SCSS 和 CSS 样式，适用于微信小程序、UniApp 以及原生小程序等多种平台。该库通过引入样式文件并使用特定的 class 来调用组件，简化了前端开发流程，并且为开发者提供了多种交互操作示例，便于快速上手。此外，ColorUI 还维护了一个知识库，内含群友贡献的模板和 UI 素材，非常适合需要创建具有强烈视觉冲击力界面的应用场景。","2026-06-11 03:18:54","top_language"]