vue.js腾讯微信电子健康卡前端统一封装

最新推荐文章于 2024-10-17 09:59:53 发布

原创

最新推荐文章于 2024-10-17 09:59:53 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了在Vue.js项目中，如何对腾讯微信电子健康卡进行前端统一封装，解决前后端分离项目中出现的多次跳转和真机后退键的bug。通过getWechatCode.vue和getHealthCode.vue组件，详细阐述了封装公共函数的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人之前做的电子健康卡是前后不分离那种 php项目，然后现在vue版本的医疗项目，也要加入电子健康卡，所以就有了下面的封装判断是否有电子健康卡、跳转全套

前后不分离的项目，跳转健康卡是一切正常的，随便跳，而且点击真机后退键的时候也是正常的

因为跳转是通过php服务端直接跳转，所以不会经过前端

遇到的坑：

前后分离的项目，加入电子健康卡会产生多次跳转bug、以及真机后退有bug问题，也已经解决。

下面进入主题：

getWechatCode.vue 文件

<template>
  <div class="getWechatCode">
    <!-- 正在授权获取电子健康卡请稍后... -->
  </div>
</template>

<script>


export default {
  name: 'getWechatCode',
  data () {
    return {
      query: this.$route.query, //获取wechatCode
      fromPath: sessionStorage.getItem('fromPath') ?? '/my-info', //根据路由拦截

    }
  },

  created () {
    this.$toast.loading({
      overlay: true,
      duration: 0,
      message: '请稍候