前端开发记录:上架浙江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 仓库代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容