/miniprogram-template

a wechat miniprogram template project the best practice with miniprogram-build 小程序模板最佳实践(TypeScript)

Primary LanguageTypeScriptMIT LicenseMIT

miniprogram-template

Github Actions Status Travis Build Status Build Status

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 [使用]

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

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

# 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]
  1. start [在项目文件下运行]
#cd [本地目录名]
npm start
# 或者
# yarn start

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

Script [命令]

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

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 可以直接 @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 以及 Github Actions,可按需开启和修改