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

发布时间：2022-10-15 15:23:28 所属栏目：应用来源：

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

　　流程按照官方文档先走一遍( 下面是有可能遇到的问题和解决方法。

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

　　1.在开发之前会申请应用得到一个接入码，在A

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

　　流程按照官方文档先走一遍( 下面是有可能遇到的问题和解决方法。

　　问题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中引入
　　    }
　　  }
　　  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存储的。在每一个页面直接按照下方的模板进行嵌套就可以了

（编辑：应用网_常德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

智慧城市技术如何防止	基于云的物联网软件对
智能建筑是网络攻击的	物联网如何完全改变数