ホーム>プログラミング関連>AI ソースコード
ダウンロード

変更ログ (ベータ V3.3.2) | オンライン ドキュメント

MP-CU の概要 (当面は運用環境での使用は推奨されません)

このプロジェクトは、 colorUI3.x WeChat アプレットのネイティブ バージョンです。

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スタイルを有効にするため、一部のcolorUIスタイルは v2 モードでは無効になります。 colorUIスタイルを完全にするには、 app.jsonファイル内の"style": "v2"を削除する必要があります。 

 "style" : " v2 "

フレーム構成

別のconfig.jsセットアップして関連情報を構成し、グローバル参照用にメソッドをapp.jsに公開できます。デフォルトはconfig/ColorUI.js 

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

次に、関連するフレームワークの css ファイルをルート ディレクトリのapp.scssファイルに導入します。 

 @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 拡張パック

WeChat アプレットは vue.key を使用して変数にグローバルに名前を付けることができないため、Vue に慣れているユーザーはそれに慣れておらず、WeChat 内には vuex のような状態管理メカニズムがありません。上記の考えを満たすために、colorUI MP-CU はカスタマイズされています。独自の拡張パッケージのセット。変数、関数、メソッドをグローバルにインポートでき、独自の状態 ( vuex ) を定義することもできます。

  • colorUI の設定ファイルは次のように定義する必要があります。config config/ColorUI.jsファイルを参照してください。 
 //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      // colorUI的配置文件
   } ,
   data : {
      //全局data
   } ,
   methods : {
      //全局函数
   }
} )

colorUI は app.js にマウントされている限り、対応するデータに colorUI がすでに記述されているため、それを使用するだけでよいため、 pageやcomponentsでシステム情報を取得する必要はありません。

  • たとえば、デモのホーム ページでは、sys_navBar がページ データに定義されていませんが、重要なのは、アクセスする携帯電話に応じてこのデータが変化することです。 
 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

config で構成したデータには、ColorUI の $cuData 属性で定義されたデータからもアクセスできます。

構成された構成は、 pageおよびcomponentsのthis.data.$cuConfigを通じて取得できます。

設定されたデータ コンテンツは、 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 ()として直接呼び出すことができ、もちろん、データと設定の両方をページ内で取得することができます。現在のプロジェクト構成を取得するために、ColorUI は構成ファイルをデータに登録します。他のページを修正すると、ストア内のコンテンツ（開いているページ、開いていないページも含む）がリアルタイムに更新されます。 詳細については、ColorUIのテーマ構成を参照してください。

設定する関数、データ、およびその他の構成名には次の条件を含めることはできないことに注意してください [ "data" 、 "onLoad" 、 "onShow" 、 "onHide" "onReady" " 、 "onHide" 、 " "onUnload" 、 "onPullDownRefresh" 、 "onReachBottom" 、 "onShareAppMessage" 、 "onPageScroll" 、 "onTabItemTap" 、 "setTheme" 、 "setMain" 、 "setText" 、 "_toHome" 、 "_backPage" 、 "sys_isFirstPage" ]

組み込みメソッド

  • 組み込みストアの使用に関するリファレンス
  • ページリターン機能の使い方リファレンス
  • トップページへ戻る 使い方リファレンス
  • トピックの切り替え 使用方法のリファレンス
  • メインカラー使用基準を設定する
  • フォントサイズレベルの設定 使用上の参考

組み込みメソッドの詳細な説明

ビルトインストア

設定する必要があるグローバル変数データに対してthis.setState()を呼び出し、グローバル変数データを取得してthis.data.$cuStoreのプロパティを取得します。 このスコープに注意してください。

ページ戻し機能

colorui 3.x WeChat アプレット バージョンでは、すべてのページをui-sysでラップする必要があるため、ほとんどの return 関数は使用できません。ColorUI はすべてのページで return 関数を登録し、関数内でthis._backPage()を呼び出します。返される必要がありますthis._backPage()このスコープの問題に注意してください。

ホームページに戻る

返す必要がある関数内でthis._toHome()呼び出す場合は、this のスコープに注意してください。

テーマを切り替える

テーマを切り替える必要がある場合は、 this. _setTheme()呼び出します。この範囲に注意してください。

メインカラーを設定する

メインカラーを設定する必要がある場合は、 this. _setMain()呼び出します。この範囲に注意してください。

フォントサイズレベルを設定する

フォント サイズ レベルを設定する必要がある場合は、 this. _setText()呼び出します。この範囲に注意してください。

その他の指示

app.jsonファイルで設定されたシステム テーマに自動的に従い、テーマ機能を切り替える

 "darkmode" : true

自動フォローをオンにした後、Android デバイスでテーマを切り替えると、ミニ プログラムがリロードされます。具体的な理由については、WeChat 公式の手順を参照してください: 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
@bypanhu

優れた貢献者とバグフィードバック担当者に感謝します

@CN-HM

そしてスターズの友人たち：

MP-CUを使用したプロジェクト

@CN-HM
タルコフからの脱出ガイド
@extrastu
すべての写真-紫禁城の壁紙
@poisonboy
Weimu オープンソース アプレット
@xtanyu
ワンクリックで透かしを削除
@ch4ixin
心配解消ガジェット
@extrastu
ポケットスピーカー - 屋台の叫び声

>> 私のプロジェクトもここに表示したい<<

このプロジェクトをサポートしますか？

私たちはできる限りオープンソース化に全力を尽くしており、プロジェクトを使用して助けを必要とするすべての人に応えられるよう努めています。

もちろん時間はかかりますが、無料で楽しめます。

ただし、このプロジェクトを使用していて満足している場合、または単に継続的な開発をサポートしたい場合は、次の方法でそうすることができます。

  • オープンソース プロジェクトで MP-CU を使用する場合、リンクはここを指します https://github.com/Color-UI/MP-CU :D
  • このプロジェクトにスターを付けて共有する

ありがとう！ ❤️

ライセンス

MIT © MP CU および ColorUI

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて