<student-verify
ref="alipayStudentVerifyRef"
shopName=""
shopLink=""
shopLogo=""
onSuccess="verifySuccess"
/>
try{
console.log(this.$refs.alipayStudentVerifyRef);//调用为 undefined
this.$refs.saveRef.verify(); //报错
}catch{
console.log('组件失败')
}
- 发布:2023-04-11 15:26
- 更新:2024-08-13 21:25
- 阅读:1512
产品分类: uniapp/小程序/阿里
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows10
HBuilderX类型: Alpha
HBuilderX版本号: 3.7.12
第三方开发者工具版本号: 3.3.3
基础库版本号: 2.8.8
项目创建方式: HBuilderX
操作步骤:
预期结果:
this.$refs.alipayStudentVerifyRef.verify() ==》调用成功
this.$refs.alipayStudentVerifyRef.verify() ==》调用成功
实际结果:
this.$refs.alipayStudentVerifyRef指向外部包裹的plugin-wrapper实例
this.$refs.alipayStudentVerifyRef指向外部包裹的plugin-wrapper实例
嘿,看起来我解决了
<template>
<student-verify
:shopName="verifyInfo.shopName"
:shopLink="verifyInfo.shopLink"
:shopLogo="verifyInfo.shopLogo"
@ref="onStudentVerifyRef"
@success="onSuccess"
/>
</template>
直接@ref
编译出来后会变成:
<plugin-wrapper ...>
<student-verify onRef="{{'onRef'+'b144d2e6-1'}}" ...></student-verify>
</plugin-wrapper>
有个onRef, 然后得自己写个node.js脚本,在编译完成后把这个onRef改成ref, 就能拿到原始实例了。
修改后:
<plugin-wrapper ...>
<student-verify ref="{{'onRef'+'b144d2e6-1'}}" ...></student-verify>
</plugin-wrapper>
解决方案,在vue.config.js 写个webpack插件去处理编译后的代码文件
<student-verify @ref="onStudentVerifyRef" />
onStudentVerifyRef(ref) {
this.studentVerifyRef = ref;
}
在vue文件中,ref用 @ref 代替,onStudentVerifyRef 用来接受ref对象
vue.config.js
const fs = require('fs');
class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap('MyPlugin', (stats) => {
function studentVoucherCollectionActivity() {
const paths = [
`${__dirname}/dist/dev/mp-alipay/pages/student/index.axml`, // dev环境编译后的文件路径
`${__dirname}/dist/build/mp-alipay/pages/student/index.axml`, // build环境编译后的文件路径
];
paths.forEach((path) => {
if (fs.existsSync(path)) {
let content = fs.readFileSync(path).toString();
content = content.replace('student-verify onRef=', 'student-verify ref='); // 此处重点,将onRef替换成了小程序的语法
fs.writeFileSync(path, content);
}
});
}
studentVoucherCollectionActivity();
});
}
}
module.exports = {
configureWebpack: {
plugins: [new MyPlugin()],
},
};
vue.config.js这个文件也是用上面给的代码
,我在支付宝编译器上看代码是被改到了的,但是await this.studentVerifyRef.verify();这里还是报错的
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序
学生验证插件是做什么的啊,有没有网址学习一下
楼上大佬说的对
1:ref改为@ref
2:增加vue.config.js代码
3:重点是, await this.studentVerifyRef.detail.args[0].verify(),这样才能调起来弹窗
到瑞米法
确实拿到了,非常感谢
2023-05-24 10:18
码农羊咩咩
请问大牛能留下详细解决的node吗,不知怎么修改编译后文件
2023-06-01 14:58
1***@qq.com
回复 到瑞米法:大牛能给个解决示例不
2023-06-29 15:42
1***@qq.com
改了,也没有拿到呀,要疯了
2023-07-25 14:47