<template>
<view class="content" @touchstart="test.touchstart">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view v-if="text">
<view v-for="s of text">{{s}}</view>
</view>
</view>
</template>
<script module="test" lang="wxs">
// 修复 callMethod 调用失效,返回含有正确的 $vm 的 instance
function fixInstance(instance){
var pageInstance = {}
pageInstance['$el'] = instance['$el']
pageInstance['$vm'] = instance['$vm']
pageInstance.__proto__ = instance.__proto__
while(!pageInstance['$vm']['$home']){
pageInstance['$vm'] = pageInstance['$vm']['$parent']
}
return pageInstance
}
// 点击页面 logo,触发此方法
function touchstart(e, instance){
// 当 instance 和 页面 $vm 不一致时,调用 callMethod 失效
console.log('instance')
console.log(instance.$vm._uid)
console.log(instance.$vm)
instance.callMethod('updateText')
}
module.exports = {touchstart}
</script>
<script>
export default {
data() {
return {
title: 'Hello',
text: '',
n: 3,
timer: null,
}
},
onLoad() {
// 注释以下代码后,点击页面 logo callMethod 方法正常
this.timer = setInterval(()=> {
if(this.n-- === 0){clearInterval(this.timer)}
this.updateText()
}, 100)
},
methods: {
updateText(){
this.text || (this.text = [])
this.text.push(new Date().getTime())
console.log('update text')
}
},
mounted(){
console.log(this._uid)
// 用于修复 callMethod 调用失效时,判断根节点
this.$home = 'root'
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
- 发布:2021-02-08 00:37
- 更新:2021-03-04 10:51
- 阅读:892
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 1907
HBuilderX类型: 正式
HBuilderX版本号: 3.0.7
手机系统: Android
手机系统版本号: Android 11
手机厂商: 模拟器
手机机型: 模拟器
页面类型: vue
打包方式: 离线
项目创建方式: HBuilderX
示例代码:
操作步骤:
取消注释 onLoad 方法的代码,定时器结束后,点击 logo,触发wxs 的 touchstart 函数,此时调用 callMethod ,页面 text 并没有更新。
取消注释 onLoad 方法的代码,定时器结束后,点击 logo,触发wxs 的 touchstart 函数,此时调用 callMethod ,页面 text 并没有更新。
预期结果:
点击 logo,title 下的 text 多一行,callMethod 调用成功
点击 logo,title 下的 text 多一行,callMethod 调用成功
实际结果:
没有多一行,也没有报错
没有多一行,也没有报错
bug描述:
在 h5 应用中,快速更新了 vue 的 data 后,wxs 的 callMehod 失效,失效的原因是,wxs 获取到的 instance.$vm 已经不含有相应的 vue 的 methods,data等。其 instance 的父节点上才存在相应的方法。
更多细节请看 demo,在附件中