如何修改钉钉导航栏的返回按钮

之前做一个钉钉项目的时候,需要将钉钉的返回功能修改一下不是按照历史后退一步,而是有层次的后腿返回;

通常我们的返回按钮的代码是如下这样:

function goback(){
		if(history.length>1){    //有历史就返回
			history.go(-1); 
		}else if(document.referrer){
			window.location.assign(document.referrer);
		}
	}

但是根据客户需求我们要对钉钉的返回稍作修改

第一步是引入钉钉相关的js文件,并调用相关函数

<script type="text/javascript"
	src="https://g.alicdn.com/dingding/open-develop/0.9.2/dingtalk.js"></script>
<script type="text/javascript">
	var tt = '${catindex}';
	var _config = ${dd_config};
	window.localStorage.setItem("_config", _config);
	window.localStorage.setItem("newurl", window.location.href);
	window.localStorage.setItem("newurl2", window.location.href);
</script>

再者更加需求修改代码,在开发的时候因为对钉钉的相关函数的调用不是很清楚所以导致来回重复了好多问题,后来问了钉钉小二,给出了一个解决方案。

 

dd.config({
  agentId : _config.agentId,
  corpId : _config.corpId,
  timeStamp : _config.timeStamp,
  nonceStr : _config.nonceStr,
  signature : _config.signature,
  jsApiList : [ 'runtime.info', 'biz.contact.choose',
  'device.notification.confirm', 'device.notification.alert',
  'device.notification.prompt', 'biz.ding.post',
  'biz.util.openLink', 'biz.navigation.setLeft',
  'biz.navigation.close' ]
});
//关闭
function close() {
  dd.biz.navigation.close({
    onSuccess : function(result) {
    },
    onFail : function(err) {
    }
  });
}
dd.ready(function() {
		document.addEventListener('backbutton', function() {
		close();
		})
	});

但这个方法只能适配安卓的手机,不能适配IOS。所以成功了一半,后来再仔细的把钉钉的开发文档研究了一下。

dd.ready(function() {
				dd.biz.navigation.setLeft({
					show : true,//控制按钮显示, true 显示, false 隐藏, 默认true
					control : true,//是否控制点击事件,true 控制,false 不控制, 默认false
					showIcon : true,//是否显示icon,true 显示, false 不显示,默认true; 注:具体UI以客户端为准
					text : '返回',//控制显示文本,空字符串表示显示默认文本
					onSuccess : function(result) {
						close();
					},
					onFail : function(err) {
					}
				});
			});

这样调用在IOS上面的钉钉中实现我们想要的效果。

所以结合两者,我做了一个判断,根据不同的机型,调用不同的代码,问题成功解决。

可能是由于钉钉自身也处于开发状态,所以很多前端的适配问题有很多,同样是chrome内核,在chrome浏览器上面可以但是在钉钉的环境下不行。头疼!

 

posted @ 2017-02-04 16:24  Alyson.fu  阅读(8128)  评论(0编辑  收藏  举报