Página Inicial>Relacionado com a programação>Código-Fonte de IA
Baixar

Registro de alterações (Beta V3.3.2) | Documentação on-line

Introdução ao MP-CU (por enquanto não recomendado para uso em ambientes de produção)

Este projeto é a versão nativa do miniaplicativo colorUI3.x WeChat.

colorUI3.x suporta apenas uni-app por padrão, e colorUI neste projeto é uma versão adaptada.

Endereço colorUI3.x : https://github.com/weilanwl/coloruiBeta

Documentação online: https://mp.color-ui.com/ (endereço principal, pendurado no Github)

Documento online alternativo: https://mp-cu-doc-vercel.vercel.app/ (para evitar convulsões no Github, ele está pendurado em vercel.com, é recomendável salvá-lo)

O mecanismo de renderização vuex integrado refere-se ao projeto wxMiniStore.

Prepare-se para configurar

Você precisa primeiro atualizar a ferramenta de desenvolvimento do miniprograma para uma versão posterior 2021-10-11 e, em seguida, verificar se "setting" no arquivo de configuração project.config.json no diretório raiz está configurado: 

 "useCompilerPlugins" : [
    " sass "
]

Se não estiver configurado, você precisará configurá-lo manualmente.

Como o miniprograma habilita estilos v2 por padrão, alguns estilos colorUI se tornarão inválidos no modo v2. Para o estilo colorUI completo, você precisa excluir "style": "v2" no arquivo app.json . 

 "style" : " v2 "

Configuração do quadro

Você pode configurar um config.js separado para configurar informações relevantes e, em seguida, expor os métodos a app.js para referência global. O padrão é config/ColorUI.js 

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

Em seguida, introduza o arquivo css da estrutura relevante no arquivo app.scss no diretório raiz. 

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

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

Caminhos de arquivos relacionados: 

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

Como usar componentes

Monte o componente e configure-o no arquivo app.json ou xxx.json 

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

Pacote de expansão colorUI MP-CU

Como o miniaplicativo WeChat não pode usar vue.key para nomear variáveis ​​​​globalmente, os usuários que estão acostumados com o Vue não estão acostumados e não há nenhum mecanismo de gerenciamento de estado como o vuex dentro do WeChat. Para atender às ideias acima, o colorUI MP-CU foi personalizado. para você Um conjunto de seu próprio pacote de extensão, você pode importar variáveis, funções e métodos globalmente e também pode definir seu próprio estado ( vuex ).

  • O arquivo de configuração do colorUI precisa ser definido de forma semelhante ao seguinte, consulte o arquivo config/ColorUI.js . 
 //引入框架的方法函数库
import ColorUI from './mp-cu/main'
export const colorUI = new ColorUI ( {
   config : {
      // colorUI的配置文件
   } ,
   data : {
      //全局data
   } ,
   methods : {
      //全局函数
   }
} )

Observe que, desde que você monte o colorUI no app.js, não será necessário obter informações do sistema nas page e components , pois o colorUI já foi gravado nos dados correspondentes para você.

  • Por exemplo, na página inicial da demonstração, sys_navBar não está definido nos dados da página, mas ainda pode ser usado na página e no js. O segredo é que esses dados mudam de acordo com o celular acessado! 
 // colorUI 为您在data中事先定义好的数据
sys_info
sys_navBar
sys_statusBar
sys_capsule

Os dados que você configurou na configuração também podem ser acessados ​​nos dados da página ColorUI define os dados configurados no atributo $cuData.

Você pode obter a configuração configurada por meio de this.data.$cuConfig na page e components .

O conteúdo dos dados configurados pode ser obtido através de this.data.$cuData na page e components .

Os métodos de função configurados serão registrados nos locais correspondentes page e components . Você só precisa chamá-los.

Por exemplo: 

 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 arquivo de configuração pode ser chamado diretamente de this.cuLog () em todas as páginas do projeto, e o corpo da função no arquivo de configuração pode ser chamado, é claro, tanto os dados quanto a configuração podem ser obtidos na página. para obter a configuração atual do projeto, o ColorUI também registra o arquivo de configuração nos dados para você. Ao modificar outras páginas, o conteúdo da loja será atualizado em tempo real (incluindo páginas que foram abertas e páginas que não foram abertas). Para obter detalhes, consulte a configuração do tema do ColorUI.

Observe que a função, os dados e outros nomes de configuração definidos não podem ter as seguintes condições [ "data" , "onLoad" , "onShow" , "onReady" , "onHide" , "onUnload" , "onPullDownRefresh" , "onReachBottom" , "onShareAppMessage" , "onPageScroll" , "onTabItemTap" , "setTheme" , "setMain" , "setText" , "_toHome" , "_backPage" , "sys_isFirstPage" ]

métodos integrados

  • Referência de uso da loja integrada
  • Referência de uso da função de retorno de página
  • Voltar à página inicial Referência de uso
  • Alternar tópico Referência de uso
  • Defina a referência principal de uso de cores
  • Definir nível de tamanho da fonte Referência de uso

Explicação detalhada dos métodos integrados

Loja integrada

Chame this.setState() nos dados da variável global que precisa ser definida e, em seguida, obtenha os dados da variável global para obter as propriedades de this.data.$cuStore .

Função de retorno de página

Na versão do miniaplicativo colorui 3.x WeChat, todas as páginas precisam ser agrupadas com ui-sys , portanto, a maioria das funções de retorno não podem ser usadas. O ColorUI registra funções de retorno para você em todas as páginas e chama this._backPage() nas funções. que precisam ser retornados. this._backPage() Preste atenção na questão deste escopo.

Voltar para a página inicial

Ao chamar this._toHome() na função que precisa ser retornada, preste atenção ao escopo disso.

mudar tema

Chame this. _setTheme() onde você precisa mudar o tema.

Definir cor principal

Chame this. _setMain() onde a cor principal precisa ser definida.

Definir o nível do tamanho da fonte

Chame this. _setText() onde o nível do tamanho da fonte precisa ser definido.

Outras instruções

Siga automaticamente o tema do sistema, alterne a função do tema e configure-o no arquivo app.json 

 "darkmode" : true

Depois de ativar o acompanhamento automático, ao alternar os temas no dispositivo Android, o miniprograma será recarregado. Por motivos específicos, consulte as instruções oficiais do WeChat: https://developers.weixin.qq.com/community/develop/doc/. 000a88c66f00183d414c9879451400

Ative a função de compartilhamento global, compartilhe com amigos e compartilhe em seu círculo de amigos 

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

Agradecimentos

Obrigado membros da equipe

@weilanwl
@bypanghu

E obrigado aos excelentes contribuidores e feedbackers de bugs

@CN-HM

E amigos das estrelas:

Projetos usando MP-CU

@CN-HM
Guia para escapar de Tarkov
@extrastu
Cada imagem - papel de parede da Cidade Proibida
@poisonboy
Miniaplicativo de código aberto Weimu
@xtanyu
Remova marcas d'água com um clique
@ch4ixin
Dispositivo para alívio de preocupações
@extrastu
Barraca de rua com alto-falante de bolso gritando

>> Também quero mostrar meus projetos aqui<<

? Apoie este projeto

Fazemos o nosso melhor para abrir o código tanto quanto podemos e tentamos responder a todos que precisam de ajuda para usar o projeto.

Obviamente, isso leva tempo, mas você pode aproveitá-los gratuitamente.

No entanto, se você estiver usando este projeto e se sentir bem com ele, ou apenas quiser apoiar nosso desenvolvimento contínuo, poderá fazê-lo:

  • Ao usar MP-CU em seus projetos de código aberto, o link aponta aqui https://github.com/Color-UI/MP-CU :D
  • Marque e compartilhe este projeto

Obrigado! ❤️

Licença

MIT © MP CU e ColorUI

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos