3 Star 31 Fork 6

Color-UI / MP-CU

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

更新日志(Beta V3.3.2) | 在线文档


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.jsonxxx.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以后,您不需要在 pagecomponents 中获取系统信息,因为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你可以在 pagecomponents 中通过 this.data.$cuConfig 获得

配置的data内容你可以在 pagecomponents 中通过 this.data.$cuData 获得

配置的函数方法,都会在pagecomponents里面注册在相应位置,您只需要调用即可

例如:


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
@weilanwl
@bypanghu
@bypanghu

以及感谢突出贡献者、bug反馈者

@CN-HM
@CN-HM

还有stars的朋友们:

Stargazers repo roster for @Color-UI/MP-CU


使用了MP-CU的项目

@CN-HM
逃离塔克夫指南
@extrastu
每图-故宫壁纸

>> 我的项目也想展示在这里<<


:sparkling_heart: 支持这个项目

我们尽己所能地进行开源,并且我们尽量回复每个在使用项目时需要帮助的人。

很明显,这需要时间,但你可以免费享受这些。

然而, 如果你正在使用这个项目并感觉良好,或只是想要支持我们继续开发,你可以通过如下方式:

谢谢! :heart:


License

MIT © MP CU And ColorUI

About

colorui3.x 微信小程序原生版 expand collapse
JavaScript and 2 more languages
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/color-ui/MP-CU.git
git@gitee.com:color-ui/MP-CU.git
color-ui
MP-CU
MP-CU
main

Search