近期在开发一个钉钉上的微应用,要同时在钉钉的手机客户端和PC客户端上可以,且用同一套UI布局,所以摸索了下钉钉微应用手机端和PC端代码混合使用的情况。
UI等是选用官方推荐的Salt-UI
根据不同的浏览器环境导入不同的库,手机端对应dd,pc端对应DingTalkPC。
index.html 中
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.setAttribute('src','https://g.alicdn.com/dingding/open-develop/1.0.0/dingtalk.js');
oScript.setAttribute('type','text/javascript');
oHead.appendChild(oScript);
window.mdmd = true;
}
else {
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.setAttribute('src','https://g.alicdn.com/dingding/dingtalk-pc-api/2.6.0/index.js');
oScript.setAttribute('type','text/javascript');
oHead.appendChild(oScript);
window.mdmd = false;
}
业务逻辑代码中
用 let udd = window.mdmd ? dd : DingTalkPC; 统一dd 和DingTalkPC来统一代码。这样调用钉钉的API就只要统一使用udd 即可;例:udd.device.notification.alert