浙里办H5开发所爬过的坑

10,321 阅读4分钟
  • 背景

为什么写要写这篇文章?

主要是自己在开发的过程中深受其害。希望通过我的经验教训,能够帮助到更多的小伙伴,同时也是吐槽下浙里办的文档,也感谢给与我帮助的朋友。

技术栈声明

我主要是用的是vue.js来开发前端H5页面,加了一个vant的移动端的UI组件库,脚手架用了Vue-cli。

  • 遇到的问题及解决方式

上传到测试环境的页面白板,本地是可以的

首先vue.config.js中的publicPath路径得设置成'./'。相信不少小伙伴喜欢用vue-router路由的history模式,但忽略history模式是需要服务端配合的,浙里办是不开放服务端配置的,所以只能选择hash模式来处理,问题就解决了。

单点登录跳转不到指定页面

这个问题也是路由hash模式的坑,hash是不支持重定向的,这句话是重点。知道这个原理就好解决了,就是把路由中的'#/'号去掉就可以了。就光这个路由的问题把我坑了两次,文档还没说明也是心累。

const url = window.location.href;
const href = url.replace('#/', '');
window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=****&goto=${href}`;

浙里办允许第三方服务接口吗?

虽然浙里办提供了RPC接入,官方推荐用RPC接入,但浙里办的RPC是不支持图片上传的。所以是允许第三方服务接口的。

线上测试环境无法调用接口,接口没有返回内容

我这边说的是第三方接口服务无法调用的情况,一共有两种情况:1.接口跨域问题,需要后端的同学处理下;2.是证书的问题,浙里办的接口是需要https的。

埋点问题

这个文档写的也是有问题的,怎么埋点文档应该是写的可以看得懂,主要问题是没有说明白测试埋点,怎么判断埋点成功,就是看有个"###/m.gif"这个请求后面连接的一串东西里面的内容对不对,我当时理解成了看我调用的接口上都会带后面一串埋点的东西。这个在浏览器调试中选择ALL能看到,在政务中台的应用中测试是成功的,在自己浏览器看这个接口是没有回调的,应该是跨域,属于正常现象。埋点的内容需要url转义才可读,可以找个工具转义看看埋点的内容。

政务中台测试JSBridge API

也许是我之前开发习惯微信小程序的缘故,以为这个政务中台调用这个JSBridge也是有反馈的,我这边说明下,这边是没有反馈的,你的手机上连接的浙里办才会有反馈,别想着这个这政务中台能够做前端调试前端页面。正确的方式手机连接政务中台,在调试JSBridge的时候使用,比如调用扫码功能,电脑上一点,手机上就可以扫码了。这玩意得打开浙里办应用,且手机在亮屏的情况下可以,浙里办退出或者到后台或者手机黑屏就断开连接了,也许可能是我mac环境的缘故,反正不是很友好,我都是先做完不涉及JSBridge的再测试这个东西的。至于设置title的功能压根就看到到效果,请上传代码到测试环境自行查看。

支付宝小程序测试问题

官方是说了一套代码两端运行,那为什么这个H5页面用支付宝打开是不能调用JSBridge的接口呢?我当时都想引入支付宝的H5开发的JSBridge来处理了。我先说下原理,其实就是浙里办的支付宝小程序内嵌了一个浏览器,用这个内嵌的浏览器就可以调用浙里办的JSBridge。应用管理的中预览的二维码是给浙里办APP用的,支付宝的在二维码需要你自己去转换。3pwls.csb.app/ 在这个网页中输入你浙里办预览二维码的网址,然后转换成支付宝能识别的二维码就可以在支付宝中看效果了。为什么不在后台同时给两个二维码,这个转换也不麻烦啊?

  • 总结

浙里办这一些列的操作给钉钉上的运维和解答问题的同学找了不少活干,我很怀疑他们是需要这个回答的问题量来达到某种目的。这么大的公司竟然连基本好用的文档都没有,能用文档解决的干嘛要投入那么多人力。能用软件处理的问题为什么还需要人工手动来配置?虽然我也吐槽微信小程序的审核现在做的越来越严格了,但微信小程序重来不在开发阶段“劝退”我,卡我开发进程。