MP CU
1.0.0
Registro de cambios (Beta V3.3.2) | Documentación en línea
Este proyecto es la versión nativa del subprograma WeChat colorUI3.x .
colorUI3.x solo admite uni-app de forma predeterminada y colorUI en este proyecto es una versión adaptada.
Dirección colorUI3.x : https://github.com/weilanwl/coloruiBeta
Documentación en línea: https://mp.color-ui.com/ (dirección principal, colgada en Github)
Documento alternativo en línea: https://mp-cu-doc-vercel.vercel.app/ (para evitar que Github convulsione, está colgado en vercel.com, se recomienda guardarlo)
El motor de renderizado vuex incorporado hace referencia al proyecto wxMiniStore.
Primero debe actualizar la mini herramienta de desarrollo de programas a una versión posterior al 2021-10-11 y luego verificar si "setting" en el archivo de configuración project.config.json en el directorio raíz está configurado:
"useCompilerPlugins" : [
" sass "
]
Si no está configurado, deberá configurarlo manualmente.
Dado que el miniprograma habilita los estilos v2 de forma predeterminada, algunos estilos colorUI dejarán de ser válidos en el modo v2. Para obtener el estilo colorUI completo, debe eliminar "style": "v2" en el archivo app.json .
"style" : " v2 "
Puede configurar un config.js separado para configurar la información relevante y luego exponer los métodos en app.js para referencia global. El valor predeterminado es config/ColorUI.js
import { colorUI } from './config/ColorUI'
App ( {
colorUI , //挂载到app上，此步骤必须要有！
onLaunch ( ) {
}
} ) Luego introduzca el archivo css del marco relevante en el archivo app.scss en el directorio raíz.
@import './mp-cu/colorUI/scss/ui' ;
/* 实际项目中，可删除下面的相关文件和引用，因为图标太多，体积较大，可能你项目里并不需要这么多图标，建议自行添加需要的扩展icon图标引用。*/
/* @import './mp-sdk/icon/doc'; */Rutas de archivos relacionados:
/config // (MP-CU配置文件)
/mp-cu // ColorUi主框架的文件夹，不建议修改这里面的文件，以免后续升级时，被覆盖。
/mp-sdk // ColorUi框架的辅助文件夹，封装了一些常用的方法函数、扩展图标库等，按需使用，如不需要，可删除此文件夹。
/packageA // 项目演示demo的分包，此包为模板包路径
/packageB // 项目演示demo的分包，此包为实验室包路径
...
/config.js // 框架的配置项，(新版本中，已移除该文件)
Monte el componente y configúrelo en el archivo app.json o xxx.json
"usingComponents" : {
"ui-sys" : " mp-cu/colorUI/components/ui-sys/ui-sys "
}
Dado que el subprograma WeChat no puede usar vue.key para nombrar variables globalmente, los usuarios que están acostumbrados a Vue no están acostumbrados y no existe un mecanismo de administración de estado como vuex dentro de WeChat. Para cumplir con las ideas anteriores, se ha personalizado colorUI MP-CU. para ti Un conjunto de su propio paquete de extensión, puede importar variables, funciones y métodos globalmente, y también puede definir su propio estado (
vuex).
config/ColorUI.js . //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
config : {
// colorUI的配置文件
} ,
data : {
//全局data
} ,
methods : {
//全局函数
}
} ) page y components , porque colorUI ya se ha escrito en los datos correspondientes, solo necesita usarlo. // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule Puede obtener la configuración configurada a través de
this.data.$cuConfigenpageycomponents.El contenido de los datos configurados se puede obtener a través de
this.data.$cuDataenpageycomponents.Los métodos de función configurados se registrarán en las ubicaciones correspondientes de
pageycomponents. Solo necesita llamarlos.
Por ejemplo:
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 )
}
}
} )
Este archivo de configuración se puede llamar directamente this.cuLog () en todas las páginas del proyecto, y el cuerpo de la función en el archivo de configuración se puede llamar, por supuesto, tanto los datos como la configuración se pueden obtener en la página. Para obtener la configuración actual del proyecto, ColorUI también registra el archivo de configuración en los datos. Cuando modifica otras páginas, el contenido dentro de la tienda se actualizará en tiempo real (incluidas las páginas que se han abierto y las páginas que no se han abierto). Para obtener más información, consulte la configuración del tema de ColorUI.
Tenga en cuenta que la función, los datos y otros nombres de configuración que establezca no pueden tener las siguientes condiciones [ "data" , "onLoad" , "onShow" , " "onReady" ", " "onHide" , "onUnload" , " "onPullDownRefresh" ", "onReachBottom" , "onShareAppMessage" , "onPageScroll" , "onTabItemTap" , "setTheme" , "setMain" , "setText" , "_toHome" , "_backPage" , "sys_isFirstPage" ]
Llame
this.setState()en los datos de la variable global que deben configurarse y luego obtenga los datos de la variable global para obtener las propiedades dethis.data.$cuStore. Preste atención al alcance de esto.
En la versión del subprograma WeChat colorui 3.x, todas las páginas deben estar empaquetadas con
ui-sys, por lo que la mayoría de las funciones de retorno no se pueden usar. ColorUI registra las funciones de retorno en todas las páginas y llamathis._backPage()en las funciones. que deben ser devueltosthis._backPage()Preste atención al tema de este alcance.
Al llamar
this._toHome()en la función que debe devolverse, preste atención al alcance de esto.
Llame
this. _setTheme()donde necesita cambiar el tema. Preste atención al alcance de esto.
Llame
this. _setMain()donde se debe establecer el color principal. Preste atención al alcance de esto.
Llame
this. _setText()donde se debe establecer el nivel de tamaño de fuente. Preste atención al alcance de esto.
app.json "darkmode" : true
Después de activar el seguimiento automático, al cambiar de tema en el dispositivo Android, el mini programa se recargará. Por motivos específicos, consulte las instrucciones oficiales de 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' , //分享的路径，也是首页
}
} )Gracias miembros del equipo
@weilanwl | @bypanghu |
Y gracias a los destacados contribuyentes y comentaristas de errores.
@CN-HM |
Y amigos de Stars:
 Guía para escapar de Tarkov |  Cada imagen-Fondo de pantalla de la Ciudad Prohibida | Subprograma de código abierto de Weimu |  Elimina marcas de agua con un clic |  Dispositivo para aliviar las preocupaciones |  Altavoz de bolsillo-puesto callejero gritando |
>> También quiero mostrar mis proyectos aquí<<
Hacemos todo lo posible para abrir el código fuente tanto como podamos e intentamos responder a todos los que necesitan ayuda para utilizar el proyecto.
Obviamente, esto lleva tiempo, pero puedes disfrutarlos gratis.
Sin embargo, si está utilizando este proyecto y se siente bien con él, o simplemente desea apoyar nuestro desarrollo continuo, puede hacerlo de la siguiente manera:
¡Gracias! ❤️
MIT © MP CU y ColorUI
