【钉钉】内嵌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()
})