WinJS App 模板(移动端 H5)开发指南。包含 Vue 3 配置、REM 适配、VConsole 调试、请求封装、路由与构建。适用于:(1) create-win app 模板创建的项目 (2) 修改 .winrc 配置 (3) 扩展 src/app.js (4) 编写 services 请求 (5) 配置 REM/VConsole (6) 排查移动端 H5 问题。
面向移动端 H5 应用(Vue 3 + Vue Router 4 + Vite),提供配置、目录约定、请求与调试、REM 适配等核心功能。
@winner-fed/plugin-request(请求)、@winner-fed/plugin-wconsole(VConsole)关键配置项说明:
{ type: 'hash' } 适合 H5 部署window.LOCAL_CONFIG,常用键:API_HOME、API_UPLOAD、IS_OPEN_VCONSOLE@/assets/style/variable.less 与 @winner-fed/magicless/magicless.less{ ios: 10, android: 6, chrome: 80 }关键导出配置:
timeout、requestInterceptors、responseInterceptors,对接 services/request.jsscrollBehavior 等路由选项⚠️ 修改 modifyClientRenderOpts 等 memo 钩子必须返回新对象。
详见 详细用法参考。
@@/global-layoutrequest.js: 请求实例、拦截器、错误处理autoMatchBaseUrl.js: 按前缀返回 base URLconstant.js: 统一常量(TIMEOUT、PAGE_NUM、前缀等)新增接口:在 appConfig 增加键 → constant.js 增加前缀 → autoMatchBaseUrl.js 扩展映射。
| 命令 | 说明 |
|---|---|
win dev | 开发服务器 |
win build | 生产构建 |
win preview | 预览构建 |
npm run lint / lint:fix | Biome 检查/修复 |
npm run format | Biome 格式化 |
win cache | 清缓存 |
常见问题:
appConfig 环境配置与 autoMatchBaseUrl 映射IS_OPEN_VCONSOLE: true 且 wconsole 插件已启用.winrc 中 convertToRem 配置.winrc 语法,执行 win cache 重试详见 常见问题与排错。
本技能随模板下发,可独立使用:
在线资源: