钉钉微应用
在做钉钉微应用开发的时候,遇到了一些相关性的问题,特此记录下,有遇到其他问题的,欢迎一起讨论
调试工具
当我们基于钉钉开发微应用时,难免会遇到调用钉钉api后的调试,这个时候可以安装eruda这个插件,github地址
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8rOCfUB-1691131895418)(image.png)]](https://img-blog.csdnimg.cn/dbf5a3809883462d89b0bc98c2774909.png)
一般情况根据环境去判断是否开启调试工具,像我这边的话是根据域名判断的。
 <script src="eruda.js"></script><script>if(window.location.href.indexOf('dingapps.cn')>-1){eruda.init()}</script>
监听webview返回事件
钉钉文档中其实有响应的返回事件监听,官方地址
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3PPptDhi-1691131895420)(image-2.png)]](https://img-blog.csdnimg.cn/16a0074d1fba451baa888f7f0c212dca.png)
 但是返回事件不支持ios,ios需要用到setLeft组件
 ![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N3B1JR8l-1691131895419)(image-3.png)]](https://img-blog.csdnimg.cn/6970fdb64a334cdf95039ac8c7fb3ea7.png)
 最终我这边根据提供的监听和组件方法整合了下:
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");
});自定义右上角事件
官方地址
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j9N1RiLU-1691131895420)(image-4.png)]](https://img-blog.csdnimg.cn/6341b9fda3fc46c190f022aabe17c9a5.png)
  dd.biz.navigation.setRight({show: true, //控制按钮显示, true 显示, false 隐藏, 默认truecontrol: true, //是否控制点击事件,true 控制,false 不控制, 默认falsetext: "规则说明", //控制显示文本,空字符串表示显示默认文本onSuccess: function (result) {// do something},});css3动画无法放在scoped里(VUE)
最简单的方式就是将keyframes放到外部css文件中,scoped实现引入
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-di0s08Rz-1691131895420)(image-5.png)]](https://img-blog.csdnimg.cn/932ad1cb24d649a4a30b0e53001e7449.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nrdSP0lN-1691131895421)(image-7.png)]](https://img-blog.csdnimg.cn/6952300d40184998af6b13e4f7e9dc6a.png)