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

[小程序模板最佳实践(TypeScript+VSCode),使用 miniprogram-build 工具构建]

• nodejs: npm >= 6.0(或者yarn) Node >= 10
• Editor: VSCode
• Wechat-Devtools: 小程序开发工具 (并开启服务端口)

1. create project [一键创建新项目]

点击 Use this template 一键使用此模板项，目或者使用命令行:

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

2. start [在项目文件下运行]

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

正常启动后调试工具会自动打开dist预览

npm 可以用 yarn 代替

• npm start: 重新编译项目并实时更新[alias npm run start]
  • npm run start:test: 使用测试环境配置文件进行开发
  • npm run start:prod: 使用生成环境配置文件进行开发
• npm run upload: 打包并上传项目到小程序后台(开发环境配置)
  • npm run upload:test: 使用测试环境配置打包并上传项目到小程序后台
  • npm run upload:prod: 使用生成环境配置打包并上传项目到小程序后台
• npm run build: 重新打包编译(开发环境配置)
  • npm run build:test: 重新打包编译
  • npm run build:prod: 重新打包编译
• npm test: 测试[alias npm run test]
• npm run check: 代码风格和格式检查(支持不同语言单独lint检查)
• npm run fix: 自动修复可修复的 lint 和代码风格问题
• npm run help: 查看编译工具 mp 的详细用法

全部快捷命令package.json

每个环境可进行不同配置(可按需增加或减少环境配置)

• .mpconfig.jsonc 开发集成环境
• env/test.jsonc 测试环境配置
• env/prod.jsonc 线上生产环境配置

如果只有一个环境可删除 env目录直接使用 .mpconfig.jsonc进行配置

• .ts(TypeScript) 或 .js(JavaScript) (推荐ts)
• Eslint + Prettier 检查代码风格和自动格式化
• TS 支持/绝对路径形式 import

• .wxml 或 .html
• Htmlhit + Prettier 检查代码风格和自动格式化
• 使用 vscode-minapp 进行代码检查和格式

• .scss ,.sass或者.css (推荐scss)
• Stylelint + Prettier 检查代码风格和自动格式化
• 可按指定顺序自动排序 css 属性
• scss 可以直接 @import assets 目录下内容

• .jsonc,.json或.json5 支持注释
• Prettier 代码检查和自动格式化

• .wxts(TypeScript),.wxs(JavaScript) (推荐wxts)
• Prettier 代码检查和自动格式化
• miniprogram-wxs进行 type 检查和限定

使用VSCode,并自动安装推荐插件

1. 首次使用根据提示自动安装推荐插件
2. 所有插件已配置好,会自动进行代码检查提示,保存时自动修复
3. 新建 Page,Component,wxs会自动生产模板文件(可修改模板)

默认已经配置完 Auzre Pipelines 和 Travis CI 以及 Github Actions,可按需开启和修改

• Azure Pipelines 按需修改 配置 azure-pipelines.yml
• Travis-CI 按需修改 配置 .travis.yml
• Github Actions 按需修改 配置 .github/workflows/nodejs.yml