Files
shanxia2.0/docs/web-admin-mp-webview-modules.md

2.7 KiB
Raw Permalink Blame History

小程序 WebView 模块接入

后续管理端业务进入微信小程序时,只加 H5 路由与工作台入口,不要再复制鉴权、登录注入或第二个 web-view 页。

权威决策见 docs/superpowers/specs/2026-09-14-mp-webview-transport-plan-design.md。首发实现:运输计划 /#/m/pl/plan。

已有骨架(不要新建)

层 路径
小程序壳 miniprogram/pages/common/mp-webview.vue(主包已注册)
换票 POST /api/web/auth/mp-webview-ticket(需登录,走加密)→ H5 POST /api/web/auth/mp-webview-exchange(加密排除)
H5 壳 web-admin/src/layouts/MpWebviewShell.vue
路由识别 isMpWebviewPath(/m/ 前缀)、静态路由 meta.isMpWebview
视觉 三墙绿 #0a9f6d(src/styles/mp-webview.scss),不是管理端 Fresh Mint

新模块 5 步

  1. H5 页面:在 web-admin/src/views/m/<module>/ 写列表/详情等;套 MpWebviewShell。桌面弹窗可加 variant="page" 全屏复用,不要重写业务规则。
  2. 静态路由:web-admin/src/router/routes/staticRoutes.ts 增加 /m/...,meta: { isHideTab: true, isMpWebview: true },且必须写在 catch-all 之前。不要挂桌面 index/index 布局。
  3. 工作台入口:miniprogram/config/workbench-menus.js 增加一项;config/api.js 的 WORKBENCH_ROUTE_MAP 指向同一个壳: pages/common/mp-webview?path= + encodeURIComponent('/m/...')。
  4. 双权限:入口菜单用 mini:...;业务 API 仍校验对应 Web perms。角色需同时具备两者(参考 docs/sql/migrations/2026-09-14-mini-pl-plan-webview-menus.sql)。
  5. 发版:微信业务域名已配置时,只发 web-admin 静态资源即可,不必提审小程序。

禁止:每个模块再做一个 web-view 页面、再做一套登录注入、URL 长期带 accessToken、把公开司机/现场 token 页(/#/public/pl/transport/:token)当登录模板。

运输计划对照

  • 列表 /m/pl/plan,详情 /:id,表单 /new /:id/edit /:id/arrange,打印 /:id/print,三方人车 /paste
  • 工作台 code pl-plan-webview,perms mini:pl:plan:manage
  • 与原生现场页 pages/pl/transport-plan/*(mini:pl:transportPlan:list)并存,不要混名

回归清单

  • ticket 第二次 exchange 失败
  • 换票后列表租户数据与桌面同账号一致
  • 新增草稿、安排、复制、等通知、作废、打印预览、三方人车可走通
  • 401 回小程序登录,不到 /#/auth/login
  • 只发 web-admin:改卡片文案在小程序 WebView 内可见
  • 原生「运输计划单」现场页仍可用
  • 生产加密:exchange 明文、后续计划 API 加密