# MiniApp DevTools Screenshot Evidence

This page records the WeChat Developer Tools visual evidence for the committed
`examples/miniapp_counter/dist` Skyline MiniApp project. Judges can inspect
these screenshots without running the local validation gate.

- Capture date: 2026-07-09
- Import root: `examples/miniapp_counter/dist`
- Renderer shown by DevTools: `Skyline`
- Local gate for reproducing artifacts: `vp run check:mvp`
- Judge note: the committed `dist/` project can be imported directly; running
  `vp run check:mvp` is optional unless regenerating or auditing the gate.

## English Walkthrough

1. Initial counter page.

   ![Counter initial page](assets/miniapp_devtools/01-counter-initial.png)

   Expected result: the generated Skyline page renders the counter, grouped
   action buttons, status panels, and keyed list items `A` and `B`.

2. Counter state update.

   ![Counter count update](assets/miniapp_devtools/02-counter-count.png)

   Expected result: tapping `+1` / `-1` / `Reset` updates the counter through the
   generated event bridge and state projection.

3. Login capability adapter.

   ![Counter login success](assets/miniapp_devtools/03-counter-login.png)

   Expected result: tapping `Login` calls the generated `wx.login` adapter and
   writes the returned code into the visible login status panel.

4. Request capability adapter.

   ![Counter request success](assets/miniapp_devtools/04-counter-request.png)

   Expected result: tapping `Request` calls the generated `wx.request` adapter
   and displays the response body inside the request panel.

5. Payment handoff.

   ![Counter payment QR](assets/miniapp_devtools/05-counter-payment-qr.png)

   Expected result: tapping `Pay` reaches the WeChat payment handoff. Lampo only
   demonstrates the frontend handoff; a production payment still requires
   app-owned backend signing.

6. Payment cancellation and keyed list operation.

   ![Counter payment cancellation and keyed list](assets/miniapp_devtools/06-counter-payment-cancel-todos.png)

   Expected result: cancelling the payment updates the visible payment panel,
   and tapping `Todos` applies keyed-list operations so the list changes to
   `B++`, `C`, `A`.

7. Details navigation.

   ![Counter details page](assets/miniapp_devtools/07-counter-details.png)

   Expected result: tapping `Open details page` navigates to the generated
   details page and preserves the `from: details` query-derived state.

## 中文演示说明

本页记录已提交的 `examples/miniapp_counter/dist` Skyline 小程序在微信开发者工具中的
可视化证据。评委可以直接查看这些截图；除非需要重新生成或审计本地门禁，否则不需要
先运行 `vp run check:mvp`。

- 截图日期：2026-07-09
- 导入目录：`examples/miniapp_counter/dist`
- DevTools 显示 renderer：`Skyline`
- 复现生成与验证门禁：`vp run check:mvp`
- 评委说明：仓库已提交生成好的 `dist/` 小程序项目，可直接导入微信开发者工具。

1. 初始 Counter 页面。

   ![Counter 初始页面](assets/miniapp_devtools/01-counter-initial.png)

   预期效果：生成的 Skyline 页面显示 counter、分组按钮、状态面板，以及 keyed list
   初始项 `A`、`B`。

2. Counter 状态更新。

   ![Counter 计数更新](assets/miniapp_devtools/02-counter-count.png)

   预期效果：点击 `+1` / `-1` / `Reset` 后，通过生成的事件桥和 state projection
   更新数字。

3. Login capability adapter。

   ![Counter Login 成功](assets/miniapp_devtools/03-counter-login.png)

   预期效果：点击 `Login` 后，生成的 `wx.login` adapter 被调用，返回 code 写入可见
   login 状态面板。

4. Request capability adapter。

   ![Counter Request 成功](assets/miniapp_devtools/04-counter-request.png)

   预期效果：点击 `Request` 后，生成的 `wx.request` adapter 被调用，请求响应显示在
   request 面板中。

5. 支付前端 handoff。

   ![Counter 支付二维码](assets/miniapp_devtools/05-counter-payment-qr.png)

   预期效果：点击 `Pay` 后进入微信支付 handoff。Lampo 这里只演示前端 handoff；
   生产支付仍需要应用自己的后端签名。

6. 支付取消与 keyed list 更新。

   ![Counter 支付取消与 keyed list](assets/miniapp_devtools/06-counter-payment-cancel-todos.png)

   预期效果：取消支付后 payment 面板展示失败状态；点击 `Todos` 后 keyed list 更新为
   `B++`、`C`、`A`。

7. Details 页面跳转。

   ![Counter Details 页面](assets/miniapp_devtools/07-counter-details.png)

   预期效果：点击 `Open details page` 跳转到生成的 details page，并保留
   `from: details` 查询参数状态。