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

首先，在uni-app中定义一个自定义指令，用来自适应DPR加载图片。可以在`main.js`中添加以下代码：

Vue.directive('adapt-dpr', {
  bind: function (el, binding) {
    const dpr = uni.getSystemInfoSync().pixelRatio
    const imgSrc = binding.value
    if (imgSrc.indexOf('@') !== -1) {
      const imgType = imgSrc.split('.').pop()
      const imgName = imgSrc.slice(0, imgSrc.indexOf('@'))
      const imgSuffix = imgSrc.slice(imgSrc.indexOf('@') + 1, -1)
      let imgRealSrc = imgName + '.' + imgType
      if (imgSuffix === '2x' && dpr >= 2) {
        imgRealSrc = imgName + '@2x.' + imgType
      } else if (imgSuffix === '3x' && dpr >= 3) {
        imgRealSrc = imgName + '@3x.' + imgType
      } else if (imgSuffix === '2x' && dpr < 2) {
        imgRealSrc = imgName + '.' + imgType
      } else if (imgSuffix === '3x' && dpr < 3) {
        imgRealSrc = imgName + '@2x.' + imgType
      }
      el.setAttribute('src', imgRealSrc)
    } else {
      el.setAttribute('src', imgSrc)
    }
  }
})

然后，在需要使用自适应DPR加载图片的地方，使用`v-adapt-dpr`指令即可，例如：

<template>
  <div>
    <img v-adapt-dpr="'/static/img/icon@2x.png'" />
    <img v-adapt-dpr="'/static/img/icon@3x.png'" />
    <img v-adapt-dpr="'/static/img/icon.png'" />
  </div>
</template>

注意：需要在图片路径前面加上单引号，因为指令绑定值需要是一个字符串。

对于一些没有@1x图的图片，可以参考以下写法：

<template>
  <div>
    <img v-adapt-dpr="'/static/img/icon.png'" />
    <img v-adapt-dpr="'/static/img/icon@2x.png'" />
    <img v-adapt-dpr="'/static/img/icon@3x.png'" />
  </div>
</template>

这样，在dpr为1时会加载默认的图片，dpr为2时会加载@2x图片，dpr为3时会加载@3x图片。

这个方法不仅适用于H5和App，也适用于小程序。