uniapp下使用支付宝组件无法获取其实例的问题

最近在接支付宝的插件 - 极速退款(使用交易组件下单后，需要满足未发货，秒退款才可以报名支付宝活动)
然后在接入的时候看到了支付宝提供的示例代码

<refund
  orderId="2023122501502300000005550002476962"
  oid="2088501698901229"
  ref="handleRef"
  onComplete="onComplete"
/>
Page({
  data: {
  },
  // 开始插件极速退款流程（点击退款按钮后调用）
  handleRefund() {
    this.refundRef.start();
  },
 // 获取插件实例
  handleRef(ref) {
    // 存储自定义组件实例，方便以后调用
    this.refundRef = ref;
  },
});

乍一看以为很简单，因为很久没看支付宝文档了，以为这个获取插件示例是支付宝改写法了，然后直接按照uniapp的写法写上去，果不其然，报错了。

找不到start()方法

然后翻支付宝文档,才看到了这个

自定义组件可在选项中配置一个 ref 方法，该方法的返回值将作为该自定义组件的对外引用实例。配置 ref 后，支持小程序宿主、小程序插件互相获取对方的自定义组件对外实例。如未定义此方法，尝试引用该自定义组件的对外实例时，同属于一个小程序宿主或者小程序插件的其他自定义组件或页面会获得该自定义组件的 this，否则获得 null。

创建后 ref 回调
如果小程序项目开启了 component2，就可以在 AXML 中给自定义组件定义 ref 回调。当被引用的自定义组件创建后，将自动触发该回调。

也就是说，vue组件中直接写ref是获取不到组件实例的，这个写法被支付宝屏蔽了，实际编译后，组件被包裹了一层<plugin-wrapper>，除了ref，其他的所有属性都可以被真实的组件接受。‘’ 编译后的组件内容

所以我们不论怎么做，只要经过编译，都会得到错误的结果。
所以只能在编译后，对错误的内容做处理了。
这里用到了webpack的自定义plugin。

//vue.config.js
class MyPlugin {
    apply(compiler) {
        compiler.hooks.done.tap('MyPlugin', (status) => {
            function quickRefundActivity() {
                const paths = [
                    `${__dirname}/unpackage/dist/dev/mp-alipay/pages/order/order-detail/index.axml`, // dev环境编译后的文件路径  
                    `${__dirname}/unpackage/dist/build/mp-alipay/pages/order/order-detail/index.axml`, // build环境编译后的文件路径  
                ];
                paths.forEach((path) => {
                    if (fs.existsSync(path)) {
                        let content = fs.readFileSync(path).toString();
                        content = content.replace('refund onRef=', 'refund ref='); // 此处重点，将onRef替换成了小程序的语法  
                        fs.writeFileSync(path, content);
                    }
                });
            }
            quickRefundActivity();
        });
    }
}

module.exports = {
    configureWebpack: {
        plugins: [new MyPlugin()],
    },
};

这样就解决啦!