H5对接浙里办问题总结本项目主要采用vuejs开发的H5 流程按照官方文档先走一遍(https://odynww.yuq

本项目主要采用vuejs开发的H5

流程按照官方文档先走一遍(odynww.yuque.com/docs/share/… 下面是有可能遇到的问题和解决方法。

问题1：App.vue 页面拿ticekt获取登录人信息

1.在开发之前会申请应用得到一个接入码，在App.vue 首页去进行截取登录回调地址ticket

getTicket() {
      let url = window.location.href;
      if (url.indexOf("ticket") != -1) {
        const params = url.split("?")[1].split("&")[1].split("#");
        for (let index = 0; index < params.length; index++) {
          if (params[index].indexOf("ticket=") != -1) {
            this.ticket = params[index].split("=")[1];
            break;
          }
        }
      }
      if (this.ticket && this.ticket != "") {
        if (localStorage.getItem('ticket') != this.ticket) {
            //我应用中嵌入了地方的跳转，在第三方跳转完返回到我应用中时，会出现再次拿ticket去登录，所以进行ticket和本地存贮是否相同，不相同才进行用户信息获取
             this.getInfo() // 这个地方就是去拿ticket给后端，调用后端获取用户信息的接口
        }    
      } else {
        this.loginFail()
      }
    },

loginFail() {
      const sUserAgent = window.navigator.userAgent.toLowerCase();
      const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APP
      const bIsAlipayMini =
        sUserAgent.indexOf("miniprogram") > -1 &&
        sUserAgent.indexOf("alipay") > -1; // 浙里办支付宝小程序
      if (bIsDtDreamApp) {
        window.location.replace(
          "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=接入码"
        ); // 注意这里需要使用replace
      } else if (bIsAlipayMini) {
        window.location.replace(
          "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=接入码"
        );
      }
    },

2.二次回退的问题

(下方代码写在应用的第一个页面home.vue,在created里去调用back方法就可以了。注意在测试的过程中，支付宝小程序好像没有出现二次回退的问题) 这种方式满足两个条件（1.使用router.replace('/home'),2.在路由配置中配置path: '/',重定向到'/home'页面）

  back() {
      const sUserAgent = window.navigator.userAgent.toLowerCase();
      const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APP
      if (bIsDtDreamApp) {
        let that = this;
        window.addEventListener(
          "pageshow",
          function (event) {
            if (
              event.persisted ||
              (window.performance && window.performance.navigation.type == 2)
            ) {
              ZWJSBridge.onReady(() => {
                ZWJSBridge.close()
                  .then((result) => {
                    console.log("router", result);
                  })
                  .catch((error) => {
                    console.log(error, "----router error");
                  });
              });
            }
            that.isLoad();
          },
          false
        );
      }
    },

方式二： 1.创建一个空白页 2.在路由配置path: '/' 为这个空白页面 3.使用router.push('/home') 4.在路由导航中写入：

router.beforeEach((to, from, next) => {
  const sUserAgent = window.navigator.userAgent.toLowerCase();
  const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APP
  if (from.path === "/home" && to.path === '/') {
    if (bIsDtDreamApp) {
      ZWJSBridge.onReady(() => {
        ZWJSBridge.close()
          .then((result) => {
            console.log("router", result);
          })
          .catch((error) => {
            console.log(error, "----router error");
          });
      });
    } else {
      my.navigateBack() // 在index.html中引入 <script src="https://appx/web-view.min.js"></script>
    }
  }
  next();
});

3.埋点问题

在index.html中按照官方提供的文档进行即可。

4.应用中跳转第三方链接

比如应用中嵌入了其他应用的链接，我们必须使用 ZWJSBridge.openLink({url: 'www.baidu.com'}) 这种跳转方式。切记，如果使用别的方式，在返回的时候会出现直接退出浙里办的问题。

5.ZWJSBridge 使用问题

export const excuteBridge = () => {
    ZWJSBridge.onReady(() => { 
        console.log('初始化完成后，执行bridge方法');
    })
}
在每次需要使用ZWJSBridge时候，直接先调用excuteBridge()，例如：
 getStyle () {
      excuteBridge();
      ZWJSBridge.getUiStyle().then((res) => {
        console.log(res, "getUiStyle");
        if (res.uiStyle == "elder") {
          // 老年版本
          this.$store.commit("SET_ISOLD", 1);
        } else {
          // 常规版本
          this.$store.commit("SET_ISOLD", 0);
        }
 }

6.适老化版本改造问题

我的做法是在首页进入的时候获取浙里办的版本，如上getStyle()方法，把它存在store里，当然这里的store里也是直接用的localStorage存储的。在每一个页面直接按照下方的模板进行嵌套就可以了

<template>
  <div :class="isOld == 1 ? 'old-home' : 'home'">
      <div class="banner"></div>
  </div>
</template>
<style lang="scss" scoped>
.home {
    .banner{}
}
.old-home {
    .banner {} 
}
<style>

isOld就是首页获取的版本，直接存在store里的，其余的页面直接获取store里的值就可以了，这样编译在测试和线上均没有问题。而且这种做法，基本子节点的样式名一样，就修改修改里面的字体大小和图片宽高什么的，很方便。

7.关于使用mgop

前提条件必须是入参和出参都必须是JSONObject格式
自有服务的接口需要在应用开发平台中进行RPC注册
可以对mgop进行封装，类似axios 以下是我封装的代码块，大家可以按照自己的做法进行封装，这里只是给个示例参考：

    export function request(api,params = {}) {
    // api是在开发者平台中注册的rpc的api名称，一个接口一个
      store.dispatch("setLoading", true);
      return new Promise((resolve, rej) => {
        mgop({
          api,
          dataType: 'JSON',
          data: params, // 
          timeout: 30000,
          header: {},
          type: "POST",
          appKey: "这里自行替换成自己的appkey",
          host: "https://mapi.zjzwfw.gov.cn/", // 固定不变的
          onSuccess: (data) => {
            store.dispatch("setLoading", false);
            if (data.ret[0] === "1000::调用成功") {
              if (data.data.errors) {
                store.dispatch("setMsg", "请求出错");
              } else {
                resolve(data.data.data);
              }
            } else {
              store.dispatch("setMsg", "请求出错");
            }
          },
          onFail: (error) => {
            store.dispatch("setLoading", false);
            store.dispatch("setMsg", error || error.message);
          },
        });
      });
}

使用示例一：
    const data = await request('api自行替换',请求参数);
使用示例二：    
    request('api自行替换',请求参数).then(res => {})

8.关于打包上架问题

其实这个问题很简单，如果你是使用vue-cli脚手架创建的项目，那就直接修改一下package.json 中的build，改成下方一样就可以，别的配置啥的都不需要哈。