miniprogram-template

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

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

---

Required [所需环境]

• nodejs: npm >= 6.0(或者yarn)
• Editor: VSCode
• Devtools: 小程序开发工具

Quick Start [使用]

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

点击 Use this template 一键使用此模板项目

或者使用命令行:

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

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

npm start
# 或者
# yarn start

3. 调试工具打开dist目录即可预览

Script [命令]

npm 可以用 yarn 代替

• npm start: 重新编译项目并实时更新[alias npm run start]
• npm test: 测试[alias npm run test]
• npm run build: 打包编译(支持三个环境)
• npm run clean: 清理 dist 目录
• npm run watch: 仅监测文件变化实时更新(支持三个环境)
• npm run check: 代码风格和格式检查(支持不同语言单独lint检查)
• npm run fix: 自动修复可修复的 lint 和代码风格问题

全部快捷命令package.json

Multiple env [多环境设置]

每个环境可进行不同配置包括 appid(可按需增加护照减少环境配置)

• dev 开发集成环境
• test 测试环境
• prod 线上生产环境

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 可以直接 @import assets 目录下内容

json

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

wxs

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

Editor [编辑器]

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

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

CI [持续集成]

默认已经配置完 Auzre Pipelines 和 Travis CI,可按需开启和配置

• Azure Pipelines 按需修改 配置 azure-pipelines.yml
• Travis-CI 按需修改 配置 .travis.yml