MP-CU 介绍
本项目为 colorUI3.x 微信小程序原生版。
colorUI3.x 默认只支持 uni-app，本项目中 colorUI 为适配版。
colorUI3.x 地址： https://github.com/weilanwl/coloruiBeta
在线文档：https://mp.color-ui.com/ （主地址，挂在Github上的）
备用在线文档：https://mp.colorui.org/ （防止Github抽风，挂在vercel.com上的，建议收藏下）
内置的vuex 渲染引擎参考了 wxMiniStore 项目。
准备配置
需要先升级小程序开发工具到 2021-10-11 之后的版本,
然后，检查根目录下，project.config.json 配置文件内的 "setting" 节点下，是否配置了：
"useCompilerPlugins": [
"sass"
]
如果没有配置，需要手动配置一下
由于小程序默认开启了 v2 的样式，在v2模式下，colorUI 部分样式会失效。
完整 colorUI 样式，需要在 app.json 文件内，删除 "style": "v2" 即可
"style": "v2"
框架配置
您可单独设置一个 config.js 里面配置相关信息，然后暴露方法给 app.js 在全局引用，默认在 config/ColorUI.js
import { colorUI } from './config/ColorUI'
App({
colorUI, //挂载到app上，此步骤必须要有！
onLaunch() {
}
})然后在根目录的 app.scss 文件里引入相关框架的css文件。
@import './mp-cu/colorUI/scss/ui';
/* 实际项目中，可删除下面的相关文件和引用，因为图标太多，体积较大，可能你项目里并不需要这么多图标，建议自行添加需要的扩展icon图标引用。*/
/* @import './mp-sdk/icon/doc'; */相关文件路径：
/config // (MP-CU配置文件)
/mp-cu // ColorUi主框架的文件夹，不建议修改这里面的文件，以免后续升级时，被覆盖。
/mp-sdk // ColorUi框架的辅助文件夹，封装了一些常用的方法函数、扩展图标库等，按需使用，如不需要，可删除此文件夹。
/packageA // 项目演示demo的分包，此包为模板包路径
/packageB // 项目演示demo的分包，此包为实验室包路径
...
/config.js // 框架的配置项，(新版本中，已移除该文件)
组件使用方式
挂载组件，在 app.json 或 xxx.json 文件里配置
"usingComponents": {
"ui-sys": "mp-cu/colorUI/components/ui-sys/ui-sys"
}
colorUI MP-CU 扩展包
由于微信小程序无法使用vue.key来全局命名变量，导致习惯vue的用户很不习惯，而且微信内部并不存在像vuex这样的状态管理机制，为满足上述想法，colorUI MP-CU 为您定制了一套自有的扩展包，你可以在全局导入变量、函数、方法，同时您也可以定义您自己的状态（
vuex）.
- colorUI 的配置文件需要您定义成类似以下的内容，参考
config/ColorUI.js文件。
//引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI({
config: {
// colorUI的配置文件
},
data: {
//全局data
},
methods: {
//全局函数
}
})注意，只要您在app.js 里面挂载上colorUI以后，您不需要在 page，components 中获取系统信息，因为colorUI 已经帮您写好在对应的data 里面了，您只需要使用就可以了
- 例如在demo的home 页面中，在page的data中并没有定义sys_navBar，但是在页面和js中仍然可以使用，关键的是，这个数据是根据访问手机实施变化的！
// colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule您在config里面配置的data数据也可以在页面的data里面访问到，colorUI将配置的数据定义到$cuData属性里面中了
配置的config你可以在
page，components中通过this.data.$cuConfig获得配置的data内容你可以在
page，components中通过this.data.$cuData获得配置的函数方法，都会在
page，components里面注册在相应位置，您只需要调用即可
例如：
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI({
config: {
theme: 'auto',
main: 'blue',
text: 1,
footer: true,
share: true,
shareTitle: 'MP CU（ ColorUI3.x 原生小程序版）',
homePath: '/pages/home/home',
tabBar: [],
},
data: {
name: 'hello'
},
methods: {
cuLog (message, ...optionalParams) {
console.log(message, ...optionalParams)
}
}
})
该配置文件，在项目所有页面中，都可以直接调用this.cuLog (),就可以调用该config 文件中的函数体，当然data和config均可以在页面中获取，为了方便您获取当前项目配置，ColorUI为您将配置文件也一同注册进data里面了。当您在其他页面修改后，store 内部的内容便会实时更新（包括已经打开过的页面和未打开过的页面）。
具体可以参考ColorUI的主题配置。
注意，您设置的函数，data，等配置名称不能存在以下情况
["data" ,
"onLoad",
"onShow",
"onReady",
"onHide",
"onUnload",
"onPullDownRefresh",
"onReachBottom",
"onShareAppMessage",
"onPageScroll",
"onTabItemTap",
"setTheme",
"setMain",
"setText",
"_toHome",
"_backPage",
"sys_isFirstPage"
]
内置方法
内置方法详解
页面返回函数
colorui 3.x微信小程序版本因为所有页面都需要包裹
ui-sys，所以对于大多数返回函数都无法使用，ColorUI为您在所有页面注册了返回函数，在需要返回的函数里调用this._backPage()注意this 作用域的问题。
返回首页
在需要返回的函数里调用
this._toHome()注意this 作用域的问题。
切换主题
在需要切换主题的地方调用
this. _setTheme()注意this 作用域的问题。
设置主颜色
在需要设置主颜色的地方调用
this. _setMain()注意this 作用域的问题。
设置字号等级
在需要设置字号等级的地方调用
this. _setText()注意this 作用域的问题。
其它说明
自动跟随系统主题，切换主题功能，在 app.json 文件里配置
"darkmode": true
开启自动跟随后，在安卓机端切换主题时，会重载小程序，具体原因，参考微信官方说明：https://developers.weixin.qq.com/community/develop/doc/000a88c66f00183d414c9879451400
开启全局分享功能，分享给朋友、分享到朋友圈
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI({
config: {
share: true, //开启全局分享
shareTitle: 'MP CU（ ColorUI3.x 原生小程序版）', //分享标题
homePath: '/pages/home/home', //分享的路径，也是首页
}
})鸣谢
感谢团队成员
@weilanwl
|
@bypanghu
|
以及感谢突出贡献者、bug反馈者
@CN-HM
|
还有stars的朋友们：
使用了MP-CU的项目
逃离塔克夫指南
|
每图-故宫壁纸
|
💖 支持这个项目
我们尽己所能地进行开源，并且我们尽量回复每个在使用项目时需要帮助的人。
很明显，这需要时间，但你可以免费享受这些。
然而, 如果你正在使用这个项目并感觉良好，或只是想要支持我们继续开发，你可以通过如下方式：
- 在你的 开源项目 中使用 MP-CU 时，链接指向这里https://github.com/Color-UI/MP-CU :D
- Star 并 分享这个项目
🚀
谢谢！