MP CU下載 - MP CU原始碼下載

MP CU

Ai源碼

1.0.0

下載

更新日誌(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-cu-doc-vercel.vercel.app/（防止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" ]

內建方法

內建store 使用方法參考
頁面返回函數使用方法參考
返回首頁使用方法參考
切換主題使用方法參考
設定主色使用方法參考
設定字號等級使用方法參考

內建方法詳解

內建store

在需要設定的全域變數data呼叫this.setState() ,再需取得全域變數data取得this.data.$cuStore的屬性，注意this 作用域的問題。

頁面返回函數

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' , //分享的路径，也是首页
   }
} )