先使用vue2版本编译到小程序, 点击红框,就会显示点击的坐标;
再使用vue3版本编译到小程序,点击红框无法显示,wxsCall这个方法没有执行
wenju
- 发布：2022-01-06 14:47
- 更新：2022-10-09 17:59
- 阅读：1238
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 3.3.5
第三方开发者工具版本号： 最新
基础库版本号： 最新
项目创建方式： HBuilderX
操作步骤：
预期结果：
vue3正常
vue3正常
实际结果：
vue3不正常,vue2正常
vue3不正常,vue2正常
bug描述：
vue3版本微信小程序wxs无法回调逻辑层, vue2正常, 复现代码:
<template>
<view>
<view class="touch-warp" @touchstart="wxsBiz.touchstartEvent" >
点击的坐标: {{text}}
</view>
</view>
</template>
<script src="./wxs.wxs" module="wxsBiz" lang="wxs"></script>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
wxsCall(p){
// 使用vue3版本, wxs回调不到逻辑层,导致此处无法执行, 而vue2版本是正常的
this.text = JSON.stringify(p)
}
}
}
</script>
<style>
.touch-warp{
padding: 100rpx 20rpx;
border: 2px solid red;
}
</style>
./wxs.wxs
function touchstartEvent(e, ins){
var p = getPoint(e)
ins.callMethod('wxsCall', p)
}
function getPoint(e) {
if (!e) {
return {x: 0,y: 0}
}
if (e.touches && e.touches[0]) {
return {x: e.touches[0].pageX,y: e.touches[0].pageY}
} else if (e.changedTouches && e.changedTouches[0]) {
return {x: e.changedTouches[0].pageX,y: e.changedTouches[0].pageY}
} else {
return {x: e.clientX,y: e.clientY}
}
}
module.exports = {
touchstartEvent: touchstartEvent
}
vue3组合式API使用setup，WXS的callMethod调用setup内方法须用defineExpose暴露
<script module="wxs" lang="wxs">
module.exports = {
_click: function(event, ownerInstance) {
// 更改背景颜色
event.instance.setStyle({ 'background-color': '#e64340' })
// 调用逻辑层方法
ownerInstance.callMethod('printLog', event)
return false
}
}
</script>
<script setup>
defineExpose({
printLog: args => {
console.log(args)
}
})
</script>
