vue2 搭建的 H5 项目如何接入浙里办 APP 及支付宝小程序？
背景
之前接手过一个使用vue2搭建的H5项目，现在需要访问浙里办APP和浙里办-支付宝小程序。一开始因为项目负责人没有解释得太清楚，所以我和后端哥们都一头雾水！ ！ ！
他只是告诉我们，app改造是接入浙江办事处的，然后给群里发了一份语雀文档。你连浙江李办事处是什么都不告诉我们吗？之前的应用程序是用来做什么的？
我实在是无语了。对于从来没有接触过这个方向的同学来说，简直是一头雾水。这么长的文档直接读起来会很混乱。我们不知道从哪里开始，只好请以前接触过这方面的同事给我们解释一下流程，然后我们就大致明白了我们需要做什么！接下来，在开发过程中，我发现还有很多需要注意的地方。踩过很多坑，也从网上查阅了很多资料，所以将其记录在这篇文章中。
文件阅读
当你拿到浙江李办的文件后（我的文件已经过期了，这里就不贴了），一定要多看几遍！ ！ ！因为这是我第一次看这个东西，内容很多，看了几遍实在是看不懂。当你对整个文档内容有了基本的了解后，就可以重点关注前端开发部分了。
环境准备
首先向项目负责人索要文档中提到的应用开发管理平台相关的账号。该平台也是浙江李办的应用中心。我们的h5应用开发完成、打包之后，需要上传到这个平台，然后进行测试、发布、上线。
我们的部分应用内容需要调用浙江办事处的API来调用原生功能，而这个API只能在浙江办事处环境中运行，不允许浏览器访问！因此需要下载官网提供的工具，后面进行接口调试时需要用到。
单点登录
浙江办事处严格要求所有用户数据必须通过其一侧登录。针对这一需求，登录操作的页面跳转需要直接改为浙江办事处提供的登录地址。参考文档1.1.7.3 个人登录
首先，单点登录分为：个人用户单点登录和合法用户单点登录。我这里只为个人用户登录。
个人登录分为：浙江App环境登录和浙江支付宝小程序环境登录。
环境判断见文件：1.1.7.1。浙江APP和支付宝-浙里办小程序判断代码
⭐⭐⭐个人登录注意事项：
需要访问代码。该接入码也是由甲方配置并提供给项目负责人的； goto跳转地址就是我们前端应用的主页。该地址需要提供给甲方进行配置。
这样我们就按照文档拼接成了一个登录跳转地址。他们配置好跳转地址后，当用户操作涉及阅读但不登录的地方时，就会跳转到浙江办事处的登录页面。地址;
然后输入你的账号和密码，点击登录。登录成功后，页面会自动跳转到你在goto第二部分设置的回调地址，也就是我们h5应用的（通常）首页。
在跳转回来的过程中，会有URL路径登录时返回给你的参数。这时前端需要从URL中取出这个标识传给后端进行①票证认证②票证认证完成后会返回a。您可以使用它来获取用户信息。
这里为了简化操作，我们在做的时候直接传给服务器。服务器处理完后，直接将用户信息返回给我的客户端。
埋葬要点
他们提供的文件非常模糊。刚接触这方面的时候，我还是在网上查了很多资料才完成的。
基本埋点代码如下：
(w, d, s, q, i) {
建议将其他pv和uv相关的嵌入点写入单独的js文件中需要嵌入点的页面中。直接将它们写入vue项目中的vue实例中可能会导致嵌入点不成功。
接口调试
调试API时，需要使用上面提到的工具。在调试过程中，手机折板app需要全程在线，才能保持连接状态进行调试。当屏幕熄灭时，它也会断开连接。
浙江API所有原生访问接口均需在真机或浙江APP环境下进行测试；浏览器将无法工作！登录政务应用平台并上传源代码，生成的二维码可以用手机扫描查看效果。扫码前请确保项目中已引入API资源。
二次回滚问题
我这里遇到的问题是，应用首页返回哲力版app时，需要点击两次或两次以上才能返回。解决方案：使用 .确定路由，然后调用政府API的关闭接口。
支付宝小程序测试问题
应用管理平台发布后生成的访问地址二维码是针对浙江立办APP的！ ！ ！要访问支付宝扫码，需要您自行转换：(.csb.app/)在此网页输入您浙江办事处预览二维码的网址，然后将其转换为支付宝可以识别的二维码，然后然后就可以在支付宝中看到效果了。 。
原理：其实浙江大学的支付宝小程序内置了一个浏览器，你可以使用这个内置的浏览器来调用浙江大学。
h5适合老化
自建的h5应用接入浙江办事处后，还需要开发“老化友好”版本。所谓“老年友好型”版本主要适合年龄稍大的长辈，即老年版。老化友好版的内容和功能要求与标准版相同。标准版下架后，老化友好版也应该下架，而且应该是系统应用。这里我使用了两个版本的路由来实现不同环境下的版本切换。
打包发布
前端应用程序不需要打包。只需要压缩项目 src.html.json gbc.json..js 即可。等资源依赖打包成.zip包且不能大于40M，然后上传至政务中心应用管理。编译通过后，会自动生成二维码并链接查看测试版本。
⭐⭐⭐坑一：
公司前端开发的h5应用中使用的一些图片是用中文命名的。导致系统打包zip压缩后出现中文乱码，导致上传的应用平台无法编译。不过mac系统打包不会乱码！切记开发时不要使用中文命名！ ！ ！
⭐⭐⭐坑2：
单点登录时配置的回调地址需要在发布时提供给浙江办事处工作人员进行配置。否则，如果配置的是测试回调地址，发布上线后依然会通过扫码重定向测试地址！
注：浙江办事处测试环境会有调试按钮，但上线环境发布后就会消失。
总结
虽然整个项目一开始很迷茫无助，过程也坎坷，但是当完成的时候我还是很开心！说实话，事情并没有那么困难，但是我觉得当你第一次接触一个新的事物或者项目的时候，你还是需要明白它是什么？该怎么办？成就了什么？只有了解了这些，我们才能明确自己的思路和步骤，进而朝着实现目标前进。另外，吐槽一下浙江丽都办事处的技术支持。有些问题的答案太官方了！即使你问不清楚的问题，他也会直接把对接文档的原始链接扔给你！ ！ ！我还是无语，只能和同事讨论或者上网看相关博客。也许是因为我是一个坏人，但我还是要微笑面对生活，加油！