astonish
astonish
  • 发布:2021-05-30 21:54
  • 更新:2022-05-14 22:58
  • 阅读:555

头条小程序的真机调试时u-form-item代码 this.$u.$parent.call(this, 'u-form')是获取不到的父组件

分类:uni-app

产品分类: uniapp/小程序/字节跳动

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows_NT x64 10.0.18362

HBuilderX类型: 正式

HBuilderX版本号: 3.1.13

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

基础库版本号: 1.53.0

项目创建方式: HBuilderX

示例代码:

u-form-item.vue文件里:


mounted() {  

        // 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用  
        this.parent = this.$u.$parent.call(this, 'u-form');  
        //如下是我添加的测试代码     
        if(this.parent.fields){               
                console.log("6666");  
                this.$u.toast('6666');  
        }  
...  
}  

操作步骤:

见上面缺陷的描述。

预期结果:

望头条小程序的真机调试时(iphone 6 plus),u-form-item 可以 获取的父组件。

实际结果:

发现u-form-item.vue文件里this.$u.$parent.call(this, 'u-form')是获取不到的父组件。

bug描述:

在头条小程序的真机调试时(iphone 6 plus),发现提交一个表单,提交没反应。
排查发现:
是u-form-item 控件this.$u.$parent.call(this, 'u-form'); 获取不到父组件导致。

同样的代码,在头条小程序的模拟器是没有这个问题。在百度小程序、微信小程序的真机调试也没有这个问题。

2021-05-30 21:54 负责人:无 分享
已邀请:
astonish

astonish (作者)

upup

雨夜敬清秋

雨夜敬清秋 - 自言自语的,都是真的

尝试在 mounted 生命周期函数中使用 nextTick 来执行你的 this.parent = this.$u.$parent.call(this, 'u-form') 逻辑,如果仍旧无法解决,请提供可以复现该问题的 DEMO 上传以便排查。

astonish

astonish (作者)

使用了nextTick 仍然不行:在头条小程序的模拟器是没有这个问题。在头条小程序真机就这个问题--如下this.$u.toast根本就没有进去,说明获取不到父组件

u-form-item.vue文件里:

// 组件创建完成时,将当前实例保存到u-form中  
        mounted() {  

            this.$nextTick(() => {  
                                 // 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用  
                this.parent = this.$u.$parent.call(this, 'u-form');  

                if(this.parent){                  
                    console.log("66668");  
                    this.$u.toast('66668');  
                }  

                if (this.parent) {  
                    //  
                    // 历遍parentData中的属性,将parent中的同名属性赋值给parentData  
                    Object.keys(this.parentData).map(key => {  
                        this.parentData[key] = this.parent[key];  
                    });  
                    // 如果没有传入prop,或者uForm为空(如果u-form-input单独使用,就不会有uForm注入),就不进行校验  
                    if (this.prop) {  
                        setTimeout(() =>{  
                            console.log("coming");  
                            this.$u.toast("coming");  
                        },2000);  
                        // 将本实例添加到父组件中  
                        this.parent.fields.push(this);  
                        this.errorType = this.parent.errorType;  
                        // 设置初始值  
                        this.initialValue = this.fieldValue;  
                        // 添加表单校验,这里必须要写在$nextTick中,因为u-form的rules是通过ref手动传入的  
                        // 不在$nextTick中的话,可能会造成执行此处代码时,父组件还没通过ref把规则给u-form,导致规则为空  

                        this.setRules();  

                    }  
                }  
            })  
        },
astonish

astonish (作者)

附件的demo可以复现。跑起来后,可以看到一个登陆页面。

H5或头条小程序上模拟器里,填写手机号码,如果格式不正常,可以在字段下发提示的。点击按钮可以触发提示“正常触发提交”或“校验失败”--有反应就认为是正常的。

但是在头条小程序的真机测试里,填写手机号码,如果格式不正常,没有提示的。而且,点击按钮后,没有任何反应。

  • astonish (作者)

    回复 雨夜敬清秋: 附件里的demo是源码,选择字节小程序开发工具跑起来。字节小程序 有什么问题吗

    2021-06-01 08:22

  • 雨夜敬清秋

    回复 astonish: 你首先要找到 uview-ui/libs/function/$parent.js ,看一下 $parent 函数里咋写的,看到 parent.$options.name 吗?你的父组件要命名一个 name: 'u-form' 啊

    2021-06-01 08:48

  • 雨夜敬清秋

    回复 astonish: 编辑一下帖子,把 bug反馈 这个标签去掉,你这个问题和 uniapp bug 无关

    2021-06-01 08:59

  • astonish (作者)

    回复 雨夜敬清秋: 1、父组件是u-form控件,我看了他们的属性定义,是不支持设置name属性的;我也尝试在表单页面中的u-form控件上增加了name="u-form",也仍然不行的。2、同样的代码,百度小程序、微信小程序都是可以的哦,我想这是个bug。3、可以去掉Bug反馈。还需要你能帮忙看看是什么情况

    2021-06-01 09:39

  • 雨夜敬清秋

    回复 astonish: export default { name: 'u-form', components: {} ......

    2021-06-01 09:41

  • astonish (作者)

    回复 雨夜敬清秋: 但是,\uview-ui\components\u-form\u-form.vue 原来的代码里已经有个了的 export default { name: 'u-form', ....。您再看看

    2021-06-01 09:48

  • 雨夜敬清秋

    回复 astonish: 哦,我发现问题所在了,在字节小程序中,u-form-item 组件所指向的 父组件不是 u-form,而是 pages/login/mobilelogin.vue 这确实是一个 bug

    2021-06-01 10:13

astonish

astonish (作者)

upup

雨夜敬清秋

雨夜敬清秋 - 自言自语的,都是真的

mounted() {   
  this.$nextTick(() => {  
    // 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用  
    // #ifdef MP-TOUTIAO  
    this.parent = this.$parent.$refs.uForm;  
    // #endif  
    // #ifndef MP-TOUTIAO  
    this.parent = this.$u.$parent.call(this, 'u-form');  
    // #endif  
  ............
  • astonish (作者)

    我在\uview-ui\components\u-form\u-form-item.vue文件里,按你上面的整个方式调整了代码,仍然是不行的哦。甚至在字节小程序的模拟器上都不行了(原来是可以的)。在真机上也是不行。

    2021-06-01 18:55

  • 雨夜敬清秋

    回复 astonish: 我这在点击登录时已经没有问题了,但是无法实时监听输入并反馈,总体来说,这是uview的问题,因为这个ui框架并没有兼容字节小程序,所有有关$parent的指向都是不正确的,你可以反馈给这个框架的作者,或者尝试使用该ui框架的最新版本。

    2021-06-02 08:41

1***@qq.com

1***@qq.com

请问题主,尝试过在【企业微信小程序模式】下,同样无法触发 u-form 组件 的 ref 吗?

要回复问题请先登录注册