<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
- 阅读：1578
产品分类： 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实例
bug描述：
uniapp支付宝小程序引入支付宝学生验证插件，组件实例ref获取不到，外部包裹了一层plugin-wrapper动态组件，无法获取student-verify插件下的实例方法
嘿，看起来我解决了
<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()],
},
};
-
-
回复 1***@qq.com:
<student-verify @ref="onStudentVerifyRef" />
onStudentVerifyRef(ref) {
this.studentVerifyRef = ref;
}
注意这部分
2023-08-03 17:06
-
vue.config.js这个文件也是用上面给的代码
，我在支付宝编译器上看代码是被改到了的，但是await this.studentVerifyRef.verify();这里还是报错的
-
vue页面注意@ref="onStudentVerifyRef"
<student-verify @ref="onStudentVerifyRef" shopName="xxx小程序" shopLink="xxx" shopLogo="xxx"
onSuccess="onSuccess"></student-verify>
js页面
onStudentVerifyRef(ref) {
this.studentVerifyRef = ref;
}
编译后的页面中插件上onRef改成ref2023-08-22 09:43
-
-
-
-
-
-
-
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