7 Star 53 Fork 20

Color-UI / MP-CU

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

更新日志(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

MIT License Copyright (c) 2021 Color-UI Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
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

344bd9b3 5694891 D2dac590 5694891