快速开始
从新建项目到使用
本文按 新建项目 → 开发运行 → 打包/真机调试 的顺序,带你从零完成到上线的完整流程。
环境要求
- Node.js >= 16.20.0(推荐使用 nvm 管理版本)
- 真机调试时,手机与电脑需在同一局域网,或已配置端口转发
流程概览
| 步骤 | 说明 |
|---|---|
| 1. 新建项目 | 在空目录用 CLI 从模板初始化,得到项目文件夹 |
| 2. 开发与运行 | 进入项目目录,按项目内 README 安装依赖并开发、运行 |
| 3. 打包或真机调试 | 在项目根运行 CLI,选择打包(产出 ZIP)或真机调试(扫码) |
项目根
指已存在 app.json 且含 htyf 配置的目录。
打包与真机调试必须在项目根执行;新建项目则需在空目录执行。
新建项目
准备空目录
在一个空目录下打开终端。
不要在有 app.json 等已有项目的目录里做初始化。
运行 CLI 并选择初始化
在终端执行:
进入交互式菜单后,选择 🆕 初始化新小程序项目。
按提示输入
根据提示依次填写:
| 输入项 | 说明 |
|---|---|
| 应用程序目录名称 | 英文目录名,默认 my-htyf-mp |
| 应用程序名称 | 2~4 个字,默认「小程序」 |
| 模板类型 | app-template(普通小程序)或 game-template(Godot 游戏) |
| 模板镜像 | 当前为 GitHub 模板仓库 |
完成
完成后,会在当前目录下生成同名文件夹,内含模板代码和已配置好的 app.json。
后续如何安装依赖、启动开发服务等,请查看该目录下的 README。
开发与运行
初始化完成后:
-
进入项目目录
例如:cd my-htyf-mp(以你填写的目录名为准)。 -
按模板说明操作
安装依赖、启动开发服务等,详见项目内的 README。 -
确认在项目根
当前目录需要有app.json且包含htyf配置,后续打包与真机调试才能被正确识别。
打包与真机调试
在项目根目录下执行:
打包(产出 ZIP)
- 选择 🔍 小程序 - 打包小程序。
- 输入版本号(
x.y.z),或直接回车,使用当前app.json.htyf.version自动递增。 - 确认后会自动更新版本、执行构建,并输出 ZIP 文件(如
dist.*.dgz)。
真机调试(扫码访问)
- 选择 📦 小程序 - 真机调试。
- 输入版本号(规则同打包)。
- 构建完成后会启动本地服务并显示二维码,手机扫码即可调试。
项目类型说明
- 普通小程序:无
project.godot,依赖app.json.htyf.entry等配置,由 Webpack 打 bundle 再打 ZIP。 - Godot 游戏:在当前目录或
project/game/godot下存在project.godot时,按 Godot 流程导出并打 ZIP。
参考
CLI 菜单速查
运行 npx @htyf-mp/cli 后,菜单中的选项含义与执行位置如下:
| 选项 | 作用 | 执行位置 |
|---|---|---|
| 🆕 初始化新小程序项目 | 从模板创建项目 | 空目录 |
| 🔍 小程序 - 打包小程序 | 构建并打 ZIP | 项目根 |
| 📦 小程序 - 真机调试 | 构建 + 调试服务 + 二维码 | 项目根 |
| 🧹 清理模式 | 清理构建/临时/日志/缓存 | 任意 |
| 👋 退出 | 退出 | — |
清理
通过菜单:运行 CLI → 选择「🧹 清理模式」→ 选择清理类型 → 确认。
通过命令行(不进入菜单):
命令行参数
| 参数 | 说明 |
|---|---|
--help / -h | 打印帮助后退出 |
--debug | 先开启 DEBUG 日志,再进入菜单或执行命令 |
--clean <type> | 直接清理,不进入菜单;type 可选:all / build / temp / logs / cache |
示例:npx @htyf-mp/cli --help、npx @htyf-mp/cli --debug --clean build
配置与目录
- 应用配置:构建与调试会读取当前目录下
app.json中的htyf配置(如name、appid、version、entry),初始化时已自动生成。 - 目录:构建产物在
dist(或配置的 extraChunksPath);临时文件与日志在.htyf、.htyf/.logs。
小结
| 阶段 | 操作 |
|---|---|
| 新建项目 | 空目录 → npx @htyf-mp/cli → 初始化新小程序项目 → 按提示输入 |
| 开发运行 | 进入项目目录 → 按项目内 README 安装依赖、开发、运行 |
| 打包 | 项目根 → npx @htyf-mp/cli → 打包小程序 → 输入版本 → 得到 ZIP |
| 真机调试 | 项目根 → npx @htyf-mp/cli → 真机调试 → 输入版本 → 扫码调试 |
| 清理 / 帮助 | 菜单「清理模式」或 --clean <type>;--help 查说明,--debug 看详细日志 |