d***@gmail.com
d***@gmail.com
  • 发布:2021-02-08 00:37
  • 更新:2021-03-04 10:51
  • 阅读:892

【报Bug】在 h5 应用中,某种情况下 wxs 的 instance.callMethod 方法失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 1907

HBuilderX类型: 正式

HBuilderX版本号: 3.0.7

手机系统: Android

手机系统版本号: Android 11

手机厂商: 模拟器

手机机型: 模拟器

页面类型: vue

打包方式: 离线

项目创建方式: HBuilderX

示例代码:
<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>  

操作步骤:

取消注释 onLoad 方法的代码,定时器结束后,点击 logo,触发wxs 的 touchstart 函数,此时调用 callMethod ,页面 text 并没有更新。

预期结果:

点击 logo,title 下的 text 多一行,callMethod 调用成功

实际结果:

没有多一行,也没有报错

bug描述:

在 h5 应用中,快速更新了 vue 的 data 后,wxs 的 callMehod 失效,失效的原因是,wxs 获取到的 instance.$vm 已经不含有相应的 vue 的 methods,data等。其 instance 的父节点上才存在相应的方法。

更多细节请看 demo,在附件中

2021-02-08 00:37 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

问题确认,已加分,后续修复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX 3.1.4 alpha 已修复

  • 秋云

    大佬,renderjs也存在这个问题,有时间能修复一下吗?

    2021-03-06 22:01

  • DCloud_UNI_GSQ

    回复 秋云: 收到,将会排查

    2021-03-08 11:16

该问题目前已经被锁定, 无法添加新回复