钉钉微应用

钉钉微应用

在做钉钉微应用开发的时候，遇到了一些相关性的问题，特此记录下，有遇到其他问题的，欢迎一起讨论

调试工具

当我们基于钉钉开发微应用时，难免会遇到调用钉钉api后的调试，这个时候可以安装eruda这个插件，github地址

一般情况根据环境去判断是否开启调试工具，像我这边的话是根据域名判断的。

 <script src="eruda.js"></script><script>if(window.location.href.indexOf('dingapps.cn')>-1){eruda.init()}</script>

监听webview返回事件

钉钉文档中其实有响应的返回事件监听，官方地址

但是返回事件不支持ios,ios需要用到setLeft组件

最终我这边根据提供的监听和组件方法整合了下：

onMounted(() => {const u = navigator.userAgent;const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if (isiOS) {dd.biz.navigation.setLeft({control: true,onSuccess: function () {if (Route.path === "/") {dd.biz.navigation.close(); //关闭应用} else {window.history.back();}},});} else {document.addEventListener("backbutton", function () {if (Route.path === "/") dd.biz.navigation.close(); //关闭应用});}
});
onUnmounted(() => {document.removeEventListener("backbutton");
});

自定义右上角事件

官方地址

  dd.biz.navigation.setRight({show: true, //控制按钮显示， true 显示， false 隐藏， 默认truecontrol: true, //是否控制点击事件，true 控制，false 不控制， 默认falsetext: "规则说明", //控制显示文本，空字符串表示显示默认文本onSuccess: function (result) {// do something},});

css3动画无法放在scoped里（VUE）

最简单的方式就是将keyframes放到外部css文件中，scoped实现引入