解决uniapp获取支付宝原生插件ref实例的问题

上周碰到了一个困扰我很久的问题，解决之后分享一下

uniapp获取支付宝原生插件ref实例的问题是一直存在的，此处500+的坑

引入

第一步是引入插件 page.json和manifest.json以及你使用的页面里面（book.vue）

page.json
"mp-alipay": {
					"usingComponents": {
						"yourplugin": "plugin://yourplugin/yourplugin"//页面引入插件
					}
				}

manifest.json
"mp-alipay" : {
        "component2": true,
        "usingComponents": true,
        "plugins" : {
            "yourplugin": {
                "version": "*",
                "provider": "123456" //你的插件ID
            }
        },
        "appid" : "1234565"//你的appID
    },

book.vue	这里的判断和orderParams根据自己需求来
<!-- #ifdef MP-ALIPAY -->
		<yourplugin
				v-if="orderParams.serviceCategoryCode" 
				@ref="handleComponentRef"
				:orderParams="orderParams"
				@callback="handleOperate"
		/>
		<!-- #endif -->

经过正确引入之后

编译

你的编译会是这样的 

uniapp编译的支付宝的axml代码

这个时候onRef还是不能获取原生组件的ref实例

解决

要重新在vue.config.js 写个webpack插件去处理编译后的代码文件

如果没有vue.config.js，可直接照搬，替换文件路径和插件名称

// vue.config.js
class ReplaceRefPlugin {
    apply (compiler) {
        compiler.hooks.emit.tap('ReplaceRefPlugin', compilation => {
            for (const filename of Object.keys(compilation.assets)) {
                if (filename.endsWith('pages/book/book.axml')) { //文件路径
                    let source = compilation.assets[filename].source().toString()
                    source = source.replace('yourplugin onRef=', 'yourplugin ref=')//你要替换的插件
                    // 覆盖 asset
                    compilation.assets[filename] = {
                        source: () => source,
                        size: () => Buffer.byteLength(source)
                    }
                }
            }
        })
    }
}

module.exports = {
    configureWebpack: config => {
        config.plugins.push(new ReplaceRefPlugin())
    }
}

这样处理之后要重新编译支付宝小程序

uniapp编译的支付宝的axml代码

能完成这一步就解决了90%的问题，但是此处还有坑

上面我们是用函数来接收ref的值

	// 挂载ref
		handleComponentRef(ref) {
      console.log(ref,'ref')
			this.orderRef = ref;
		},

这个时候的打印值会是

你想要真正拿到实例，就要去

//完整实例
this.orderRef.detail.__args__[0]

至此，问题解决