miniprogram template

plantilla-miniprograma

Una plantilla de miniprograma de WeChat proyecta las mejores prácticas con TypeScript y VSCode

[Mejores prácticas para plantillas de miniprogramas (TypeScript+VSCode), creadas con la herramienta de creación de miniprogramas]

---

Requerido [entorno requerido]

• nodejs: npm >= 6.0 (o yarn ) Node >= 10
• Editor: VSCode
• Wechat-Devtools: mini herramienta de desarrollo de programas (y服务端口abierto)

Inicio rápido [Uso]

1. crear proyecto [Crear un nuevo proyecto con un clic]

Haga clic en Usar esta plantilla para usar esta plantilla con un solo clic, o use la línea de comando:

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

2. iniciar [ejecutar en el archivo del proyecto]

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

Después del inicio normal, la herramienta de depuración abrirá automáticamente la vista previa dist .

Guión [comando]

npm puede ser reemplazado por yarn

• npm start : vuelve a compilar el proyecto y lo actualiza en tiempo real [alias npm run start ]
  • npm run start:test : utiliza el archivo de configuración del entorno de prueba para el desarrollo
  • npm run start:prod : utiliza el archivo de configuración del entorno de compilación para el desarrollo
• npm run upload : empaqueta y carga el proyecto en el fondo del mini programa (configuración del entorno de desarrollo)
  • npm run upload:test : utilice la configuración del entorno de prueba para empaquetar y cargar el proyecto en el fondo del mini programa.
  • npm run upload:prod : utilice la configuración del entorno de compilación para empaquetar y cargar el proyecto en el fondo del mini programa.
• npm run build : reempaquetar y compilar (configuración del entorno de desarrollo)
  • npm run build:test : reempaquetar y compilar
  • npm run build:prod : reempaquetar y compilar
• npm test : prueba [alias npm run test ]
• npm run check : verificación de formato y estilo de código (admite comprobaciones lint separadas en diferentes idiomas)
• npm run fix : soluciona automáticamente problemas de estilo de código y pelusa reparables
• npm run help : vea el uso detallado de la herramienta de compilación mp

Todos los comandos de acceso directo paquete.json

Entorno múltiple [Configuración de entorno múltiple]

Cada entorno se puede configurar de manera diferente (la configuración del entorno se puede aumentar o reducir según sea necesario)

• Entorno integrado de desarrollo .mpconfig.jsonc
• configuración del entorno de prueba env/test.jsonc
• configuración del entorno de producción en línea env/prod.jsonc

Si solo hay un entorno, puede eliminar el directorio env y configurarlo directamente usando .mpconfig.jsonc

Codificación [codificación]

Idiomas [lenguajes de programación]

js

• .ts (TypeScript) o .js (JavaScript) ( se recomienda ts )
• Eslint + Prettier comprueba el estilo del código y el formato automático
• Soportes TS / importación de formulario de ruta absoluta

wxml

• .wxml o .html
• Htmlhit + Prettier comprueba el estilo del código y el formato automático
• Utilice vscode-minapp para verificar y formatear el código

wxss

• .scss , .sass o .css (se recomienda scss )
• Stylelint + Prettier comprueba el estilo del código y el formato automático
• Ordenar automáticamente las propiedades CSS en un orden específico
• scss puede @import directamente el contenido del directorio de activos

json

• Se admiten anotaciones .jsonc , .json o .json5
• Inspección de código más bonita y formateo automático

wxs

• .wxts (TypeScript), .wxs (JavaScript) (se recomienda wxts )
• Inspección de código más bonita y formateo automático
• miniprogram-wxs realiza verificación y calificación de tipo

Redactor [editor]

Utilice VSCode e instale automáticamente los complementos recomendados

1. Instale automáticamente los complementos recomendados según las indicaciones cuando los use por primera vez
2. Se han configurado todos los complementos, las indicaciones de verificación del código se realizarán automáticamente y se repararán automáticamente al guardar.
3. Al crear una nueva Page o Component , wxs generará automáticamente archivos de plantilla (la plantilla se puede modificar)

CI [Integración continua]

Auzre Pipelines, Travis CI y Github Actions se han configurado de forma predeterminada y se pueden abrir y modificar según sea necesario.

• Azure Pipelines Modifique la configuración azure-pipelines.yml según sea necesario
• Travis-CI modifica configuración.travis.yml según sea necesario
• Acciones de Github Modifique la configuración según sea necesario.github/workflows/nodejs.yml