钉钉内部开发问题回顾

url跳转问题

钉钉内部开发，当用户跳转到外部连接时使用

   dd.biz.util.openLink({
        url: url, // 要打开链接的地址
        onSuccess: function (result) {
        },
        onFail: function (err) {
          console.log(err)
        }
      })

但是存在一个问题，跳转到连接后有部分手机（小米，华为部分手机存在连接跳转后无法返回的问题）

钉钉内置应用点击时无反应

在做项目的过程中会出现部分手机页面卡死不动的情况（页面数据少），有可能是因为之前用统一账号测试，导致钉钉内部有缓存造成的无法点击，解决办法是设置-》通用-》一键清理，清理钉钉自身产生的缓存

钉钉返回按钮设置

项目是基于vue2.0所以点击返回按钮时会返回上一个路由，又列表页，进入到详情页，修改进入到编辑页保存后回到详情页，点击详情页的返回按钮，应该退到列表页而非编辑页，开始采用的是replace去抹除调路由的痕迹，此时会出现点击详情页返回按钮无法退出，会出现点击两次才能推出的情况，网上查询资料，说需要加上this.router.go(-1)

this.$router.replace({ path: '/work/bussinessDetail', query: { dataId, moduleNo, menuId, dataName } })
this.router.go(-1)

具体解释参考网址：https://blog.csdn.net/qq_15385627/article/details/83146766

该种方法存在的问题是，在苹果手机上测试没有问题但是在安卓手机上会出现点击回退按钮刷新页面的情况，至今为解决，有知道的小伙伴欢迎浏览或私信。

最终的解决办法采用路由守卫在列表页以及详情页，控制路由的移入移除

在列表页设置

 beforeRouteEnter (toRoute, fromRoute, next) {
    dd.backEventCustomerList = true
    next()
  },
  beforeRouteLeave (toRoute, fromRoute, next) {
    if (toRoute.name === 'homeWork') {
      this.$store.dispatch('common/clearCacheViews', 'customerList')
      next()
    } else if (toRoute.name === 'bussinessDetail' || toRoute.name === 'editBussiness') {
      if (dd.backEventCustomerList) {
        dd.backEventCustomerList = false
        next({
          path: '/work'
        })
      } else {
        dd.backEventCustomerList = true
        next()
      }
    } else {
      next()
    }
  }

在详情页

beforeRouteEnter (toRoute, fromRoute, next) {
    dd.backEvent = true
    if (fromRoute.name === 'customerList') {
      dd.backLocation = fromRoute.fullPath
    }
    next()
  },
  beforeRouteLeave (toRoute, fromRoute, next) {
    if (toRoute.name === 'customerList') {
      this.$store.dispatch('common/setCount')
      next()
    } else if (toRoute.name === 'editBussiness') {
      if (dd.backEvent) {
        dd.backEvent = false
        next({
          path: dd.backLocation
        })
      } else {
        dd.backEvent = true
        next()
      }
    } else {
      next()
    }
  }

配合store使用即可完成，另外还有对列表页进行缓存的操作，就需要使用keepAlive来确定缓存页面

在app.vue

 <keep-alive :include="cachedViews">
      <router-view :key="key" />
 </keep-alive>
 //cachedViews表示需要进行缓存的页面的集合

在computed属性中

 computed: {
    cachedViews () {
      const cacheList = this.$store.getters.cacheViewList
      if (this.$route.meta.keepAlive) {
        this.$store.dispatch('common/addCacheViews', this.$route.name)
      }
      return cacheList && cacheList.map(name => {
        return name
      })
    },
    key () {
      return this.$route.fullPath
    }
  }

另外钉钉内部开发需要许多注意的地方，比如1.底边栏的显示与隐藏，2.设置页面缓存时钉钉头部添加的按钮并不会被缓存下来，所以需要我们单独设置

watch：{
 showAddbtn () {
      this.onInsert()
    },
    
}
computed: {
    showAddbtn () { // 显示添加按钮
      return this.$store.getters.count
    }
  },
}

未完待续。。。。