钉钉微应用

钉钉微应用

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

调试工具

当我们基于钉钉开发微应用时，难免会遇到调用钉钉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 隐藏， 默认true
    control: true, //是否控制点击事件，true 控制，false 不控制， 默认false
    text: "规则说明", //控制显示文本，空字符串表示显示默认文本
    onSuccess: function (result) {
      // do something
    },
  });

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

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