uni-app自定义指令实现自适应 DPR 加载图片，要求兼容小程序、H5和App

在uni-app中，可以通过自定义指令来实现自适应DPR加载图片，并且可以兼容小程序、H5和App。具体步骤如下：

1. 在项目的`main.js`中注册自定义指令：

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 注册自定义指令
Vue.directive('adapt-img', {
  bind: function (el, binding) {
    let dpr = uni.getSystemInfoSync().pixelRatio;
    let value = binding.value;
    if (value) {
      if (dpr >= 3 && value.indexOf('@3x') !== -1) {
        el.setAttribute('src', value.replace('@3x', ''));
      } else if (dpr >= 2 && value.indexOf('@2x') !== -1) {
        el.setAttribute('src', value.replace('@2x', ''));
      } else {
        el.setAttribute('src', value);
      }
    }
  },
});

App.mpType = 'app';

const app = new Vue({
  ...App,
});
app.$mount();

这里注册了一个名为`adapt-img`的自定义指令，当该指令绑定到元素上时，会根据当前设备的DPR加载对应的图片。这里使用了uni-app提供的`uni.getSystemInfoSync().pixelRatio`来获取当前设备的DPR，从而实现了兼容小程序、H5和App的效果。

2. 在需要使用自适应DPR加载图片的地方，将自定义指令`adapt-img`绑定到`<img>`标签上，并设置图片路径：

<template>
  <div class="demo">
    <img v-adapt-img src="@/static/img/demo@3x.png" />
  </div>
</template>

<style>
.demo img {
  width: 100px;
  height: 100px;
}
</style>

这里将自定义指令`adapt-img`绑定到`<img>`标签上，并设置图片路径为`@/static/img/demo@3x.png`。在绑定指令时，可以将图片路径作为指令的值传递过去。

3. 在图片文件夹中，只需要提供@2x和@3x倍图即可，不需要提供@1x倍图。

这样，当页面加载时，自定义指令会根据当前设备的DPR加载对应的图片，如果当前设备的DPR为1，则会加载原始图片。

需要注意的是，如果图片文件名中包含了`@2x`或`@3x`，需要在指令中进行判断并替换。如果图片文件名中没有包含`@2x`或`@3x`，则直接加载原始图片。同时，由于uni-app的兼容性特性，该自定义指令可以兼容小程序、H5和App。