浙里办H5应用开发中的注意事项

浙里办H5应用开发

一、准备工作

1.从业主部门（需要开发应用的政府单位）申请浙政钉账号，最好是用自己的手机号去申请，因为浙政钉登录需要验证，如果用别人提供的账号，每次登录都很麻烦。

2.加入浙里办技术群（群号：34143965，这个用普通钉钉去加），里面公告里有各种文档，有不懂的也可以在群里直接提问。
浙里办对接机器人：@浙里办对接机器人
浙里办技术支持：罗豪
IRS技术支持：丁立
IRS应用发布子系统技术支持：孙雪红
个人单点登录对接人：项晨
法人单点登录对接人：阿良-章晋瑞
具体以群公告为准。

3.IRS系统使用
服务开发商-工作台：https://op-irs.zj.gov.cn/mobile/dev/app/management/serverList，这是开发人员使用的工作台。
业主单位-工作台：http://irs.zj.gov.cn/workbench/myresource/applicationsystem（需要在政务网下访问），这是业主单位使用的工作台，两个工作台用同一个浙政钉账号登录。所以一般情况，都是开发人员去操作，这样效率也高。

4.根据技术群文档（浙里办移动端服务接入技术规范【IRS版】-20220209.pdf）创建应用，这个就不多说了。文档里很详细。

二、代码开发

1.政务中台Debug工具

因为开发接口需要钉钉环境下运行，所以本地调试需要用到政务中台Debug工具，这个在技术群里找到文件下载就行。
需要注意的是：
1.不在政务网下，需要手机下载浙里办APP进行绑定；在调试过程中，浙里办APP需要打开，且手机不能息屏
2.浙里办APP用户登录失效会对政务中台调试产生影响，所以保证浙里办APP是已登录状态。

2.RPC 接入

浙里办H5应用中，所有的接口不能直接从后端调用，需要经过IRS中的RPC转发。所以需要在服务开发商-工作台-RPC接入模块中进行配置，就是将需要调用的接口的地址，类型，传入参数等进行设置。
这里需要下载@aligov/jssdk-mgop，在需要调用接口的文件中引入import { mgop } from ‘@aligov/jssdk-mgop’，

      mgop({
          api: "mgop.szwc.center.upload", // API名称，RPC配置接口时设置的名称
          host: "https://mapi.zjzwfw.gov.cn/", //固定的，直接复制
          dataType: "JSON",
          data: _data, //传入的参数
          type: "POST",
          appKey: this._GLOBAL.APPKEY, // 当前H5应用的APPKEY，在服务开发商-工作台可以找到
          onSuccess: (res) => {
            if (res.data.success) {
              Toast.success("上传成功");
              param.status = "done";
              this.flies += res.data.data.path + this._GLOBAL.SPLITMARK;
              console.log(this.flies);
              this.lastModified.push(_lastModified);
            }
          },
          onFail: (err) => {
            Toast.fail("上传失败");
            param.status = "failed";
            param.message = "上传失败";
          },
        });

（上传文件功能比较特殊，由于PRC接入中对于参数类型并没有文件类型选择，可以把文件类型转化为base64格式再上传）

3.适老化

index.html引入

下面代码可以获取当前容器环境是否为老年版，在系统初始化中调用（可以使用flexible.js插件来设置两中风格的样式,老年版就是字大点）（在浙里办APP中选择长辈版/常规版来进行调试）

  //针对适老版做处理
  ZWJSBridge.getUiStyle().then((res) => {
    let item = res.uiStyle === 'elder' ? '老年' : '正常'
  });

4.单点登录

1.首先需要在技术群里找对应的对接人进行回调地址的配置（提供接入码和回调地址，接入码就是accesskey，可以在业主单位-工作台上找到），在开发阶段，可以提供本地项目启动后的地址（配置回调地址随时可以更改，跟对接人说就行了）。
2.对接人说配置回调地址成功后，就可以进行票据的获取了，系统初始化的时候调用该方法，第一次进入会要求你登录。（代码里区分了当前是浙里办容器还是支付宝容器）。
3.获取票据后，让后端开发人员去技术群找获取用户信息的接口文档，把票据作为参数传给后端，获取用户信息。

   //获取票据
    this.ticket = this.getQuery("ticket");
    console.log(this.ticket);
    const sUserAgent = window.navigator.userAgent.toLowerCase();
    const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APP
    const bIsAlipayMini =
      sUserAgent.indexOf("miniprogram") > -1 &&
      sUserAgent.indexOf("alipay") > -1;
    if (!this.ticket) {
      if (bIsAlipayMini) {
        window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&scope=1&servicecode=${this._GLOBAL.AccessKey}&go=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001988669/v.1.2.1/index.html?debug=true`;
      } else {
        window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=${this._GLOBAL.AccessKey}&go=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001988669/v.1.2.1/index.html?debug=true`;
      }
    } 

5.用户信息脱敏

用户信息脱敏需要在后端进行处理。具体的脱敏规则，技术群有文档，参考即可。

6.项目包上传IRS

项目需要支持 npm run build，现在都用vue/react等框架，这方面没有问题。系统需要部署在IRS工作台上，对于上次的文件夹需要注意几点：
1.编译后的文件夹名称为build（webpack打包配置默认是dist，需要改下）
2.项目包中.git ， .gitee ， node_modules这些文件需要删除，否则上传后编译会失败。
3.上传成功后，用户就可以通过二维码进入系统。

4.该阶段还属于测试阶段。如果该版本稳定后，可以将回调地址改成线上的测试地址（标红框处）

7.埋点

这个网上有很多案例，就不说了！