浙里办H5入驻（单点登录、RPC接入、埋点、适老化、JSBridge）

_太阳_
2,952 阅读3分钟

1、源码包上传问题

由于浙里办的微应用是必须前后端分离，且前端文件需要部署到浙里办服务器上的，所以需要前端项目支持 rpm run build 命令，由于浙里办编译默认输出位置是build，但是rpm run build打包后默认输出位置是dist

1、手动修改dist名字改成build

2、vue里修改webpack配置文件

以下是上传格式 node_modules、dist包无需上传

WeChatd5c4620b064e8dc55cc14b25d9197eae.png

2、单点登录功能

由于浙里办微应用需要对支付宝浙里办小程序与浙里办APP进行双端适配，而不同环境下的单点登录跳转链接也不同，所以需要进行应用环境的检测，单点登录成功后需要找钉钉人员配置回调地址

// 设备类型判断
const sUserAgent = window.navigator.userAgent.toLowerCase();
// 支付宝或支付宝小程序
const bIsAlipayMini = sUserAgent.indexOf("miniprogram") > -1 && sUserAgent.indexOf("alipay") > -1;

// 二次回退代码
if (bIsAlipayMini) {
     var that = this;
     window.addEventListener(
        "pageshow",
        function (event) {
          if (
            event.persisted ||
            (window.performance &&
              (window.performance.navigation.type == 1 ||
                window.performance.navigation.type == 0))
          ) {
            that.isLoad();
          } else if (
            event.persisted ||
            (window.performance && window.performance.navigation.type == 2)
          ) {
            my.navigateBack();
          } else {
            my.navigateBack(); //支付宝小程序的api，需在index.html引入，通过此api直接跳回浙里办小程序页面
          }
        },
        false
      );
    } else {
      // 浙里办
      function watchApp() {
        window.addEventListener(
          "pageshow",
          function (event) {
            if (
              event.persisted ||
              (window.performance && window.performance.navigation.type == 2)
            ) {
              ZWJSBridge.close(); //这个是浙里办内部的api，调用close()接口关闭通过openLink打开的页面
            }
          },
          false
        );
      }
      watchApp();
    }

// 获取回调地址中的ticket或者sp
getQuery(){
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]);
 return null;
}

// 判断是否有票据 servicecode接入码需要问钉钉人员索要
var ticket = getQuery("ticket");
if (!ticket) {
      if (bIsAlipayMini) {
        //  支付宝
        window.location.href =
          "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=" +
          servicecode;
      } else {
        // 浙里办
        window.location.href =
          "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=" +
          servicecode;
      }
    } else {
      // 单点登录成功后执行的;
      this.$nextTick(() => {
       // 获取用户信息
        this.getTicket(ticket);
      });
    }

3、浙里办RPC网关接入

登录政务中台 、 IRS应用发布

  1. 新增接口
  2. 调试接口
  3. 上线接口

如出现跨域情况可在中台配置白名单

WeChat3e81883ffd0f6081253485da51de64bb.png

WeChat51b4f02f67e59b110130ea9c16abe2f8.png

必须要上线才可以使用

WeChat1a8e962908a3c17e68050e0cfa6b9351.png

npm安装

npm i --save @aligov/ jssdk-mgop

// 在页面中引入
import { mgop } from '@aligov/jssdk-mgop';
// 和axios一样使用
mgop({
  api: 'mgop.h5.http.getnews', 
  host: 'https://mapi.zjzwfw.gov.cn/',
  dataType: 'JSON',
  type: 'GET',
  appKey: '6xxfslcv+200600801+tlkciqg', // 必填
  data: {
     status: status,
  },
  onSuccess: data => {
      console.log('data', data)
  },
  onFail: err => {
      console.log(err, 'err')
  }
});

4、埋点

埋点代码可以在首页引入，不需要每个页面都引入！可以写个全局函数方便调用

// 基础埋点在public/index.html中引入
<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://d.alicdn.com/alilog/mlog/aplus.js?id=202951085'; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'aplus_queue');
    // 如果是私有云部署还需要在上面那段 JS 后面紧接着添加日志域名埋点
    // 通常私有云日志服务端域名类似于:quickaplus-web-api.xxx.com.cn ，具体 域名需找交付同学要
    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']
    });
    // 这个会落到 app_key 字段上
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['appId', '60506758']
    });
</script>

    // PV日志参数
    aplus_queue.push({
        'action': 'aplus.sendPV',
        'arguments': [{
            is_auto: false
        }, { 
            miniAppId: '', // appid(应用开发管理平台获取)
            miniAppName: '',// 注册应用的名字(应用开发管理平台获取)
            userType: sessionStorage.getItem("userType"),// 通过ZWJSBridge 获得
            long: sessionStorage.getItem("longitude"),// 通过ZWJSBridge 获得
            lati: sessionStorage.getItem("latitude")// 通过ZWJSBridge 获得
        }]
    })

    //用户信息采集
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_user_nick', "xxx"] // 通过业务接口获得
    })
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_user_id', sessionStorage.getItem("guid")] // 通过业务接口获得
    })
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_hold', 'START']
    })

埋点查询是否成功

F12打开控制台选择NetWork，这里注意！要选择All，不然无法看到！后缀是v.gif可查看埋点数据！也可以通过联系钉钉人员提供应用信息进行查询

WeChatb49bdcac2d9d1bdf6459a0b651d5db17.png

5、JSBridge的引入及使用

在浙里办的微应用中，很多地方需要使用到浙里办的一些封装API功能，也就是JSBridge，且所有JSBridgeAPI均支持Promise回调，这里主要讲解下常用的几个API以及引入。

像保存图片、导航名称、拨打电话等等都可以调用JSBridge

// 在public/index.html中引入
<script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script>

// 在public/index.html中引入
<script>
ZWJSBridge.onReady(() => {
      // 获取用户类型
      ZWJSBridge.getUserType().then((result) => {
        sessionStorage.setItem("userType", result.userType)
      }).catch((error) => {
      });
      // 获取经纬度
      ZWJSBridge.getLocation().then((result) => {
        sessionStorage.setItem("longitude", result.longitude)
        sessionStorage.setItem("latitude", result.latitude)
      });
      // 获取系统版本
      ZWJSBridge.getUiStyle({})
        .then((result) => {
          switch (result.uiStyle) {
            case 'normal':
              sessionStorage.setItem("myUiType", "normal")
              break;
            case 'elder':
              sessionStorage.setItem("myUiType", "old")
              break;
            default:
              sessionStorage.setItem("myUiType", "normal")
          }
        })
        //浙里办APP 6.11.0 版本以下版本标准模式兼容
        .catch((error) => {
          sessionStorage.setItem("myUiType", "normal")
        });
    })
</script>

6、界面适老化

用于老年人使用，在上一步讲到了ZWJSBridge可以获取系统版本 elder 就代表是老年版的可以配合 Vuex 来实现，主要就是样式的切换，可以使用 CSS:root选择器 来实现样式切换

// 在App.vue中绑定Class 
<template>
  <div :class="$store.state.myUiType">
    <div id="app" v-cloak>
      <router-view> </router-view>
    </div>
  </div>
</template>

7、其他问题

  1. 在IRS应用发布平台中代码编译与检查结果会出现有 外链检测异常情况 排查了很久用了 Vant 组件库的原因，但只能能提交 上线 就不会有影响，若不能提交上线就要调整代码中不允许使用 window.location.href WeChat87952f98404cf5ec3c966316e6e7a043.png

WeChat9fe56eb5a3c07ee3e2514aa47f05943c.png

  1. 在单点登录中二次回退会多次刷新页面问题，可以写个加载动画判断显示隐藏提升用户体验度
avatar
文章
阅读
粉丝