记录个人遇到的 h5应用接入’浙里办’ 的爬坑之路！
如果文章对你有帮助，可以点击链接关注我的掘金社区账号 更多技术分享请移步我的掘金哦~ 😀😀😀
点击链接 学习交流群(前端微信群) - 掘金 (juejin.cn) 加vx拉你进 前端学习交流群 让我们一起 好好学习（🐟🐟🐟）吧😎😎😎
背景
最近接手一个公司之前使用vue2搭建的一个H5项目，现在要求接入到 浙里办APP、浙里办-支付宝小程序。 刚开始可能由于该项目的负责人没有讲的太清楚，导致我和后端哥们二脸懵逼！！！
就简单告诉我们app改造接入浙里办，然后群发了 语雀(https://odynww.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050?#DB3a8) 这篇文档。 也没和我们讲’浙里办’是什么？之前的app是干嘛用的！我是挺无语的. 对于没接触过这个方向的同学来说简直是懵逼，直接去阅读这么长一篇文档的话也是晕头转向,无从下手的我们只好先请教了之前接触过这方面的同事给我们大致讲了讲流程才大体明白了我们需要做什么。接下来在开发过程中发现要注意的东西还是挺多的，踩了很多坑，特以此篇记录，也为能帮助到初次接触这方面的同学.
文档阅读
拿到对接浙里办的文档时，一定要多阅读几遍！！！因为第一次看这东西，内容也多，理解能力不是特别强的同学没几遍还真整不明白。整个文档内容基本了解以后就可以专注前端开发部分了。
环境准备
首先问项目负责人要文档中说的 应用开发管理平台相关账号，这个平台也就是浙里办的应用中台。我们的h5应用开发完打包后需要上传到这个平台，然后测试、发布上线.
我们应用一部分内容需要调用浙里办的 JSBridge API调用原生功能, 而这个api只能在浙里办环境下运行,浏览器访问是不可以的! 所以要下载官网提供的debug工具,后面接口调试需要用.
单点登录
浙里办是硬性要求用户数据都是要走他那边的登录的，针对这个要求，需要把登录操作的页面跳转直接改为浙里办提供的登录地址。参考文档 1.1.7.3 个人登录
首先单点登录分为：个人用户的单点登录和法人用户的单点登录,我这里只做了个人用户*登录。
个人登录又分为：浙里办app环境登录 和 浙里办-支付宝小程序环境登录.
*环境判断见文档：1.1.7.1.浙里办APP、支付宝-浙里办小程序的判断代码
⭐⭐⭐个人登录注意点：
需要用到接入码、这个接入码也是找项目负责人由甲方配置提供；goto跳转地址就是我们前端应用的首页，这个地址需要提供给甲方让他们配置好。
这样我们就按照文档拼接成了一个登录的跳转地址,等他们把跳转地址配置完之后,用户操作一个涉及到用户读取却没有登录的地方时，就跳转到了浙里办的登录页面地址;
然后输入自己的账号密码点击登录,这时候登录成功后页面会自动的跳转到你在第二部分 goto设置的回调地址上，也就是我们h5应用的（一般为）首页。
在跳回来的过程中会在 URL 路径上带有登录时返回给你的 ticket 等参数，此时前端需要从url里取出这个标识传给后端进行 ①票据认证 ②票据认证完会返回一个 token 这时就可以拿这个 token 获取到用户信息了.
为了简洁操作 这里我们做的时候直接把ticket传给服务端，服务端处理完 直接把用户信息返回给了我客户端.
埋点
他们提供的文档很模糊，我在初次接触这块的时候还是在网上查找了大量资料完成.
基础埋点代码如下：
<script>
(function(w, d, s, q, i) {
w[q] = w[q] || [];
var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
j.async = true;
j.id = 'beacon-aplus';
j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'aplus_queue');
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
});
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
});
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['appId', 'your appid']
});
</script>
其他pv\uv相关埋点建议写成单独js文件需要的埋点的页面引入，在vue项目里直接写到vue实例里可能导致埋点不成功。
接口调试
调试 JSBridge API时，就需要用到上面提到的debug工具。调试的过程中手机浙里办app 需要全程在线才能一直连接调试、屏幕熄灭也会断开。
所有关于浙里办的 JSBridge API 的原生访问接口都需在真机或 浙里办app环境上测试; 浏览器是不行的！通过登录政务应用平台,上传源代码后生成的二维码，可以手机扫码查看效果。在扫码之前确定项目里引入了JSBridge API 资源。
二次回退问题
我这里遇到的问题是 应用首页返回浙里办app时需要2次或者多次点击才可返回，解决方案：利用router.beforeEach 判断路由然后调用 政务api的close关闭接口.
支付宝小程序测试问题
应用管理平台发布上线后生成的访问地址二维码是给浙里办APP用的！！！支付宝扫码访问需要自己去转换：（https://3pwls.csb.app/） 在这个网页中输入你浙里办预览二维码的网址，然后转换成支付宝能识别的二维码就可以在支付宝中看效果了。
原理：其实就是浙里办的支付宝小程序内嵌了一个浏览器，用这个内嵌的浏览器就可以调用浙里办的JSBridge了。
h5适老化
自建h5应用接入浙里办以后还需要‘适老化’版本的开发，所谓‘适老化’ 主要是适应于年龄稍微大点的长辈，也就是长辈版。适老化版本内容、功能要求和标准版一致，标准版下架后理应适老化版本也一同下架，应为一个系统应用。这里我是使用了两版路由实现了不同环境的版本切换。
打包发布
前端应用不需要打包，只需要将项目 src static index.html package.json gbc.json .postcssrc.js .babelrc 等资源依赖压缩为.zip的包 且不能大于40M,然后上传到 政务中台应用管理等编译通过后就自动生成二维码和链接可以查看测试版本了。
⭐⭐⭐这里我遇到了坑1:
之前公司前端开发好的h5应用使用的图片有部分是中文命名，结果windows系统打包zip压缩后中文乱码了，导致上传应用平台编译失败，而mac系统打包不会乱码！切记开发中不要使用中文命名！！！
⭐⭐⭐坑2:
单点登录时配置的回调地址在发布时需要提供给浙里办的工作人员进行配置，不然如果配置是测试回调地址，发布上线后扫码跳转的还是测试地址!
注意：浙里办测试环境会有调试按钮，发布线上环境后就没有了.
总结
虽然整个项目最开始是懵逼和无奈的，过程是崎岖和痛苦的.但是完成的那一刻心里还是挺开心的！说实话东西没多难，但是我觉得初次接触一个新事物、新项目的时候还是得先整明白 是什么？干什么？完成什么？ 只有清楚这些才能理清思路和步骤然后再去进阶完成目标。另外吐槽一下浙里办的技术支持,有一些问题回答的太官方! 甚至你问到一个不清楚的问题他会直接丢给你对接文档原链接！！！ 还是挺无语的只能和同事探讨或者网上看看相关博客。也可能是因为我比较菜吧, 总之还是要微笑面对生活,要相信没有克服不了的困难! 加油!