Startseite>Programmierbezogen>AI-Quellcode
Herunterladen

Änderungsprotokoll (Beta V3.3.2) |. Online-Dokumentation

Einführung in MP-CU (vorerst nicht für den Einsatz in Produktionsumgebungen empfohlen)

Dieses Projekt ist die native Version des colorUI3.x WeChat-Applets.

colorUI3.x unterstützt standardmäßig nur uni-app , und colorUI in diesem Projekt ist eine angepasste Version.

colorUI3.x -Adresse: https://github.com/weilanwl/coloruiBeta

Online-Dokumentation: https://mp.color-ui.com/ (Hauptadresse, auf Github aufgehängt)

Alternatives Online-Dokument: https://mp-cu-doc-vercel.vercel.app/ (um zu verhindern, dass Github krampft, hängt es auf vercel.com, es wird empfohlen, es zu speichern)

Die integrierte Vuex-Rendering-Engine bezieht sich auf das wxMiniStore-Projekt.

Bereiten Sie sich auf die Konfiguration vor

Sie müssen zuerst das Mini-Programmentwicklungstool auf eine Version nach 2021-10-11 aktualisieren und dann prüfen, ob "setting" in der Konfigurationsdatei project.config.json im Stammverzeichnis konfiguriert ist: 

 "useCompilerPlugins" : [
    " sass "
]

Wenn es nicht konfiguriert ist, müssen Sie es manuell konfigurieren.

Da das Miniprogramm standardmäßig v2 -Stile aktiviert, werden einige colorUI Stile im v2-Modus ungültig. Für den vollständigen colorUI Stil müssen Sie "style": "v2" in der Datei app.json löschen. 

 "style" : " v2 "

Rahmenkonfiguration

Sie können eine separate config.js einrichten, um relevante Informationen zu konfigurieren, und die Methoden dann für app.js als globale Referenz verfügbar machen. Der Standardwert ist config/ColorUI.js 

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

Fügen Sie dann die CSS-Datei des entsprechenden Frameworks in die Datei app.scss im Stammverzeichnis ein. 

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

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

Zugehörige Dateipfade: 

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

So verwenden Sie Komponenten

Hängen Sie die Komponente ein und konfigurieren Sie sie in der Datei app.json oder xxx.json 

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

colorUI MP-CU-Erweiterungspaket

Da das WeChat-Applet vue.key nicht zum globalen Benennen von Variablen verwenden kann, sind Benutzer, die an Vue gewöhnt sind, nicht daran gewöhnt, und es gibt keinen Zustandsverwaltungsmechanismus wie vuex in WeChat. Um die oben genannten Ideen zu erfüllen, wurde colorUI MP-CU angepasst Für Sie Eine Reihe eigener Erweiterungspakete, mit denen Sie Variablen, Funktionen und Methoden global importieren und auch Ihren eigenen Status ( vuex ) definieren können.

  • Die Konfigurationsdatei von colorUI muss wie folgt definiert werden, siehe Datei config/ColorUI.js . 
 //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      // colorUI的配置文件
   } ,
   data : {
      //全局data
   } ,
   methods : {
      //全局函数
   }
} )

Beachten Sie, dass Sie keine Systeminformationen in page und components abrufen müssen, solange Sie colorUI in app.js bereitstellen, da colorUI bereits in die entsprechenden Daten geschrieben wurde. Sie müssen es nur verwenden.

  • Auf der Homepage der Demo ist beispielsweise sys_navBar nicht in den Seitendaten definiert, kann aber dennoch in der Seite und in js verwendet werden. Der Schlüssel ist, dass sich diese Daten je nach Mobiltelefon ändern, auf das zugegriffen wird! 
 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

Auf die Daten, die Sie in der Konfiguration konfiguriert haben, kann auch in den Daten auf der Seite zugegriffen werden. ColorUI definiert die konfigurierten Daten im Attribut $cuData.

Sie können die konfigurierte Konfiguration über this.data.$cuConfig in page und components abrufen.

Der konfigurierte Dateninhalt kann über this.data.$cuData in page und components abgerufen werden.

Die konfigurierten Funktionsmethoden werden an den entsprechenden Stellen auf page und in components registriert. Sie müssen sie nur aufrufen.

Zum Beispiel: 

 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 )
      }
   }
} )

Diese Konfigurationsdatei kann auf allen Seiten des Projekts direkt this.cuLog () werden, und der Funktionskörper in der Konfigurationsdatei kann natürlich sowohl auf der Seite als auch auf der Seite abgerufen werden Um die aktuelle Projektkonfiguration zu erhalten, registriert ColorUI auch die Konfigurationsdatei für Sie in den Daten. Wenn Sie andere Seiten ändern, wird der Inhalt im Store in Echtzeit aktualisiert (einschließlich geöffneter und nicht geöffneter Seiten). Einzelheiten finden Sie in der Theme-Konfiguration von ColorUI.

Beachten Sie, dass die von Ihnen festgelegten Funktions-, Daten- und anderen Konfigurationsnamen nicht die folgenden Bedingungen haben dürfen [ "data" , "onLoad" , "onShow" , "onReady" , "onHide" , "onUnload" , "onPullDownRefresh" , "onReachBottom" , "onShareAppMessage" , "onPageScroll" , "onTabItemTap" , "setTheme" , "setMain" , "setText" , "_toHome" , "_backPage" , "sys_isFirstPage" ]

Integrierte Methoden

  • Integrierte Referenz zur Store-Nutzung
  • Referenz zur Verwendung der Seitenrückgabefunktion
  • Zurück zur Startseite. Nutzungsreferenz
  • Thema wechseln Verwendungsreferenz
  • Legen Sie die Hauptfarbverwendungsreferenz fest
  • Legen Sie die Schriftgröße fest. Referenz zur Verwendung

Detaillierte Erläuterung der integrierten Methoden

Eingebauter Laden

Rufen Sie this.setState() für die globalen Variablendaten auf, die festgelegt werden müssen, und rufen Sie dann die globalen Variablendaten ab, um die Eigenschaften von this.data.$cuStore zu erhalten. Achten Sie auf den Umfang.

Seitenrücklauffunktion

In der WeChat-Applet-Version von colorui 3.x müssen alle Seiten mit ui-sys umschlossen werden, daher können die meisten Rückgabefunktionen nicht auf allen Seiten verwendet werden und rufen this._backPage() in den Funktionen auf die zurückgegeben werden müssen this._backPage() Achten Sie auf das Problem dieses Bereichs.

Zurück zur Startseite

Achten Sie beim Aufrufen von this._toHome() in der Funktion, die zurückgegeben werden muss, auf den Umfang.

Thema wechseln

Rufen Sie this. _setTheme() wo Sie das Thema wechseln müssen. Achten Sie auf den Umfang.

Hauptfarbe festlegen

Rufen Sie this. _setMain() wobei die Hauptfarbe festgelegt werden muss.

Stellen Sie die Schriftgröße ein

Rufen Sie this. _setText() wobei die Schriftgröße festgelegt werden muss.

Andere Anweisungen

Folgen Sie automatisch dem Systemdesign, wechseln Sie die Designfunktion und konfigurieren Sie sie in der Datei app.json 

 "darkmode" : true

Nach dem Einschalten der automatischen Verfolgung wird das Miniprogramm beim Wechseln des Themas auf dem Android-Gerät neu geladen. Weitere Informationen zu spezifischen Gründen finden Sie in den offiziellen Anweisungen von WeChat: https://developers.weixin.qq.com/community/develop/doc/. 000a88c66f00183d414c9879451400

Schalten Sie die globale Freigabefunktion ein, teilen Sie sie mit Freunden und teilen Sie sie in Ihrem Freundeskreis 

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

Danksagungen

Vielen Dank an die Teammitglieder

@weilanwl
@bypanghu

Und vielen Dank an die herausragenden Mitwirkenden und Bug-Feedbacker

@CN-HM

Und Freunde von Stars:

Projekte mit MP-CU

@CN-HM
Leitfaden zur Flucht aus Tarkov
@extrastu
Jedes Bild – Verbotene Stadt-Hintergrundbild
@poisonboy
Weimu Open-Source-Applet
@xtanyu
Entfernen Sie Wasserzeichen mit einem Klick
@ch4ixin
Gadget zur Sorgenlinderung
@extrastu
Taschenlautsprecher-Straßenstand schreit

>>Ich möchte hier auch meine Projekte anzeigen<<

? Unterstützen Sie dieses Projekt

Wir tun unser Bestes, um so viele Open-Source-Inhalte wie möglich bereitzustellen, und wir versuchen, auf alle zu reagieren, die Hilfe bei der Nutzung des Projekts benötigen.

Das braucht natürlich Zeit, aber Sie können diese kostenlos genießen.

Wenn Sie dieses Projekt jedoch nutzen und sich dabei wohl fühlen oder einfach nur unsere Weiterentwicklung unterstützen möchten, können Sie dies tun, indem Sie:

  • Wenn Sie MP-CU in Ihren Open-Source-Projekten verwenden, verweist der Link hier https://github.com/Color-UI/MP-CU :D
  • Markieren und teilen Sie dieses Projekt

Danke! ❤️

Lizenz

MIT © MP CU und ColorUI

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle