1***@qq.com
1***@qq.com
  • 发布:2023-04-16 23:22
  • 更新:2023-04-17 14:34
  • 阅读:249

【报Bug】微信小程序this指向问题

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.9

第三方开发者工具版本号: 1.05.2103200

基础库版本号: 1.05.2103200

项目创建方式: HBuilderX

示例代码:
<!-- 组件说明,该组件为列表封装,只用设置数据源、请求前和请求后的数据处理的  
钩子,即可自动化完成数据请求、数据渲染、分页加载、下拉刷新等一系列重复性的  
操作,且对自动根据当前运行环境对列表滑动进行兼容性支持 -->  

<!-- comp.vue文件 -->  
<template>  
    <view>  
        <slot v-for="(item, index) in data" :row="item" :index="index"></slot>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            beforeRequest: {  
                type: Function,  
                default: (data) => { return data }  
            },  
            afterRequest: {  
                type: Function,  
                default: (resp) => { return resp }  
            }  
        },  
        data() {  
            return {  
                query: {  
                    from: 0,  
                    limit: 10  
                },  
                data: []  
            }  
        },  
        created() {  
            console.log('处理前参数为:'+JSON.stringify(this.query));  
            const data = this.beforeRequest(this.query)  
            console.log('处理后参数为:'+JSON.stringify(data));  
            // 模拟请求  
            setTimeout(() => {  
                // 模拟请求结果  
                const resp = { success: true, data: [{ id: 1, info: "{\"name\":\"abc\"}" }], message: '请求成功!'}  
                // 开始调用处理钩子  
                console.log('处理前结果为:'+JSON.stringify(this.query));  
                const finalResp = this.afterRequest(resp)  
                console.log('处理后结果为:'+JSON.stringify(this.query));  
                // 开始渲染  
                this.data = finalResp.data  
            }, 2000)  
        }  
    }  
</script>
<!-- test.vue文件 -->  
<template>  
    <view style="display: flex; justify-content: center;align-items: center;height: 100vh;">  
        <comp :beforeRequest="beforeRequest" :afterRequest="afterRequest" v-slot="{ row, index }">  
            <view>{{toJsonString(row)}}</view>  
        </comp>  
    </view>  
</template>  

<script>  
    import comp from './comp.vue'  
    export default {  
        components: { comp },  
        data() {  
            return {  
                search: '中国'  
            }  
        },  
        methods: {  
            beforeRequest(data) {  
                data.search0 = 'search0'  
                data.search1 = this.search  
                data.search2 = 'search2'  
                data.search3 = data.from + 5  
                return data  
            },  
            afterRequest(resp) {  
                for (const item of resp.data) {  
                    item.info = JSON.parse(item.info)  
                    item.info.name += this.search  
                }  
                return resp  
            },  
            toJsonString(row) {  
                return JSON.stringify(row)  
            }  
        }  
    }  
</script>
<!-- H5与APP运行结果 -->  
处理前参数为:{"from":0,"limit":10}  at pages/comp.vue:29  
处理后参数为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5}  at pages/comp.vue:31  

处理前结果为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5}  at pages/comp.vue:37  
处理后结果为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5}  at pages/comp.vue:39  

<!-- 微信小程序运行结果 -->  
comp.js? [sm]:173 处理前参数为:{"from":0,"limit":10}  
comp.js? [sm]:175 处理后参数为:{"from":0,"limit":10,"search0":"search0","search2":"search2","search3":5}  

comp.js? [sm]:188 处理前结果为:{"from":0,"limit":10,"search0":"search0","search2":"search2","search3":5}  
comp.js? [sm]:190 处理后结果为:{"from":0,"limit":10,"search0":"search0","search2":"search2","search3":5}

操作步骤:

分别运行到微信小程序与H5/APP

预期结果:

结果一致为:

处理前参数为:{"from":0,"limit":10} at pages/comp.vue:29
处理后参数为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5} at pages/comp.vue:31

处理前结果为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5} at pages/comp.vue:37
处理后结果为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5} at pages/comp.vue:39

实际结果:

微信端this指向为组件,导致结果不一致

bug描述:

组件传参为一个函数,在H5与APP环境下,传入的函数执行时this指向为父组件(页面),在微信小程序环境下指向为组件

2023-04-16 23:22 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

提供下最简可复现demo

  • 1***@qq.com (作者)

    已提供Demo与截图,希望尽快核对排查

    2023-04-17 14:21

DCloud_UNI_WZF

DCloud_UNI_WZF

vue2 微信小程序端 复现该问题,感谢反馈,已加分

  • 1***@qq.com (作者)

    大佬,下波HB更新可以修复吗QAQ

    2023-04-17 18:15

  • DCloud_UNI_WZF

    回复 1***@qq.com: 不确定,修复后会在该贴回复

    2023-04-17 18:23

要回复问题请先登录注册