تنزيل MP CU - تنزيل كود مصدر MP CU

MP CU

كود الذكاء الاصطناعي

1.0.0

تنزيل

سجل التغيير (بيتا 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 أولاً، ثم التحقق مما إذا كانت عقدة "setting" في ملف التكوين project.config.json في الدليل الجذر قد تم تكوينها:

 "useCompilerPlugins" : [
    " sass "
]

إذا لم يتم تكوينه، فستحتاج إلى تكوينه يدويًا.

نظرًا لأن البرنامج الصغير يقوم بتمكين أنماط v2 افتراضيًا، فإن بعض أنماط colorUI ستصبح غير صالحة في وضع v2. للحصول على نمط colorUI الكامل، تحتاج إلى حذف "style": "v2" في ملف app.json .

 "style" : " v2 "

تكوين الإطار

يمكنك إعداد config.js منفصل لتكوين المعلومات ذات config/ColorUI.js ، ثم كشف الأساليب إلى app.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 لم يعتادوا عليه، ولا توجد آلية لإدارة الحالة مثل vuex داخل WeChat لتلبية الأفكار المذكورة أعلاه، تم تخصيص colorUI MP-CU من أجلك مجموعة من حزمة الامتدادات الخاصة بها، يمكنك استيراد المتغيرات والوظائف والأساليب عالميًا، ويمكنك أيضًا تحديد حالتك الخاصة ( vuex ).

يجب تعريف ملف التكوين الخاص بـ colorUI على النحو المماثل لما يلي، راجع ملف config/ColorUI.js .

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

لاحظ أنه طالما قمت بتثبيت colorUI في app.js، فلن تحتاج إلى الحصول على معلومات النظام في `page` `components` ، لأن colorUI قد تمت كتابته بالفعل في البيانات المقابلة لك، ما عليك سوى استخدامه.

على سبيل المثال، في الصفحة الرئيسية للعرض التوضيحي، لم يتم تعريف sys_navBar في بيانات الصفحة، ولكن لا يزال من الممكن استخدامه في الصفحة وjs. والمفتاح هو أن هذه البيانات تتغير وفقًا للهاتف المحمول الذي يتم الوصول إليه!

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

يمكن أيضًا الوصول إلى البيانات التي قمت بتكوينها في التكوين في البيانات الموجودة على الصفحة. يحدد ColorUI البيانات التي تم تكوينها في سمة cuData $.

يمكنك الحصول على التكوين الذي تم تكوينه من خلال this.data.$cuConfig في page components .
يمكن الحصول على محتوى البيانات المكونة من خلال this.data.$cuData في page components .
سيتم تسجيل طرق الوظائف التي تم تكوينها في المواقع المقابلة في 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" ، "onReady" "onShow" " ، "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 ، لذلك لا يمكن استخدام معظم وظائف الإرجاع. تسجل ColorUI وظائف الإرجاع لك في جميع الصفحات، وتستدعي this._backPage() في الوظائف التي تحتاج إلى إرجاعها. this._backPage() انتبه لمسألة هذا النطاق.

العودة إلى الصفحة الرئيسية

عند استدعاء this._toHome() في الوظيفة التي تريد إرجاعها، انتبه إلى نطاق هذا.

تبديل الموضوع

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