miniprogram template

miniprogram-template

A wechat miniprogram template project the best practice with TypeScript and VSCode

[Best practice for mini program templates (TypeScript+VSCode), built using the miniprogram-build tool]

---

Required [required environment]

• nodejs: npm >= 6.0 (or yarn ) Node >= 10
• Editor: VSCode
• Wechat-Devtools: Mini program development tool (and open服务端口)

Quick Start [Use]

1. create project [Create a new project with one click]

Click Use this template to use this template with one click, or use the command line:

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

2. start [run under project file]

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

After normal startup, the debugging tool will automatically open the dist preview.

Script [command]

npm can be replaced by yarn

• npm start : Recompile the project and update it in real time [alias npm run start ]
  • npm run start:test : Use the test environment configuration file for development
  • npm run start:prod : Use the build environment configuration file for development
• npm run upload : Package and upload the project to the mini program background (development environment configuration)
  • npm run upload:test : Use the test environment configuration to package and upload the project to the mini program background
  • npm run upload:prod : Use the build environment configuration to package and upload the project to the mini program background
• npm run build : Repackage and compile (development environment configuration)
  • npm run build:test : Repackage and compile
  • npm run build:prod : repackage and compile
• npm test : test [alias npm run test ]
• npm run check : Code style and format checking (supports separate lint checks in different languages)
• npm run fix : Automatically fix fixable lint and code style issues
• npm run help : View detailed usage of the compilation tool mp

All shortcut commands package.json

Multiple env [Multiple environment settings]

Each environment can be configured differently (environment configuration can be increased or reduced as needed)

• .mpconfig.jsonc development integrated environment
• env/test.jsonc test environment configuration
• env/prod.jsonc online production environment configuration

If there is only one environment, you can delete the env directory and configure it directly using .mpconfig.jsonc

Coding [coding]

Languages ​​[programming languages]

js

• .ts (TypeScript) or .js (JavaScript) ( ts recommended )
• Eslint + Prettier checks code style and automatic formatting
• TS supports / absolute path form import

wxml

• .wxml or .html
• Htmlhit + Prettier checks code style and automatic formatting
• Use vscode-minapp for code checking and formatting

wxss

• .scss , .sass or .css ( scss recommended)
• Stylelint + Prettier checks code style and automatic formatting
• Automatically sort css properties in a specified order
• scss can directly @import the contents of the assets directory

json

• .jsonc , .json or .json5 annotations supported
• Prettier code inspection and automatic formatting

wxs

• .wxts (TypeScript), .wxs (JavaScript) ( wxts recommended)
• Prettier code inspection and automatic formatting
• miniprogram-wxs performs type checking and qualification

Editor [editor]

Use VSCode and automatically install recommended plug-ins

1. Automatically install recommended plug-ins according to prompts when using for the first time
2. All plug-ins have been configured, and code checking prompts will be automatically performed, and they will be automatically repaired when saving.
3. When creating a new Page , Component , wxs will automatically generate template files (the template can be modified)

CI [Continuous Integration]

Auzre Pipelines, Travis CI and Github Actions have been configured by default and can be opened and modified as needed.

• Azure Pipelines Modify the configuration azure-pipelines.yml as needed
• Travis-CI modify configuration.travis.yml as needed
• Github Actions Modify configuration as needed.github/workflows/nodejs.yml