这段时间关于浙里办上架的一些注意事项。

前言

最近公司在做的项目是对接浙里办APP里面的一个模块，说难不难，说简单也是挺繁琐的，应甲方的要求做两个适配，第一个和浙里办的适配另外一套也得用微信的适配，两者有差异也有相同，都是在做关于设备或者访问自己的原生方法时都有自己的 jssdk 方法。所以在用的时候只要有区分就问题不大，但是在做的时候发现要注意的东西还是挺多了，走了很多坑也踩了很多坑，特此篇留个记录以后翻阅，也为了帮助以后遇到相关问题的朋友。通篇读下来基本上你就知道从代码打包到上架部署的流程了。

技术方案

在技术讨论的时候要求用的是 VUE 开发，然后发布之后可以浏览器访问直接放微信公众号链接即可。这里说一下官方文档上使用的是 react 其实相差不大，对那块代码熟悉就用哪个，打包的时候只要有 package.json 就可以了，文档中说到需要通过此文件来加载模块包和打包文件等。使用 uni-app 开发的代码暂不知道如何操作，具体可以稳钉钉的技术对接群里面相关技术对接人员（3434055），这个群后面还会说到。

开发流程

我们从拿到项目到开发的第一步开始

1. 拿到项目甲方会给你一个技术对接浙里办的官方文档 “浙里办”h5微应用对接流程（语雀，odynww.yuque.com/docs/share/…）
2. 开始写代码之前你先好好看看这篇文档的 1.1的部分“开发阶段”，这里需要你在代码里加入相关的一些埋点代码和代码兼容的处理以及构建打包注意的问题
3. ⚠️ 单点登录这项，我单独拿出来说
4. 接下来前后端开始按计划开发，等全部前面工作完成之后开始对接接口，这里就要让后端同志把现有的 可用接口配置到政务中台的应用开发管理平台里面的 rpc接入 并且调试好上线，这个地方需要提前申请开通服务，如果没有申请接入是会有跨域报错或者页面白屏的状态。
5. 等上部 rpc 接入完成之后就是前端开始的工作了，我们需要把接口地址做一个改变，换成 rpc 下面的 api名称即可，当然之前的请求库 axios 也得换成官方提供的 @aligov/jssdk-mgop 通过这个库需要改一下之前的请求方式，文档地址 op.zjzwfw.gov.cn/mobile/docu… ，请求之前先在管理平台的 应用管理 》配置 拿到项目对应的 appKey （注意如果没使用rpc 的接口还是之前的接口会出现白屏的问题）
6. 把前端涉及到的路由模式改成 hash 模式，因为浙里办的正式地址只有一个。在微信端的时候可以随便你改成 history 模式，以便做分享处理。
7. 调试接口部分，前端人员应该用 浙里办app 或者使用官方提供的 debug工具 做为调试依据op.zjzwfw.gov.cn/mobile/docu…，在debug调试的过程中浙里办app需要全程在线才能一直连接（我在做的时候是这样的..）调试，而且所有关于浙里办的 JSBridge API 的原生访问接口都需在真机上测试完成，通过浙里办app扫码测试版进入即可，在扫码之前确保你已经引用了 //assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js 插件op.zjzwfw.gov.cn/mobile/docu…
8. 等你所有的接口都调试完成的时候，再开始做需要的埋点接入，目前我这个项目就之前必要的埋点接入，如果有需要可以自行加入代码到相应的位置，埋点使用请看 语雀文档的 1.1.6 ，需下载里面的文件查看相应代码。具体操作代码，可以在 index.html 页面加入基础埋点，如图： 等这个基础埋点加好，还有pv日志埋点和用户采集埋点，这里涉及到用户的地方需要根据单点登录配合，代码也需要加在对应的 .vue 文件中，具体代码看下面单点登录。
9. 等做了所有的流程和代码调试之后，前端开始准备发布代码。在应用管理 》部署发布 》测试环境上传代码，上传成功之后，联调没问题就可以直接上线，但是上线之前需要提供很多材料去审核的需要1-3个工作，可以先提交审核，审核的过程中发布代码。（这里打包的过程中，前端只需要把除了 node_modules 和 .git 之外的所有文件都压缩 zip 的格式上传即可，注意打包的文件名字改成 build 文档默认的，最好弄一样的。
10. 关于代码的二次更新问题，目前我现在的方式是在本地测试完成，在打包到测试环境测试，手机上没问题debug上也没问题就点 操作里面的直接上线 完成部署，这个操作是可以退回，例如你上面的代码出现页面错误或者bug就可点线上环境的操作 选择选择版本回滚 ，选择你指定的没有问题的版本确定即可，等改过代码重新上传再更新最新的地址。小更新可以这样操作，大的更新我现在也没试过（提醒，如果被巡检的发现现在的版本界面和之前的界面不一致的情况我也不知道会不会弄下架） 大致，上面的一套流程下来其实都差不多可以了，还差最重要的单点登录功能，拿出来说。

单点登录

首先浙里办是硬性要求用户数据都是要走他那边的登录的，所以才有这个独立开发的登录页面。针对这个要求，前端需要把需要登录操作的页面跳转直接改为浙里办提供的登录地址 puser.zjzwfw.gov.cn/sso/mobile.… （自行替换 xxxx）

主要分以下几点：

1. 在申请应用的时候会有一个 接入码 给你，这个需要用到，就是登录地址后面的 servicecode ，拿到这个接入码写在后面，再加上 goto 参数组成一个登录的跳转地址
2. 上面说到的对接群，会有一个专门做对接会跳地址的工作人员，在群里@一下，说改一个回掉地址并把接入码也发出来 ，这样他就会帮你把回掉地址配置好，一般的推荐正式的地址就可以了，也就是应用管理下面二维码的访问地址
3. 等跳转地址配置完之后，用户操作一个涉及到用户读取却没有登录的地方时，就跳转到上面说的登录地址，然后输入自己的账号密码点击登录，这时候登录成功后页面会自动的跳转到你在第二部设置的回掉地址上，也就是正式地址，接着跳回来的过程中会在 URL 路径上带有登录时返回给你的 ticket 和 sp ，前一个是要通过后端提供的接口去获取用户信息的（这里我只说前端的操作，后端怎么获取用户信息这个得让他们自行找文档），后一个是你在第二部设置的 goto 参数，拿到用户信息之后前端就可以保存用户信息，用浙里办提供的原生存储方法也可以，用浏览器的 localstorage 也行，拿到我们需要的 sp 之后就可以做路由的跳转了

注意：经常看人家会遇到二次回退的问题，原因是因为登录返回的页面是首页，然后首页通过 sp 做了跳转所以返回的时候就会出现两次。解决的办法也有，就是在打开登录页面的时候使用 window.location.replace() 方法，而不是使用 window.location.href

针对需要登录的页面，在跳转之前可以通过路由的 beforeEach 的方法进行过滤，简单代码实现：

import router from './router'
import { getUser } from 'common/js/user'
​
const routeList = ['/my']
​
router.beforeEach(async (to, from, next) => {
  const token = getUser().token || ''
  if (!token) {
    if (routeList.includes(to.path)) {
      const url = to.path + '?' + param(to.query)
      // 因为浙里办的登录和页面的跳转不是同步的过程，所以不好写在跳转链接下
      window.location.replace('https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=xxxx&goto=' + url)
    } else {
      next()
    }
  } else {
    next()
  }
})
​
// 处理参数
function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

在登录回来到首页的时候可以在 mounted 里面获取 URL 后面跟的参数，拿到 ticket 和 sp 之后再去向后端发起请求获取用户数据，在获取成功拿到用户数据之后的回掉里面再把之前需要加的埋点加上，这里必埋的是用户名和用户id，所以是要通过登录之后才可以的，然后再通过路由 this.$router.push() 方法去跳转下面的地址。

完成上面的一系列步骤，基本上算是搞完了，这其中经历的大小的坑我明细注意点我都讲到了，如果还有什么不知道欢迎下面留言。