在做内嵌钉钉的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()
})