miniprogram template

modelo de miniprograma

Um modelo de miniprograma wechat projeta as melhores práticas com TypeScript e VSCode

[Prática recomendada para modelos de miniprogramas (TypeScript+VSCode), criados usando a ferramenta miniprogram-build]

---

Obrigatório [ambiente necessário]

• nodejs: npm >= 6.0 (ou yarn ) Node >= 10
• Editor: VSCode
• Wechat-Devtools: Mini ferramenta de desenvolvimento de programa (e服务端口aberta)

Início rápido [Usar]

1. criar projeto [Crie um novo projeto com um clique]

Clique em Usar este modelo para usar este modelo com um clique ou use a linha de comando:

 # 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]

2. start [executar no arquivo do projeto]

 # cd [本地目录名]
npm start
# 或者
# yarn start

Após a inicialização normal, a ferramenta de depuração abrirá automaticamente a visualização dist .

Roteiro [comando]

npm pode ser substituído por yarn

• npm start : Recompile o projeto e atualize-o em tempo real [alias npm run start ]
  • npm run start:test : Use o arquivo de configuração do ambiente de teste para desenvolvimento
  • npm run start:prod : Use o arquivo de configuração do ambiente de construção para desenvolvimento
• npm run upload : Empacote e carregue o projeto no plano de fundo do miniprograma (configuração do ambiente de desenvolvimento)
  • npm run upload:test : Use a configuração do ambiente de teste para empacotar e fazer upload do projeto para o plano de fundo do miniprograma
  • npm run upload:prod : Use a configuração do ambiente de construção para empacotar e fazer upload do projeto para o plano de fundo do miniprograma
• npm run build : Reempacotar e compilar (configuração do ambiente de desenvolvimento)
  • npm run build:test : Reempacotar e compilar
  • npm run build:prod : reempacotar e compilar
• npm test : teste [alias npm run test ]
• npm run check : verificação de estilo e formato de código (suporta verificações lint separadas em diferentes idiomas)
• npm run fix : corrige automaticamente problemas corrigíveis de lint e estilo de código
• npm run help : Veja o uso detalhado da ferramenta de compilação mp

Todos os comandos de atalho package.json

Ambiente múltiplo [Configurações de ambiente múltiplo]

Cada ambiente pode ser configurado de forma diferente (a configuração do ambiente pode ser aumentada ou reduzida conforme necessário)

• Ambiente integrado de desenvolvimento .mpconfig.jsonc
• configuração do ambiente de teste env/test.jsonc
• configuração do ambiente de produção on-line env/prod.jsonc

Se houver apenas um ambiente, você poderá excluir o diretório env e configurá-lo diretamente usando .mpconfig.jsonc

Codificação [codificação]

Linguagens [linguagens de programação]

js

• .ts (TypeScript) ou .js (JavaScript) ( ts recomendado )
• Eslint + Prettier verifica o estilo do código e a formatação automática
• TS suporta importação de formulário de caminho /

wxml

• .wxml ou .html
• Htmlhit + Prettier verifica o estilo do código e a formatação automática
• Use vscode-minapp para verificação e formatação de código

wxss

• .scss , .sass ou .css ( scss recomendado)
• Stylelint + Prettier verifica o estilo do código e a formatação automática
• Classifique automaticamente as propriedades CSS em uma ordem especificada
• scss pode @import diretamente o conteúdo do diretório de ativos

json

• Anotações .jsonc , .json ou .json5 suportadas
• Inspeção de código mais bonita e formatação automática

wxs

• .wxts (TypeScript), .wxs (JavaScript) ( wxts recomendado)
• Inspeção de código mais bonita e formatação automática
• miniprogram-wxs realiza verificação e qualificação de tipo

Editor [editor]

Use VSCode e instale automaticamente plug-ins recomendados

1. Instale automaticamente plug-ins recomendados de acordo com as instruções ao usar pela primeira vez
2. Todos os plug-ins foram configurados e os prompts de verificação de código serão executados automaticamente e serão reparados automaticamente ao salvar.
3. Ao criar uma nova Page , Component , wxs gerará automaticamente arquivos de modelo (o modelo pode ser modificado)

CI [Integração Contínua]

Auzre Pipelines, Travis CI e Github Actions foram configurados por padrão e podem ser abertos e modificados conforme necessário.

• Azure Pipelines Modifique a configuração azure-pipelines.yml conforme necessário
• Travis-CI modifica configuration.travis.yml conforme necessário
• Ações do Github Modifique a configuração conforme necessário.github/workflows/nodejs.yml