uni-app使用自定义指令实现整个项目自适应 DPR 加载图片，要求兼容小程序、H5和App。另外给定的资源图里有@2x、@3x，有的图片没有@1x图，请给出兼容有效写法

好的，针对这个问题，可以使用自定义指令来实现自适应 DPR 加载图片的效果。具体实现步骤如下：

1. 在 `main.js` 中全局注册自定义指令：

import Vue from 'vue'

Vue.directive('auto-img', {
  bind(el, binding) {
    const { value } = binding
    if (!value) return
    const img = new Image()
    img.src = value
    img.onload = () => {
      const { platform, pixelRatio } = uni.getSystemInfoSync()
      const imgDpr = value.includes('@') ? parseInt(value.split('@')[1].split('x')[0]) : 1 // 图片DPR
      const dpr = platform === 'devtools' ? 2 : pixelRatio // 设备DPR
      const imgWidth = img.width / imgDpr * dpr // 图片实际宽度
      const imgHeight = img.height / imgDpr * dpr // 图片实际高度
      const src = value.includes('@') ? value.replace(`@${imgDpr}x`, `@${dpr}x`) : `${value}@${dpr}x`
      el.style.width = `${imgWidth}px`
      el.style.height = `${imgHeight}px`
      el.style.backgroundImage = `url(${src})`
      el.style.backgroundSize = '100% 100%'
    }
  }
})

在上面的代码中，我们定义了一个名为 `auto-img` 的自定义指令，并在其中实现了图片的自适应加载效果。我们使用了 `uni.getSystemInfoSync` 方法获取了设备的平台信息和像素比，再通过 `new Image()` 创建了一个图片对象，并在图片加载完成后，计算了图片的实际宽高和最终URL，并将其应用到了元素的 CSS 样式中，从而实现了自适应加载图片的效果。

2. 在组件中使用自定义指令：

<template>
  <div v-auto-img="'../../static/img/test@2x.png'"></div>
</template>

在上面的代码中，我们在元素上使用了 `v-auto-img` 指令，并将图片的URL作为指令的值传入。指令会在元素加载时自动触发，并根据设备的像素比和图片的像素比，计算出图片的实际宽高和最终URL，从而实现自适应加载图片的效果。

需要注意的是，对于没有@1x图的资源，我们可以默认将其DPR设置为1，这样就可以保证在所有设备上都能正确地加载图片。另外，由于在开发工具中，设备的像素比可能不是真实的像素比，所以我们需要对开发工具做特殊处理，将像素比设置为2。