# MiniApp Examples DevTools Guide

This guide is for judges or reviewers who want to manually import the committed
MiniApp outputs into WeChat Developer Tools and check the visible behavior.

## Review Precondition

Reviewers do **not** need to run `vp run check:mvp` before importing these
projects. The generated MiniApp projects are committed under each example's
`dist/` directory, so WeChat Developer Tools can import them directly.

Run `vp run check:mvp` only when you want to reproduce the local generation and
validation gate from source. It regenerates and checks the artifacts, fake-host
tests, page smoke tests, runtime bridge checks, and release summaries.

Screenshot evidence for the primary counter fixture is recorded in
[`docs/miniapp_devtools_screenshots.md`](miniapp_devtools_screenshots.md).

Current verification status as of 2026-07-10:

| Project                 | Import root                                     | Status                                                                                                                                     |
| ----------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Counter                 | `examples/miniapp_counter/dist`                 | Manually verified in WeChat Developer Tools; screenshot evidence captured on 2026-07-09.                                                   |
| Profile App             | `examples/miniapp_profile_app/dist`             | Committed generated project with Counter-aligned DevTools config; local gates cover it, but no manual DevTools pass is claimed.            |
| Minimal App             | `examples/miniapp_minimal_app/dist`             | Committed generated project with Counter-aligned DevTools config; local gates cover it, but no manual DevTools pass is claimed.            |
| JS Runtime Bridge Spike | `examples/miniapp_js_runtime_bridge_spike/dist` | Committed bridge proof project with Counter-aligned DevTools config; local bridge checks cover it, but no manual DevTools pass is claimed. |

In WeChat Developer Tools, always import the `dist/` directory, not the example
source directory.

## 1. Counter

Import root:

```text
examples/miniapp_counter/dist
```

Main page:

```text
pages/counter/counter
```

Expected display and behavior:

- The navigation title is `Lampo Counter`.
- The counter initially shows `0`.
- The keyed-list smoke items initially render as `A` then `B`.
- Tap `+1`; the counter becomes `1`.
- Tap `-1`; the counter returns to `0`.
- Tap `Reset`; the counter stays at or returns to `0`.
- Tap `Todos`; the list updates through the generated dynamic event path.
- Tap `Details`; DevTools should attempt to navigate to
  `pages/details/details`, which shows `Lampo Details`, `from`, and `visits`.
- Tap `Redirect`; DevTools should attempt the generated `wx.redirectTo` path to the
  details page.

Capability button expectations:

- `Login` updates the `login:` panel from idle to a pending, success, failure,
  or unavailable state.
- `Storage` and `Save` update the `storage:` panel.
- `Request` updates the `request:` panel.
- `Toast` triggers the generated toast adapter path.
- `Locate` and `ChooseMedia` may fail or report unavailable without app-owned
  permission/privacy setup, but the page should stay interactive.
- `Share` keeps the page interactive, enables the share menu when
  `wx.showShareMenu` is available, and exercises the generated share lifecycle
  path.
- `Pay` requires an app-owned backend for real payment signing. For this manual
  frontend smoke check, the checked-in demo attempts the `wx.requestPayment`
  handoff so DevTools may show a payment QR/entry before failing on backend
  order/signing details.

## 2. Profile App

Import root:

```text
examples/miniapp_profile_app/dist
```

Main page:

```text
pages/profile/profile
```

Expected display and behavior:

- The navigation title is `Profile App`.
- The page shows `Profile App` and a short App Metadata v1 description.
- The state panel shows profile-shaped fields: `name`, `status`,
  `session_code`, `session_error`, `token`, `location`, `media`, `visible`,
  and `visits`.
- Tap `Refresh`; profile state or visit count should update.
- Type into the `Name` input; the visible `name:` field should update.
- Tap `Login`; session fields should move through pending, success, failure, or
  unavailable phases.
- Tap `Token`; token/storage state should update.
- Tap `Locate` and `Media`; without real app privacy setup they may fail or
  report unavailable, but the page should stay interactive.
- Tap `Settings`; DevTools should attempt to navigate to the generated details
  page.

Details page:

```text
pages/profile_details/profile_details
```

Expected display:

- `Profile Details`
- `from: ...`
- `visits: ...`

This is the recommended non-counter app-shape review path. Current contest
materials do not claim a manual DevTools pass for it; use the generated project
for optional import or local artifact review.

## 3. Minimal App

Import root:

```text
examples/miniapp_minimal_app/dist
```

Main page:

```text
pages/minimal/minimal
```

Expected display and behavior:

- The navigation title is `Minimal App`.
- The page shows `Minimal App`.
- The page shows `A minimal MiniApp app generated through the app adapter.`
- The page shows a `title: ...` state field.

This is a minimal app-adapter smoke project. It is useful for checking the
smallest generated app shape, not for broad capability coverage.

## 4. JS Runtime Bridge Spike

Import root:

```text
examples/miniapp_js_runtime_bridge_spike/dist
```

Main page:

```text
pages/runtime/runtime
```

Expected display and behavior:

- The navigation title is `Lampo JS Runtime Bridge`.
- The page shows `MoonBit runtime count: ...`.
- Tap `+1`; the count increases.
- Tap `-1`; the count decreases.
- Tap `Reset`; the count returns to the initial state.

This project is an isolated MoonBit JS runtime bridge proof. It is useful for
checking the generated runtime bridge behavior, but the primary product review
imports are `miniapp_counter` and `miniapp_profile_app`. Current contest
materials do not claim a manual DevTools pass for this spike.

# 小程序示例 DevTools 验证指南

本指南面向需要把已提交的小程序生成物导入微信开发者工具进行人工验证的评委或审查者。

## 评审前置条件

评委在导入这些项目之前**不需要**运行 `vp run check:mvp`。各示例的生成小程序
project 已经提交在对应的 `dist/` 目录中，微信开发者工具可以直接导入。

只有在需要从源码复现本地生成与验证门禁时，才需要运行 `vp run check:mvp`。该命令会
重新生成并检查产物、fake-host 测试、页面 smoke 测试、runtime bridge 检查和 release
summaries。

主要 counter fixture 的截图证据记录在
[`docs/miniapp_devtools_screenshots.md`](miniapp_devtools_screenshots.md)。

截至 2026-07-10 的当前验证状态：

| 项目                    | 导入目录                                        | 状态                                                                                                            |
| ----------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| Counter                 | `examples/miniapp_counter/dist`                 | 已在微信开发者工具中人工验证；截图证据日期为 2026-07-09。                                                       |
| Profile App             | `examples/miniapp_profile_app/dist`             | 已提交生成项目，并与 Counter 对齐 DevTools 配置；本地门禁覆盖，但不声明已人工 DevTools 验证。                   |
| Minimal App             | `examples/miniapp_minimal_app/dist`             | 已提交生成项目，并与 Counter 对齐 DevTools 配置；本地门禁覆盖，但不声明已人工 DevTools 验证。                   |
| JS Runtime Bridge Spike | `examples/miniapp_js_runtime_bridge_spike/dist` | 已提交 bridge proof 项目，并与 Counter 对齐 DevTools 配置；本地 bridge 检查覆盖，但不声明已人工 DevTools 验证。 |

在微信开发者工具中，始终导入 `dist/` 目录，不要导入示例源码目录。

## 1. Counter

导入目录：

```text
examples/miniapp_counter/dist
```

主页面：

```text
pages/counter/counter
```

预期展示与行为：

- 导航标题为 `Lampo Counter`。
- 计数初始显示 `0`。
- keyed-list smoke items 初始按顺序显示 `A`、`B`。
- 点击 `+1`，计数变为 `1`。
- 点击 `-1`，计数回到 `0`。
- 点击 `Reset`，计数保持或回到 `0`。
- 点击 `Todos`，列表通过生成的动态事件路径更新。
- 点击 `Details`，应尝试跳转到 `pages/details/details`，页面显示
  `Lampo Details`、`from`、`visits`。
- 点击 `Redirect`，应尝试通过生成的 `wx.redirectTo` 路径进入 details 页面。

能力按钮预期：

- `Login` 将 `login:` 面板从 idle 更新到 pending、success、failure 或 unavailable
  状态之一。
- `Storage` 和 `Save` 更新 `storage:` 面板。
- `Request` 更新 `request:` 面板。
- `Toast` 触发生成的 toast adapter 路径。
- `Locate` 和 `ChooseMedia` 在没有应用自有权限/隐私配置时可能失败或显示
  unavailable，但页面应保持可交互。
- `Share` 保持页面可交互；如果 `wx.showShareMenu` 可用，会启用分享菜单，并走生成的分享生命周期路径。
- `Pay` 的真实支付签名需要应用自有后端。这个人工前端 smoke 检查中，内置 demo
  会尝试 `wx.requestPayment` handoff，因此开发者工具可能先显示支付二维码/入口，再因缺少真实后端订单或签名细节失败。

## 2. Profile App

导入目录：

```text
examples/miniapp_profile_app/dist
```

主页面：

```text
pages/profile/profile
```

预期展示与行为：

- 导航标题为 `Profile App`。
- 页面显示 `Profile App` 和 App Metadata v1 的简短说明。
- 状态面板显示 profile 形态字段：`name`、`status`、`session_code`、
  `session_error`、`token`、`location`、`media`、`visible`、`visits`。
- 点击 `Refresh`，profile state 或访问计数应更新。
- 在 `Name` 输入框中输入内容，可见的 `name:` 字段应更新。
- 点击 `Login`，session 相关字段进入 pending、success、failure 或 unavailable 阶段。
- 点击 `Token`，token/storage 状态应更新。
- 点击 `Locate` 和 `Media`，没有真实应用隐私配置时可能失败或显示 unavailable，但页面
  应保持可交互。
- 点击 `Settings`，应尝试导航到生成的详情页。

详情页：

```text
pages/profile_details/profile_details
```

预期显示：

- `Profile Details`
- `from: ...`
- `visits: ...`

这是推荐的非 counter app-shape 评审路径。当前比赛材料不声明它已经通过人工 DevTools
验证；它可作为可选导入项目或本地产物审查项目使用。

## 3. Minimal App

导入目录：

```text
examples/miniapp_minimal_app/dist
```

主页面：

```text
pages/minimal/minimal
```

预期展示与行为：

- 导航标题为 `Minimal App`。
- 页面显示 `Minimal App`。
- 页面显示 `A minimal MiniApp app generated through the app adapter.`。
- 页面显示 `title: ...` 状态字段。

这是最小 app-adapter smoke 项目，适合检查最小生成 app 形态，不用于展示完整 capability
覆盖面。

## 4. JS Runtime Bridge Spike

导入目录：

```text
examples/miniapp_js_runtime_bridge_spike/dist
```

主页面：

```text
pages/runtime/runtime
```

预期展示与行为：

- 导航标题为 `Lampo JS Runtime Bridge`。
- 页面显示 `MoonBit runtime count: ...`。
- 点击 `+1`，计数增加。
- 点击 `-1`，计数减少。
- 点击 `Reset`，计数回到初始状态。

这是隔离的 MoonBit JS runtime bridge 证明项目，适合检查生成 runtime bridge 行为；主要
产品评审导入项目仍是 `miniapp_counter` 和 `miniapp_profile_app`。当前比赛材料不声明该
spike 已通过人工 DevTools 验证。