{"id":13901253,"url":"https://github.com/Color-UI/MP-CU","last_synced_at":"2025-07-17T21:32:47.384Z","repository":{"id":38315805,"uuid":"379142383","full_name":"Color-UI/MP-CU","owner":"Color-UI","description":"MP-CU, colorui3.x 微信小程序原生版","archived":false,"fork":false,"pushed_at":"2024-06-06T05:38:15.000Z","size":12074,"stargazers_count":259,"open_issues_count":18,"forks_count":56,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-08-07T21:45:17.320Z","etag":null,"topics":["color-ui","colorui","miniprogram","mp-cu","wechat","wechat-mini-program"],"latest_commit_sha":null,"homepage":"https://mp-cu-doc-vercel.vercel.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Color-UI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"custom":["https://colorui-assest.vercel.app/mp-cu-doc/thanks.jpg","https://paypal.me/iZaiZaiA"]}},"created_at":"2021-06-22T04:36:06.000Z","updated_at":"2024-08-04T05:58:36.000Z","dependencies_parsed_at":"2023-01-19T15:46:40.642Z","dependency_job_id":"d9268577-ab03-4ae5-9e79-3a37bf8682af","html_url":"https://github.com/Color-UI/MP-CU","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Color-UI%2FMP-CU","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Color-UI%2FMP-CU/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Color-UI%2FMP-CU/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Color-UI%2FMP-CU/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Color-UI","download_url":"https://codeload.github.com/Color-UI/MP-CU/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226305275,"owners_count":17603782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-ui","colorui","miniprogram","mp-cu","wechat","wechat-mini-program"],"created_at":"2024-08-06T21:01:05.413Z","updated_at":"2024-11-25T09:31:04.251Z","avatar_url":"https://github.com/Color-UI.png","language":"SCSS","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg width=\"160px\" src=\"https://github.com/iZaiZaiA/iZaiZaiA/blob/img/mp-cu/mp-cu.jpg\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://mp.color-ui.com/update/\"\u003e更新日志(Beta V3.3.2)\u003c/a\u003e | \u003ca href=\"https://mp.color-ui.com/\"\u003e在线文档\u003c/a\u003e\n\u003c/p\u003e\n\n\n---\n\n### MP-CU 介绍（暂时不建议 用在生产环境中）\n\n本项目为 `colorUI3.x` 微信小程序原生版。\n\n`colorUI3.x` 默认只支持 `uni-app`，本项目中 `colorUI` 为适配版。\n\n`colorUI3.x` 地址： [https://github.com/weilanwl/coloruiBeta](https://github.com/weilanwl/coloruiBeta)\n\n在线文档：[https://mp.color-ui.com/](https://mp.color-ui.com/) （主地址，挂在Github上的）\n\n备用在线文档：[https://mp-cu-doc-vercel.vercel.app/](https://mp-cu-doc-vercel.vercel.app/)（防止Github抽风，挂在vercel.com上的，建议收藏下）\n\n内置的vuex 渲染引擎参考了 [wxMiniStore](https://github.com/xiaoyao96/wxMiniStore) 项目。\n\n---\n\n### 准备配置\n\n需要先升级小程序开发工具到 `2021-10-11` 之后的版本,\n然后，检查根目录下，`project.config.json` 配置文件内的 `\"setting\"` 节点下，是否配置了：\n\n```json\n\n\"useCompilerPlugins\": [\n    \"sass\"\n]\n\n```\n\n如果没有配置，需要手动配置一下\n\n由于小程序默认开启了 `v2` 的样式，在v2模式下，`colorUI` 部分样式会失效。\n完整 `colorUI` 样式，需要在 `app.json` 文件内，删除 `\"style\": \"v2\"` 即可\n\n```json\n\n\"style\": \"v2\"\n\n```\n\n---\n\n### 框架配置\n\n您可单独设置一个 `config.js` 里面配置相关信息，然后暴露方法给 `app.js` 在全局引用，默认在 `config/ColorUI.js`\n\n```javascript\n\nimport { colorUI } from './config/ColorUI'\nApp({\n    colorUI,        //挂载到app上，此步骤必须要有！\n    onLaunch() {\n        \n    }\n})\n\n```\n\n然后在根目录的 `app.scss` 文件里引入相关框架的css文件。\n\n\n```css\n\n@import './mp-cu/colorUI/scss/ui';\n\n/* 实际项目中，可删除下面的相关文件和引用，因为图标太多，体积较大，可能你项目里并不需要这么多图标，建议自行添加需要的扩展icon图标引用。*/\n/* @import './mp-sdk/icon/doc'; */\n\n```\n\n---\n\n相关文件路径：\n\n```\n/config        // (MP-CU配置文件)\n/mp-cu         // ColorUi主框架的文件夹，不建议修改这里面的文件，以免后续升级时，被覆盖。\n/mp-sdk        // ColorUi框架的辅助文件夹，封装了一些常用的方法函数、扩展图标库等，按需使用，如不需要，可删除此文件夹。\n/packageA      // 项目演示demo的分包，此包为模板包路径\n/packageB      // 项目演示demo的分包，此包为实验室包路径\n   ...\n/config.js     // 框架的配置项，(新版本中，已移除该文件)\n\n```\n\n---\n\n### 组件使用方式\n\n挂载组件，在 `app.json` 或 `xxx.json` 文件里配置\n\n```json\n\n\"usingComponents\": {\n  \"ui-sys\": \"mp-cu/colorUI/components/ui-sys/ui-sys\"\n}\n\n```\n\n---\n\n### colorUI MP-CU 扩展包\n\n\u003e 由于微信小程序无法使用vue.key来全局命名变量，导致习惯vue的用户很不习惯，而且微信内部并不存在像vuex这样的状态管理机制，为满足上述想法，colorUI  MP-CU 为您定制了一套自有的扩展包，你可以在全局导入变量、函数、方法，同时您也可以定义您自己的状态（` vuex `）.\n\n\n- colorUI 的配置文件需要您定义成类似以下的内容，参考 `config/ColorUI.js` 文件。\n\n```javascript\n\n//引入框架的方法函数库\nimport ColorUI from './mp-cu/main'\nexport const colorUI = new ColorUI({\n   config: {\n      // colorUI的配置文件\n   },\n   data: {\n      //全局data\n   },\n   methods: {\n      //全局函数\n   }\n})\n\n```\n\n#### 注意，只要您在app.js 里面挂载上colorUI以后，您不需要在 `page`，`components` 中获取系统信息，因为colorUI 已经帮您写好在对应的data 里面了，您只需要使用就可以了\n\n- 例如在demo的home 页面中，在page的data中并没有定义sys_navBar，但是在页面和js中仍然可以使用，关键的是，这个数据是根据访问手机实施变化的！\n\n```javascript\n\n// colorUI 为您在data中事先定义好的数据\nsys_info\nsys_navBar\nsys_statusBar\nsys_capsule\n\n```\n\n#### 您在config里面配置的data数据也可以在页面的data里面访问到，colorUI将配置的数据定义到$cuData属性里面中了\n\n\n\u003e 配置的config你可以在 `page`，`components` 中通过 `this.data.$cuConfig` 获得\n\u003e\n\u003e 配置的data内容你可以在 `page`，`components` 中通过 `this.data.$cuData` 获得\n\u003e\n\u003e 配置的函数方法，都会在`page`，`components`里面注册在相应位置，您只需要调用即可\n\n\n例如：\n\n```javascript\n\nimport ColorUI from './mp-cu/main'\nexport const colorUI = new ColorUI({\n   config: {\n      theme: 'auto',\n      main: 'blue',\n      text: 1,\n      footer: true,\n      share: true,\n      shareTitle: 'MP CU（ ColorUI3.x 原生小程序版）',\n      homePath: '/pages/home/home',\n      tabBar: [],\n   },\n   data: {\n      name: 'hello'\n   },\n   methods: {\n      cuLog (message, ...optionalParams) {\n         console.log(message, ...optionalParams)\n      }\n   }\n})\n\n\n```\n\n该配置文件，在项目所有页面中，都可以直接调用`this.cuLog ()`,就可以调用该config 文件中的函数体，当然data和config均可以在页面中获取，为了方便您获取当前项目配置，ColorUI为您将配置文件也一同注册进data里面了。当您在其他页面修改后，store 内部的内容便会实时更新（包括已经打开过的页面和未打开过的页面）。\n具体可以参考ColorUI的主题配置。\n\n\n\u003cspan style='color : red'\u003e注意，您设置的函数，data，等配置名称不能存在以下情况 \n   [`\"data\"` ,\n   ` \"onLoad\" `,\n   ` \"onShow\" `,\n   ` \"onReady\" `,\n   ` \"onHide\" `,\n   ` \"onUnload\" `,\n   ` \"onPullDownRefresh\" `,\n   ` \"onReachBottom\" `,\n   ` \"onShareAppMessage\" `,\n   ` \"onPageScroll\" `,\n   ` \"onTabItemTap\" `,\n   ` \"setTheme\" `,\n   ` \"setMain\" `,\n   ` \"setText\" `,\n   ` \"_toHome\" `,\n   ` \"_backPage\" `,\n   ` \"sys_isFirstPage\"`\n]\n\u003c/span\u003e\n\n\n### 内置方法\n- [x] 内置 store\t\t[使用方法参考](#ColorUi.store)\n- [x] 页面返回函数\t[使用方法参考](#_backPage)\n- [x] 返回首页\t[使用方法参考](#_toHome)\n- [x] 切换主题\t\t[使用方法参考](#_setTheme)\n- [x] 设置主颜色\t\t[使用方法参考](#_setMain)\n- [x] 设置字号等级\t[使用方法参考](#_setText)\n\n----\n\n\n### 内置方法详解\n\n#### \u003cspan id='ColorUi.store'\u003e内置 store\u003c/span\u003e\n\u003e 在需要设置的全局变量data调用 `this.setState()` ,再需获取全局变量data获取 `this.data.$cuStore` 的属性， 注意this 作用域的问题。\n\n#### \u003cspan id='_backPage'\u003e页面返回函数\u003c/span\u003e\n\u003e colorui 3.x微信小程序版本因为所有页面都需要包裹 `ui-sys` ，所以对于大多数返回函数都无法使用，ColorUI为您在所有页面注册了返回函数，在需要返回的函数里调用 `this._backPage()` 注意this 作用域的问题。\n\n#### \u003cspan id='_toHome'\u003e返回首页\u003c/span\u003e\n\u003e 在需要返回的函数里调用 `this._toHome()` 注意this 作用域的问题。\n\n#### \u003cspan id='_setTheme'\u003e切换主题\u003c/span\u003e\n\n\u003e 在需要切换主题的地方调用 `this. _setTheme()` 注意this 作用域的问题。\n\n#### \u003cspan id='setMain'\u003e设置主颜色\u003c/span\u003e\n\n\u003e 在需要设置主颜色的地方调用 `this. _setMain()` 注意this 作用域的问题。\n\n#### \u003cspan id='setText'\u003e设置字号等级\u003c/span\u003e\n\n\u003e 在需要设置字号等级的地方调用 `this. _setText()` 注意this 作用域的问题。\n\n\u003chr/\u003e\n\n### 其它说明\n\n#### 自动跟随系统主题，切换主题功能，在 `app.json` 文件里配置\n\n```json\n\n\"darkmode\": true\n\n```\n\n开启自动跟随后，在安卓机端切换主题时，会重载小程序，具体原因，参考微信官方说明：[https://developers.weixin.qq.com/community/develop/doc/000a88c66f00183d414c9879451400](https://developers.weixin.qq.com/community/develop/doc/000a88c66f00183d414c9879451400)\n\n\n\n#### 开启全局分享功能，分享给朋友、分享到朋友圈\n\n```javascript\n\nimport ColorUI from './mp-cu/main'\nexport const colorUI = new ColorUI({\n   config: {\n      share: true,  //开启全局分享\n      shareTitle: 'MP CU（ ColorUI3.x 原生小程序版）',  //分享标题\n      homePath: '/pages/home/home', //分享的路径，也是首页\n   }\n})\n\n```\n\n---\n\n### 鸣谢\n\n感谢团队成员 \n\n\u003ctable\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003ca href=\"https://github.com/weilanwl\" target=\"_blank\"\u003e\n                    \u003cimg width=\"80px\" src=\"https://avatars.githubusercontent.com/u/24801605?v=4\" alt=\"@weilanwl\"\u003e\n                    \u003cdiv\u003e@weilanwl\u003c/div\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003ca href=\"https://github.com/bypanghu\" target=\"_blank\"\u003e\n                    \u003cimg width=\"80px\" src=\"https://avatars.githubusercontent.com/u/56402715?v=4\" alt=\"@bypanghu\"\u003e\n                    \u003cdiv\u003e@bypanghu\u003c/div\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n----\n\n以及感谢突出贡献者、bug反馈者 \n\n\u003ctable\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003ca href=\"https://github.com/CN-HM\" target=\"_blank\"\u003e\n                    \u003cimg width=\"60px\" src=\"https://avatars.githubusercontent.com/u/26593955?v=4\" alt=\"@CN-HM\"\u003e\n                    \u003cdiv\u003e@CN-HM\u003c/div\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n----\n\n还有stars的朋友们：\n\n[![Stargazers repo roster for @Color-UI/MP-CU](https://reporoster.com/stars/Color-UI/MP-CU)](https://github.com/Color-UI/MP-CU/stargazers)\n\n----\n\n### 使用了MP-CU的项目\n\n\n\u003ctable\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"150px\" src=\"https://user-images.githubusercontent.com/26593955/150722226-a4618563-27a8-4805-a4dc-f55326e47a29.jpg\" alt=\"@CN-HM\"\u003e\n                \u003cdiv\u003e逃离塔克夫指南\u003c/div\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"150px\" src=\"https://user-images.githubusercontent.com/19451694/153342500-f0e80ac4-e364-4eef-b94d-ffce8ca32ed6.jpg\" alt=\"@extrastu\"\u003e\n                \u003cdiv\u003e每图-故宫壁纸\u003c/div\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"150px\" src=\"https://user-images.githubusercontent.com/19451694/153342500-f0e80ac4-e364-4eef-b94d-ffce8ca32ed6.jpg\" alt=\"@poisonboy\"\u003e\n                \u003cdiv\u003e微慕开源小程序\u003c/div\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"150px\" src=\"https://user-images.githubusercontent.com/50282105/170190355-c1101e72-b2be-4c9c-adef-6557bee67f4b.jpg\" alt=\"@xtanyu\"\u003e\n                \u003cdiv\u003e一键去水印\u003c/div\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"150px\" src=\"https://user-images.githubusercontent.com/35681956/188177774-3312f3a8-b8d3-4af6-bbba-d0e3691ee2c0.jpg\" alt=\"@ch4ixin\"\u003e\n                \u003cdiv\u003e解忧小工具\u003c/div\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\" valign=\"middle\"\u003e\n                \u003cimg width=\"150px\" src=\"https://user-images.githubusercontent.com/19451694/195476778-77dfee82-c48a-43e0-a867-76d79f4f4edb.png\" alt=\"@extrastu\"\u003e\n                \u003cdiv\u003e口袋喇叭-地摊吆喝\u003c/div\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/Color-UI/MP-CU/discussions/18\"\u003e \u003e\u003e 我的项目也想展示在这里\u003c\u003c \u003c/a\u003e\n\u003c/p\u003e\n\n\n---\n\n### :sparkling_heart: 支持这个项目\n\n我们尽己所能地进行开源，并且我们尽量回复每个在使用项目时需要帮助的人。\n\n很明显，这需要时间，但你可以免费享受这些。\n\n然而, 如果你正在使用这个项目并感觉良好，或只是想要支持我们继续开发，你可以通过如下方式：\n\n- 在你的 开源项目 中使用 MP-CU 时，链接指向这里[https://github.com/Color-UI/MP-CU](https://github.com/Color-UI/MP-CU) :D\n- Star 并 分享这个项目 :rocket:\n\n谢谢！ :heart:\n\n----\n\n### License\n\nMIT © [MP CU](https://github.com/Color-UI/MP-CU) And [ColorUI](https://github.com/Color-UI)\n","funding_links":["https://colorui-assest.vercel.app/mp-cu-doc/thanks.jpg","https://paypal.me/iZaiZaiA"],"categories":["SCSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FColor-UI%2FMP-CU","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FColor-UI%2FMP-CU","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FColor-UI%2FMP-CU/lists"}