【钉钉】内嵌H5微应用之头部右侧导航设置

做过内嵌钉钉的H5微应用时,发现钉钉的导航栏很霸道,当你设置一个页面的导航栏右侧按钮时,当你切换别的页面也会附带上个页面的设置按钮

只设置一个页面头部右侧导航栏导致的结果,如下图:
刚进入页面
切换到日志页面
再返回到首页

这导致你需要每个页面设置下右侧导航栏的按钮,但有写页面你需要它原本的更多分享按钮和功能,翻钉钉文档,没有默认设置,只有一个设置的方法,查看钉钉开发文档

导航栏设置

错误尝试

一开始我以为只要把按钮显示出来就可以了吧,但发现点了没反应,下面是错误代码:

// 设置钉钉导航栏右侧单个按钮默认更多按钮
      window.dd.biz.navigation.setRight({
        show: true, // 控制按钮显示, true 显示, false 隐藏, 默认true
        control: true, // 是否控制点击事件,true 控制,false 不控制, 默认false
        text: ``, // 控制显示文本,空字符串表示显示默认文本
        onSuccess: result => {
         
        },
        onFail: err => console.log(err)
      })

解决方法

再细看一眼代码,点不动是应该的,没有写点击成功的调用事件,想了想应该在点击成功的调用分享,然后就去翻钉钉的分享事件,便试下加分享的事件可不可以,结局很美好,解决了这个坑,下面是正确代码

// 设置钉钉导航栏右侧单个按钮 默认更多按钮
      window.dd.biz.navigation.setRight({
        show: true, // 控制按钮显示, true 显示, false 隐藏, 默认true
        control: true, // 是否控制点击事件,true 控制,false 不控制, 默认false
        text: ``, // 控制显示文本,空字符串表示显示默认文本
        onSuccess: result => {
          // 钉钉分享事件
          window.dd.biz.util.share({
            type: 0, // 分享类型,0:全部组件 默认; 1:只能分享到钉钉;2:不能分享,只有刷新按钮
            url: window.location.href,
            content: '积分',  //分享描述
            title: '积分',//分享标题
            image: '1.png',//分享缩略图
            onSuccess: function () {
              // onSuccess将在分享完成之后回调
              /**/
            },
            onFail: err => console.log(err)
          })
        // 如果control为true,则onSuccess将在发生按钮点击事件被回调
        },
        onFail: err => console.log(err)
      })

友情小提示

钉钉切换页面时,如果你每个页面的标题不一样,是需要使用钉钉的方法设置下标题,如下图

// 守卫路由  start
router.beforeEach(function (to, from, next) {
  if (to.meta.title) { document.title = to.meta.title } // 在路由里面写入的meta里面的title字段
  // 设置钉钉导航栏标题 start
  window.dd.biz.navigation.setTitle({
    title: document.title, // 控制标题文本,空字符串表示显示默认文本
    onSuccess: result => {},
    onFail: err => console.error('设置导航栏标题错误', err)
  })
  next()
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,922评论 1 11
  • 每天六点,早起晨读如约而至。 《决断力》[美]奇普·希思 丹·希思 如何抓住眼前的机会提升决断力? 如何理智的做更...
    嘻哈成长记阅读 1,391评论 0 5
  • 待轻尘回到联络处已过子时,万籁俱寂,缓缓踱回房内时合欢已在床上睡着,伤口被仔细包扎过,孩子头一次受这样重的伤,隐隐...
    是静颜呀阅读 1,774评论 0 0
  • 初中一个成绩非常好的同学,在为另一个同学打抱不平时与英语老师产生了冲突,然后就发现这个英语老师始终都有针对自己的嫌...
    余深圳阅读 3,978评论 0 2
  • 李云独自一人坐在阳台飘窗上,看着手机屏幕里,微信群同事们都在抢红包,恭喜这次评优评先的获选者。好一会儿,李云也默默...
    雷达故事阅读 1,328评论 0 1

友情链接更多精彩内容