| 模板文件 | 用途 |
|---|---|
app.json |
应用身份、能力、权限、运行要求和数据版本。 |
index.html 和 src/main.tsx |
Vite 入口与 React 根组件。 |
metadata/icon.png |
Host 应用列表图标。 |
vite.config.ts |
保留相对资源基址 ./ 和目标 WebView 对应的构建版本。 |
dist/ |
由构建生成,打包从这里收集静态资源。 |
资源与路由
把脚本、样式、字体和图片放进构建产物。用相对路径引用资源,用 hash 路由处理应用内页面,例如 #/tasks。Host 只加载当前应用签名包内的资源与受管媒体。将 CDN 字体、远程脚本和框架运行时改为构建时依赖。远程业务数据走 受管联网,媒体通过文件 API 访问。
生产 WebView 禁止页面直接联网、远程脚本、iframe、Worker 和内联脚本。打包也会拒绝源码映射以及不支持的资源后缀,例如独立 SVG。浏览器开发时能运行的写法,还应在签名包和目标 Host 上验证。
开发与调试
npm run dev 启动 Vite。普通浏览器使用 开发模拟 调试页面状态,设备上使用 Host 提供的 Bridge。模拟存储、拍照和测试 HTTP 响应适合覆盖页面分支,真实权限、连接、设备回调和渲染以真机为准。
npm run build 生成产物。打包前检查 dist/index.html、资源加载路径和包体积。开发模拟放在开发条件分支,避免随生产产物交付。
生命周期
页面启动先握手,再读数据和能力。组件订阅输入或原生事件时,在卸载时释放监听。收到后台事件后停止发起新的前台任务,回到前台时重新读取必要状态。重载会生成新的 Bridge 上下文。恢复应用时从存储读取未完成的业务意图,用原操作 ID 查询,详见 持久操作。