miniprogram-template
A wechat miniprogram template project the best practice with TypeScript and VSCode
[小程序模板最佳实践(TypeScript+VSCode),使用 miniprogram-build 工具构建]
Required [所需环境]
- nodejs:
npm>= 6.0(或者yarn)Node>= 10 - Editor: VSCode
- Wechat-Devtools: 小程序开发工具 (并开启
服务端口)
Quick Start [使用]
- create project [一键创建新项目]
点击 Use this template 一键使用此模板项，目或者使用命令行:
# 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]- start [在项目文件下运行]
#cd [本地目录名]
npm start
# 或者
# yarn start正常启动后调试工具会自动打开dist预览
Script [命令]
npm可以用yarn代替
npm start: 重新编译项目并实时更新[aliasnpm 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: 测试[aliasnpm run test]npm run check: 代码风格和格式检查(支持不同语言单独lint检查)npm run fix: 自动修复可修复的 lint 和代码风格问题npm run help: 查看编译工具 mp 的详细用法
全部快捷命令package.json
Multiple env [多环境设置]
每个环境可进行不同配置(可按需增加或减少环境配置)
.mpconfig.jsonc开发集成环境env/test.jsonc测试环境配置env/prod.jsonc线上生产环境配置
如果只有一个环境可删除
env目录直接使用.mpconfig.jsonc进行配置
Coding [编码]
Languages [编程语言]
js
.ts(TypeScript) 或.js(JavaScript) (推荐ts)- Eslint + Prettier 检查代码风格和自动格式化
- TS 支持
/绝对路径形式 import
wxml
.wxml或.html- Htmlhit + Prettier 检查代码风格和自动格式化
- 使用 vscode-minapp 进行代码检查和格式
wxss
.scss,.sass或者.css(推荐scss)- Stylelint + Prettier 检查代码风格和自动格式化
- 可按指定顺序自动排序 css 属性
scss可以直接@importassets 目录下内容
json
.jsonc,.json或.json5支持注释- Prettier 代码检查和自动格式化
wxs
.wxts(TypeScript),.wxs(JavaScript) (推荐wxts)- Prettier 代码检查和自动格式化
miniprogram-wxs进行 type 检查和限定
Editor [编辑器]
使用
VSCode,并自动安装推荐插件
- 首次使用根据提示自动安装推荐插件
- 所有插件已配置好,会自动进行代码检查提示,保存时自动修复
- 新建
Page,Component,wxs会自动生产模板文件(可修改模板)
CI [持续集成]
默认已经配置完 Auzre Pipelines 和 Travis CI 以及 Github Actions,可按需开启和修改
- Azure Pipelines 按需修改 配置 azure-pipelines.yml
- Travis-CI 按需修改 配置 .travis.yml
- Github Actions 按需修改 配置 .github/workflows/nodejs.yml