MP CU Download - MP CU Source code download

MP CU

AI Source Code

1.0.0

Download

Change log (Beta V3.3.2) | Online documentation

Introduction to MP-CU (not recommended for use in production environments for the time being)

This project is the native version of colorUI3.x WeChat applet.

colorUI3.x only supports uni-app by default, and colorUI in this project is an adapted version.

colorUI3.x address: https://github.com/weilanwl/coloruiBeta

Online documentation: https://mp.color-ui.com/ (main address, hung on Github)

Alternate online document: https://mp-cu-doc-vercel.vercel.app/ (to prevent Github from convulsing, it is hung on vercel.com, it is recommended to save it)

The built-in vuex rendering engine refers to the wxMiniStore project.

Prepare to configure

You need to upgrade the mini program development tool to a version after 2021-10-11 first, and then check whether "setting" node in the project.config.json configuration file in the root directory is configured:

 "useCompilerPlugins" : [
    " sass "
]

If it is not configured, you need to configure it manually.

Since the mini program enables v2 styles by default, some colorUI styles will become invalid in v2 mode. For the complete colorUI style, you need to delete "style": "v2" in the app.json file.

 "style" : " v2 "

Frame configuration

You can set up a separate config.js to configure relevant information, and then expose the methods to app.js for global reference. The default is config/ColorUI.js

 import { colorUI } from './config/ColorUI'
App ( {
    colorUI ,        //挂载到app上，此步骤必须要有！
    onLaunch ( ) {
        
    }
} )

Then introduce the css file of the relevant framework into the app.scss file in the root directory.

 @import './mp-cu/colorUI/scss/ui' ;

/* 实际项目中，可删除下面的相关文件和引用，因为图标太多，体积较大，可能你项目里并不需要这么多图标，建议自行添加需要的扩展icon图标引用。*/
/* @import './mp-sdk/icon/doc'; */

Related file paths:

 /config        // (MP-CU配置文件)
/mp-cu         // ColorUi主框架的文件夹，不建议修改这里面的文件，以免后续升级时，被覆盖。
/mp-sdk        // ColorUi框架的辅助文件夹，封装了一些常用的方法函数、扩展图标库等，按需使用，如不需要，可删除此文件夹。
/packageA      // 项目演示demo的分包，此包为模板包路径
/packageB      // 项目演示demo的分包，此包为实验室包路径
   ...
/config.js     // 框架的配置项，(新版本中，已移除该文件)

How to use components

Mount the component and configure it in the app.json or xxx.json file

 "usingComponents" : {
  "ui-sys" : " mp-cu/colorUI/components/ui-sys/ui-sys "
}

colorUI MP-CU expansion pack

Since WeChat applet cannot use vue.key to globally name variables, users who are used to Vue are not used to it, and there is no state management mechanism like vuex inside WeChat. To meet the above ideas, colorUI MP-CU has been customized for you A set of its own extension package, you can import variables, functions, and methods globally, and you can also define your own state ( vuex ).

The configuration file of colorUI needs to be defined as similar to the following, refer to the config/ColorUI.js file.

 //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      // colorUI的配置文件
   } ,
   data : {
      //全局data
   } ,
   methods : {
      //全局函数
   }
} )

Note that as long as you mount colorUI in app.js, you do not need to obtain system information in `page` and `components` , because colorUI has already been written in the corresponding data for you. You only need to use it.

For example, in the home page of the demo, sys_navBar is not defined in the page data, but it can still be used in the page and js. The key is that this data changes according to the accessed mobile phone!

 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

The data you configured in config can also be accessed in the data on the page. ColorUI defines the configured data in the $cuData attribute.

You can get the configured config through this.data.$cuConfig in page and components .
The configured data content can be obtained through this.data.$cuData in page and components .
The configured function methods will be registered in the corresponding locations in page and components . You only need to call them.

For example:

 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 configuration file can be directly called this.cuLog () in all pages of the project, and the function body in the config file can be called. Of course, both data and config can be obtained in the page. In order to facilitate you to obtain the current project configuration, ColorUI also registers the configuration file into the data for you. When you modify other pages, the content inside the store will be updated in real time (including pages that have been opened and pages that have not been opened). For details, please refer to the theme configuration of ColorUI.

Note that the function, data, and other configuration names you set cannot have the following conditions [ "data" , "onLoad" , "onShow" , "onReady" , "onHide" , "onUnload" , "onPullDownRefresh" , "onReachBottom" , "onShareAppMessage" , "onPageScroll" , "onTabItemTap" , "setTheme" , "setMain" , "setText" , "_toHome" , "_backPage" , "sys_isFirstPage" ]

built-in methods

Built-in store usage reference
Page return function usage reference
Return to home page Usage reference
Switch topic Usage reference
Set the main color usage reference
Set font size level Usage reference

Detailed explanation of built-in methods

Built-in store

Call this.setState() on the global variable data that needs to be set, and then obtain the global variable data to obtain the properties of this.data.$cuStore . Pay attention to the scope of this.

Page return function

In the colorui 3.x WeChat applet version, all pages need to be wrapped with ui-sys , so most return functions cannot be used. ColorUI registers return functions for you on all pages, and calls this._backPage() in the functions that need to be returned. this._backPage() Pay attention to the issue of this scope.

Return to home page

When calling this._toHome() in the function that needs to be returned, pay attention to the scope of this.

switch theme

Call this. _setTheme() where you need to switch the theme. Pay attention to the scope of this.

Set main color

Call this. _setMain() where the main color needs to be set. Pay attention to the scope of this.

Set font size level

Call this. _setText() where the font size level needs to be set. Pay attention to the scope of this.

Other instructions

Automatically follow the system theme, switch the theme function, and configure it in the `app.json` file

 "darkmode" : true

After turning on automatic follow, when switching themes on the Android device, the mini program will be reloaded. For specific reasons, please refer to WeChat official instructions: https://developers.weixin.qq.com/community/develop/doc/000a88c66f00183d414c9879451400

Turn on the global sharing function, share it with friends, and share it in your circle of friends

 import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      share : true ,  //开启全局分享
      shareTitle : 'MP CU（ ColorUI3.x 原生小程序版）' ,  //分享标题
      homePath : '/pages/home/home' , //分享的路径，也是首页
   }
} )