本文主要是介绍钉钉嵌套H5+app，钉钉导航栏显示/隐藏 页面头部标题(title)的修改，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
亲测可用，若有疑问请私信
钉钉导航栏标题是用钉钉内封装好的方法，提供的API里有修改title的方法，所以引入dingtalk-jsapi去修改。
参考路径：https://open-doc.dingtalk.com/microapp/dev/welcome-to-lark
方法：需要修改标题的页面中使用钉钉的方法就可以了
步骤：1.使用npm或cnpm安装
npm install dingtalk-jsapi --save
cnpm install dingtalk-jsapi --save
2.在main.js中引入
import * as dd from 'dingtalk-jsapi';
Vue.prototype.$dd = dd;
3.在需要修改导航栏标题的文件中去使用
if (this.$dd.env.platform!=="notInDingTalk") {
//进行钉钉登录操作
this.$dd.ready(() => {
this.$ding.biz.navigation.setTitle({
title: "导航栏标题名",
})
})
}
在微信上H5页面头部标题(title)的修改
因为微信在首次加载页面初始化title后，就再也不监听 document.title的change事件。
给页面加上一个内容为空的iframe，随后立即删除这个iframe，这时候会刷新title。
export const ChangePageTitle = (title) => {
var $body = $('body');
document.title = title;
var $iframe = $('<iframe style="display: none"></iframe>');
$iframe.on('load', function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);
}
}
兼容微信、钉钉和浏览器修改title的方法
1.判断当前页面是在钉钉、微信还是浏览器中打开
export const userAgentObj = () => {
const ua = navigator.userAgent.toLowerCase()
let isWeiXin = false,
isDingTalk = false,
isApp = false,
obj = {}
if(ua.match(/DingTalk/i)=="dingtalk"){//用钉钉打开
isDingTalk = true
}else if(ua.match(/MicroMessenger/i)=="micromessenger"){//用微信打开
isWeiXin = true
}else{//用其他浏览器打开
isApp = true
}
obj.isWeiXin = isWeiXin
obj.isDingTalk = isDingTalk
obj.isApp = isApp
localStorage.setItem("userAgentObj",JSON.stringify(obj))
return obj
}
2 .修改头部标题的函数（兼容微信、钉钉和浏览器）
export const ChangePageTitle = (title) => {
let userAgentObj = JSON.parse(localStorage.getItem('userAgentObj'))||null
if(userAgentObj&&userAgentObj.isDingTalk){//钉钉内
window.$dd.ready(function() {
window.$dd.biz.navigation.setTitle({
title : title,//控制标题文本，空字符串表示显示默认文本
onSuccess : function(result) {
},
onFail : function(err) {}
});
});
}else{//微信或浏览器内
var $body = $('body');
document.title = title;//普通浏览器用这一句就可以修改了
var $iframe = $('<iframe style="display: none"></iframe>');
$iframe.on('load', function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);
}
}
这篇关于钉钉嵌套H5+app，钉钉导航栏显示/隐藏 页面头部标题(title)的修改的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
