Full Circle · Mini App Editor

Design设计

BACKGROUND背景

TAB BAR标签栏

DESIGN CHECK设计检查

Blocks模块

Drag a block onto the phone to add it. Drag a block onto another to reorder this list.把模块拖到手机上即可添加;把一个模块拖到另一个上可重新排序。

Tips提示

Drag a block onto the phone to add it.把模块拖到手机上即可添加。

Grab any block in the preview to reorder.在预览中拖动任意模块可重新排序。

Click a block to edit it on the right.点击模块即可在右侧编辑。

Press ? for keyboard shortcuts.按 ? 查看快捷键。

9:41

Select a block on the phone to edit it.在手机上点选一个模块进行编辑。

Preview on phone手机预览

See the current draft in the actual mini app, not just the H5 mirror.在真实小程序中查看当前草稿,而非仅 H5 镜像。

What this does这是什么

Loads the mini app on a real phone using the layout you're editing right now (your unpublished draft), so you can see the changes before pressing Publish.用您当前正在编辑的草稿(未发布)在真机上打开小程序,发布前先确认效果。

Steps操作步骤

Open WeChat DevTools on your computer and load this mini-app project. 在电脑上打开 微信开发者工具,并加载本小程序项目。
At the top, click the Compile dropdown (next to the green ▶ button) → choose Add Compilation Mode. 在顶部点击编译下拉(绿色 ▶ 按钮旁) → 选择 添加编译模式。
In the dialog, paste this into the Startup Page field: 在弹窗中,把下方路径粘贴到 启动页面 字段:
pages/index/index
Paste this into the Parameters field (no leading ?): 把下方内容粘贴到 启动参数 字段(无需开头的 ?):
preview_draft=1&page=home
Give the mode any Mode Name (e.g. "draft preview") → click OK → click Compile. The simulator (and any phone scanning the DevTools preview QR) launches into your current draft layout. 任意起一个名称(例如「草稿预览」) → 点击确定 → 点击编译。模拟器(以及扫描预览二维码的真机)将以当前草稿启动。

Tip — once WECHAT_APP_ID and WECHAT_APP_SECRET are configured in .env (and pm2 restarted), this modal will show a real scannable QR — your teammates can open the draft in their own WeChat directly, without DevTools. 提示 — 配置 WECHAT_APP_ID 及 WECHAT_APP_SECRET 后,重启 pm2,本页将显示可直接扫码的二维码,无需开发者工具,同事用微信即可打开草稿。