Page d'accueil>Lié à la programmation>Code Source AI
Télécharger

Journal des modifications (Beta V3.3.2) | Documentation en ligne

Introduction à MP-CU (non recommandé pour une utilisation dans les environnements de production pour le moment)

Ce projet est la version native de l'applet colorUI3.x WeChat.

colorUI3.x ne prend en charge que uni-app par défaut, et colorUI dans ce projet est une version adaptée.

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

Documentation en ligne : https://mp.color-ui.com/ (adresse principale, accrochée sur Github)

Document en ligne alternatif : https://mp-cu-doc-vercel.vercel.app/ (pour éviter que Github ne convulse, il est accroché sur vercel.com, il est recommandé de le sauvegarder)

Le moteur de rendu vuex intégré fait référence au projet wxMiniStore.

Préparez-vous à configurer

Vous devez d'abord mettre à niveau le mini-outil de développement de programme vers une version postérieure 2021-10-11 , puis vérifier si "setting" dans le fichier de configuration project.config.json dans le répertoire racine est configuré : 

 "useCompilerPlugins" : [
    " sass "
]

S'il n'est pas configuré, vous devez le configurer manuellement.

Étant donné que le mini-programme active les styles v2 par défaut, certains styles colorUI deviendront invalides en mode v2. Pour le style colorUI complet, vous devez supprimer "style": "v2" dans le fichier app.json . 

 "style" : " v2 "

Configuration du cadre

Vous pouvez configurer un config.js distinct pour configurer les informations pertinentes, puis exposer les méthodes à app.js pour référence globale. La valeur par défaut est config/ColorUI.js 

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

Introduisez ensuite le fichier css du framework concerné dans le fichier app.scss du répertoire racine. 

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

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

Chemins de fichiers associés : 

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

Comment utiliser les composants

Montez le composant et configurez-le dans le fichier app.json ou xxx.json 

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

Pack d'extension colorUI MP-CU

Étant donné que l'applet WeChat ne peut pas utiliser vue.key pour nommer globalement les variables, les utilisateurs habitués à Vue n'y sont pas habitués et il n'y a pas de mécanisme de gestion d'état comme vuex dans WeChat. Pour répondre aux idées ci-dessus, colorUI MP-CU a été personnalisé. pour vous Un ensemble de son propre package d'extension, vous pouvez importer des variables, des fonctions et des méthodes globalement, et vous pouvez également définir votre propre état ( vuex ).

  • Le fichier de configuration de colorUI doit être défini comme similaire à ce qui suit, reportez-vous au fichier config/ColorUI.js . 
 //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      // colorUI的配置文件
   } ,
   data : {
      //全局data
   } ,
   methods : {
      //全局函数
   }
} )

Notez que tant que vous montez colorUI dans app.js, vous n'avez pas besoin d'obtenir des informations système dans page et components , car colorUI a déjà été écrit dans les données correspondantes pour vous.

  • Par exemple, dans la page d'accueil de la démo, sys_navBar n'est pas défini dans les données de la page, mais il peut toujours être utilisé dans la page et js. L'essentiel est que ces données changent en fonction du téléphone mobile accédé ! 
 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

Les données que vous avez configurées dans la configuration sont également accessibles dans les données de la page ColorUI définit les données configurées dans l'attribut $cuData.

Vous pouvez obtenir la configuration configurée via this.data.$cuConfig dans page et components .

Le contenu des données configurées peut être obtenu via this.data.$cuData dans page et components .

Les méthodes de fonction configurées seront enregistrées aux emplacements correspondants dans page et components . Il vous suffit de les appeler.

Par exemple: 

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

Ce fichier de configuration peut être directement appelé this.cuLog () dans toutes les pages du projet, et le corps de la fonction dans le fichier de configuration peut être appelé bien sûr, les données et la configuration peuvent être obtenues dans la page afin de vous faciliter la tâche. pour obtenir la configuration actuelle du projet, ColorUI enregistre également le fichier de configuration dans les données pour vous. Lorsque vous modifiez d'autres pages, le contenu de la boutique sera mis à jour en temps réel (y compris les pages ouvertes et les pages non ouvertes). Pour plus de détails, veuillez vous référer à la configuration du thème de ColorUI.

Notez que les noms de fonction, de données et autres noms de configuration que vous définissez ne peuvent pas avoir les conditions suivantes [ "data" , "onLoad" " , "onShow" , " "onReady" "onHide" , "onUnload" , " "onPullDownRefresh" , "onReachBottom" , "onShareAppMessage" , "onPageScroll" , "onTabItemTap" , "setTheme" , "setMain" , "setText" , "_toHome" , "_backPage" , "sys_isFirstPage" ]

méthodes intégrées

  • Référence d'utilisation du magasin intégré
  • Référence d'utilisation de la fonction de retour de page
  • Retour à la page d'accueil Référence d'utilisation
  • Changer de sujet Référence d'utilisation
  • Définir la référence d'utilisation des couleurs principales
  • Définir le niveau de taille de police Référence d'utilisation

Explication détaillée des méthodes intégrées

Magasin intégré

Appelez this.setState() sur les données de la variable globale qui doivent être définies, puis obtenez les données de la variable globale pour obtenir les propriétés de this.data.$cuStore .

Fonction de retour de page

Dans la version de l'applet colorui 3.x WeChat, toutes les pages doivent être encapsulées avec ui-sys , donc la plupart des fonctions de retour ne peuvent pas être utilisées. ColorUI enregistre les fonctions de retour pour vous sur toutes les pages et appelle this._backPage() dans les fonctions. qui doivent être retournés. this._backPage() Faites attention à la question de cette portée.

Retour à la page d'accueil

Lorsque vous appelez this._toHome() dans la fonction qui doit être renvoyée, faites attention à la portée de celle-ci.

changer de thème

Appelez this. _setTheme() là où vous devez changer de thème. Faites attention à la portée de cela.

Définir la couleur principale

Appelez this. _setMain() où la couleur principale doit être définie. Faites attention à la portée de cela.

Définir le niveau de taille de police

Appelez this. _setText() où le niveau de taille de police doit être défini. Faites attention à la portée de cela.

Autres instructions

Suivez automatiquement le thème du système, changez la fonction de thème et configurez-le dans le fichier app.json 

 "darkmode" : true

Après avoir activé le suivi automatique, lors du changement de thème sur l'appareil Android, le mini programme sera rechargé. Pour des raisons spécifiques, veuillez vous référer aux instructions officielles de WeChat : https://developers.weixin.qq.com/community/develop/doc/. 000a88c66f00183d414c9879451400

Activez la fonction de partage global, partagez-la avec vos amis et partagez-la dans votre cercle d'amis 

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

Remerciements

Merci aux membres de l'équipe

@weilanwl
@bypanghu

Et merci aux contributeurs exceptionnels et aux feedbackeurs de bugs

@CN-HM

Et les amis des Stars :

Projets utilisant MP-CU

@CN-HM
Guide pour échapper à Tarkov
@extrastu
Chaque image-Fond d'écran Cité Interdite
@poisonboy
Applet open source Weimu
@xtanyu
Supprimez les filigranes en un clic
@ch4ixin
Gadget anti-inquiétude
@extrastu
Haut-parleur de poche-étal de rue criant

>> Je souhaite aussi afficher mes projets ici<<

? Soutenir ce projet

Nous faisons de notre mieux pour ouvrir le code autant que possible et nous essayons de répondre à tous ceux qui ont besoin d'aide pour utiliser le projet.

Évidemment, cela prend du temps, mais vous pouvez en profiter gratuitement.

Cependant, si vous utilisez ce projet et que vous vous en sentez bien, ou si vous souhaitez simplement soutenir notre développement continu, vous pouvez le faire en :

  • Lorsque vous utilisez MP-CU dans vos projets open source, le lien pointe ici https://github.com/Color-UI/MP-CU :D
  • Star et partagez ce projet

Merci! ❤️

Licence

MIT © MP CU et ColorUI

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout