前端开发记录：上架浙江IRS平台应用时的事项

本文中所涉及的项目对接日期为2024年12月，后续因版本不同，可能存在流程上的差异

本次涉及应用类型：
1、web端：政务网网站；2、移动端（H5）：浙里办应用

本次前端项目主依赖相关版本：

node：18.15.0、npm：9.5.0、vue：^3.5.10、vite：^5.4.8

前期准备

1、vite.config.js 中需将打包配置项的 outDir 设置为 build
2、生产环境变量 .env.production 配置中的接口前缀 VITE_APP_BASE_API 需要写全地址，如：将 原 /dev-api 改写成 https://www.demo.com/dev-api（并且该地址需包含在下述 ”步骤四“ 的网关配置中）
3、通过文件压缩工具将工程文件中除 node_modules 之外 的源码文件压缩为 xxx.zip 的压缩包

整体流程

步骤一：扫码登录IRS平台开发商
IRS官网地址：https://oauth-irs.zj.gov.cn/login（当前需连通VPN后才可以访问，可选择使用https://app.topsec.com.cn/）

步骤二：在服务侧菜单下的名称列表页，点击应用操作栏的<部署发布>按钮（应用由项目负责人创建）

步骤三：若已上传过代码包，则点击<更新代码>按钮；若未上传过代码包则先创建（版本号自定义，建议已 1.0.0 起始）

步骤四：回退至上一页，点击应用操作栏的<配置>按钮，填入对应的网关白名单配置（可配置多个）

步骤五：在线测试通过后，按 ”步骤二“ 进入部署发布页，点击<提交发布>，项目负责人执行后续上架流程。（对于已提交发布后，需再次更新版本的，按上述步骤进入部署发布页面，点击<更新代码>，注意此时需升级版本号后上传，否则平台系统会报错误提示）

已知问题记录

相关参考代码：https://gitee.com/MumiTraveller/zj-irs.git，（注意阅读 remark 文件）

一、共通问题

1、编译报错：build 不存在。解决方案：上传的 zip 压缩包内需包含 build 文件夹
2、编译报错：build 无内容。解决方案：先执行 npm run build 后再压缩
3、编译报错：编译超时。解决方案：删除当前版本，升级版本号重新上传
4、编译报错：上传超过限制（当前版本限制 20M）。解决方案：（1）压缩本地静态文件；（2）若压缩后仍超出，可尝试仅将 build文件夹 和 vite.config.js文件 压缩上传，其他源码文件不上传，该方式虽不符规范但亲测可用（暂未遇到 build 文件夹超出的情况）
5、功能异常：接口返回的非全链图片地址，开发环境可显示，平台测试环境图片不显示。解决方案：

// 例： url: '/profile/images/demo.png'

// 获取图片地址
export const getWebImages = (url) => {
    if (!url) return '';
    if (isHttp(url)) return url;
    return import.meta.env.VITE_APP_BASE_API + url;
};

// 判断url是否是http或https 
export function isHttp(url) {
    return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}

6、功能异常：切换用户重新进入应用后，用户信息未更新。解决方案：本次原因是 token 存在了 localStorage 中，需改为 sessionStorage 存储 （浙里办微信端也是内嵌H5，所以可使用sessionStorage)

二、Web相关

1、审核未通过：页尾缺少本服务提供单位和本服务支持电话。可通过文件 《“浙里办”服务开发指引 V1.4.1》.pdf 搜索 “自定义联系我们”查看说明，具体内容需项目负责人提供
2、适老化：由于文档中未查到获取状态方式，所以通过查看元素获取到类名 zjzwOLD 后在各页面的该类名下写入相应样式

三、H5相关

1、安卓系统报错：Unexpected token ? 。解决方案：将代码转译为ES5，参考文章：https://juejin.cn/post/7265833406227169316
2、安卓系统报错：Promise.allSelect is not a function。解决方案：引入 core-js，参考文章：https://blog.csdn.net/m0_54490473/article/details/143648884
3、安卓系统报错：浙里办API-saveImage调用失败未知错误：Attempt to read from null array。解决方案：本次原因是调用 ZWJSBridge 的 saveImage 时，图片地址为 base64 格式，需改为 png、jpg、jpge 等图片格式并按照文档要求传入绝对路径
4、审核未通过：首页底部无底栏。可通过文件 《“浙里办”服务开发指引 V1.4.1》.pdf 搜索 “底栏”查看说明，具体内容需项目负责人提供
5、审核未通过：二级页面标题未设置。解决方案：（1）每个路由的配置项 meta 中设置对应的路由名 title、（2）在全局路由守卫中调用 ZWJSBridge 的 setTitle ，传入路由 title 即可
6、微信端：由于微信屏蔽了上传接口域名，所以本项目使用 ZWJSBridge.uploadFile 时无法上传文件。解决方案：暂未找到最佳方案，本次做法是判断微信环境给出弹窗提示——“请在浙里办App内操作”

// 判断是否为微信环境
function isWeChatMiniProgram() {
  const isWeChatBrowser = /MicroMessenger/i.test(navigator.userAgent);
  if (!isWeChatBrowser) {
    return Promise.resolve(false); // 不是微信浏览器，肯定不是微信小程序
  }

  // 使用Promise封装异步检测
  return new Promise((resolve, reject) => {
    if (typeof wx !== "undefined" && typeof wx.miniProgram !== "undefined") {
      try {
        wx.miniProgram.getEnv(function (res) {
          resolve(res.miniprogram); // 返回是否为微信小程序
        });
      } catch (e) {
        console.log("Error: ", e);
        resolve(false); // 调用失败，可能不是微信小程序环境
      }
    } else {
      resolve(false); // 默认返回false，表示不是微信小程序环境
    }
  });
}

7、适老化：App.vue 中 通过 ZWJSBridge 的 getUiStyle 获取到状态后绑定动态 class，后续各页面可针对性写入样式

四、其他问题

如：埋点、单点登录等，详见上方 Gitee 仓库代码