开发者社区> 问答> 正文

钉钉H5微应用 应用加载完成后进入应用 会出现钉钉自带的加载图标, 怎么解决?

手机品牌为荣耀;
使用的技术为 vue3 vite vant-ui
问题情景为 页面A是keepalive缓存页面,页面B为非缓存页面,A跳转到B,B返回到A后,A页面就会出现钉钉自带的加载图标。

展开
收起
游客pug6jieukwugo 2023-07-20 09:10:41 244 0
2 条回答
写回答
取消 提交回答
  • 北京阿里云ACE会长

    钉钉 H5 微应用在应用加载完成后出现钉钉自带的加载图标可能是因为钉钉加载了 H5 应用的缓存。对于这个问题,你可以尝试以下解决方案:

    禁用缓存:在应用的入口文件中添加以下代码,禁用钉钉的缓存功能。
    awk
    Copy
    dd.config({
    agentId: '', // 请填写钉钉应用的 agentId
    corpId: '', // 请填写钉钉企业的 corpId
    timeStamp: '', // 请填写当前时间戳
    nonceStr: '', // 请填写随机字符串
    signature: '', // 请填写钉钉签名
    jsApiList: []
    });
    其中,dd.config() 方法用于配置钉钉的参数,其中 jsApiList 参数为空,表示不需要使用钉钉的 JS API。这样可以禁用钉钉的缓存功能,避免出现加载图标的问题。

    使用路由钩子:使用路由钩子,当页面切换时,手动清除缓存,以避免缓存导致的加载图标问题。例如,在 Vue.js 中,你可以在路由组件中使用以下钩子函数:
    stylus
    Copy
    beforeRouteLeave(to, from, next) {
    this.$nextTick(() => {
    this.$refs.scroll.scrollTo(0, 0);
    this.$store.commit('clearCache');
    next();
    });
    }
    其中,beforeRouteLeave 是 Vue.js 中的路由钩子函数,用于在路由跳转前清除缓存。在该函数中,我们先使用 $refs 属性获取对应的组件实例,然后清除缓存,最后调用 next() 函数继续路由跳转。
    以上是两种可能的解决方案,你可以根据实际情况选择其中一种尝试解决问题。

    2023-07-28 08:06:35
    赞同 展开评论 打赏
  • 如果在钉钉H5微应用加载完成后出现钉钉自带的加载图标,可以尝试以下解决方法:

    1. 优化应用代码和资源:确保您的应用代码和资源文件(如图片、样式表等)经过了合理的优化,以减少加载时间。使用压缩和合并工具来减小文件大小,使用CDN加速来提高资源加载速度。

    2. 使用异步加载技术:将应用的核心功能和必需的组件进行分离和异步加载。这样,页面初始化完成后,可以先渲染出基础内容,然后再异步加载其他需要的模块和组件,进一步提高页面加载速度。

    3. 页面骨架屏设计:在应用加载时,可以使用页面骨架屏(Skeleton Screen)技术,提供一个简单的页面结构或占位符,模拟应用主要内容的布局,并配合加载动画,让用户感知到应用正在加载中,从而减少加载等待时间的焦虑感。

    4. 合理使用钉钉提供的定制功能:钉钉H5微应用平台提供了一些定制功能,如启动画面(Splash Screen)和全局加载提示(Loading)等。您可以根据应用的需求,在这些定制功能上进行调整和优化。

    5. 联系钉钉开发团队:如果以上方法无法解决问题,建议联系钉钉开发团队,向其反馈应用加载图标的问题,并获取他们提供的定制或优化建议。

    2023-07-20 10:50:41
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
钉钉小程序——为工作方式插上翅膀 立即下载
钉钉客户端自动化的应用 立即下载
使命必达 —— 钉钉企业级 消息服务的机遇与挑战 立即下载