钉钉微应用开发过程中遇到的坑

前言：最近在做钉钉H5微应用，开发中遇到了一些问题，然后各种查阅资料，发现网上关于钉钉开发的帖子还是比较少的，今天在这儿总结一下：

应用是用 vue3 + typescript + vite + vant 开发的

1. 关于设置导航栏颜色这个问题，直接看官方文档即可

2. 设置导航栏标题，这个可直接查看官方文档，我这里做了一下封装

3. 这里插一个关于vite打包的问题，前端打包的时候修改静态资源的引用路径这个问题

了解过vite打包的同学应该知道，一般默认打包的话，是这样子的

<link rel="modulepreload" href="/assets/vendor.0807fa37.js">
<link rel="stylesheet" href="/assets/vendor.b8354a09.css">
<link rel="stylesheet" href="/assets/index.fc5ff0f1.css">

但是有一个问题，如果是多个项目而且静态资源一个文件下做nginx代理的话，引用静态资源的时候就会有问题

直接说我是怎么做的吧

export default ({ mode, command }: ConfigEnv): UserConfigExport => {
  console.log('mode', mode, command)
  return defineConfig({
    base: command === 'build' ? loadEnv(mode, process.cwd()).VITE_APP_PUBLIC_PATH : '/',
  })
}

直接在vite.config.ts里面的base添加如下代码，因为我不想本地调试的时候也添加这个前缀，所以区分了变量 。VITE_APP_PUBLIC_PATH是个全局变量，就是你要设置的那个目录名字[^1]

设置完以后打包出来是这个样子的：

<link rel="modulepreload" href="/sydt-shop-tour-dingtalk/assets/vendor.c973134c.js">
<link rel="stylesheet" href="/sydt-shop-tour-dingtalk/assets/vendor.96d5ba1a.css">
<link rel="stylesheet" href="/sydt-shop-tour-dingtalk/assets/index.ae3fd388.css">

我上面的那个全局变量（VITE_APP_PUBLIC_PATH）的值就是sydt-shop-tour-dingtalk

4. 关于钉钉jsapi鉴权的问题

使用方法：直接在需要使用鉴权的地方调用接口，如果你想下鉴权成功以后做一些事情，可以穿入一个回调函数，在dd.config的onsuccess里面执行回调函数即可

onMounted(() => {
   dingConfig(window.location.href, callback)
})

问题：但是发现一个问题就是初始化进来，是可以jsapi相关的接口的，例如获取用户当前的地理位置，但是当用户强制刷新以后发现控制台会提示鉴权签名失败
原因：原因是前刷页面，获取鉴权传的地址和当前页面的地址不符合造成的。需要注意的是官方文档有说明，链接: 钉钉开放文档JSAPI鉴权
解决：思路就是页面刷新的时候重新设置鉴权，因为vue是单页面应用，所以在App.vue的生命周期里重新 调用上面的dingConfig即可解决

onMounted(() => {
   dingConfig(window.location.href, callback)
})

5. 关于vuex刷新，以后数据丢失问题，思路是刷新的时候先存到 sessionStorage里面，页面刷新完再拿出来赋值 ，但是发现移动端安卓和ios监听页面刷新方法有差异，直接上代码

// 在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem('store')) {
        // 存储状态
        store.replaceState(Object.assign({}, store.state, JSON.parse(sessionStorage.getItem('store') as string)))
      }
      if (isAndroid()) {
        // 在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener('beforeunload', () => {
          console.log('beforeunload', store.state)
          dingConfig(window.location.href, () => {})
          sessionStorage.setItem('store', JSON.stringify(store.state))
        })
      } else {
        window.addEventListener(
          'pagehide',
          () => {
            dingConfig(window.location.href, () => {})
            sessionStorage.setItem('store', JSON.stringify(store.state))
          },
          false
        )
      }

6. 关于监听钉钉返回键，然后给用户提示的问题

提问？？？？：调试很久，但是安卓会出现监听完 移除监听以后，不能继续返回的问题，最后也没能解决，如有做过的小伙伴，可以指导一下。。。。