用户已实名
用户已实名
  • 发布:2024-06-04 20:18
  • 更新:2024-06-19 08:04
  • 阅读:141

组件options开启virtualHost后,created、beforeMount事件不执行

分类:uni-app

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

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.18

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

基础库版本号: 3.24.0.5

项目创建方式: HBuilderX

示例代码:
export default {  
        name: "test",  
        options: {  
            virtualHost: true  
        },  
        data() {  
            return {  

            };  
        },  
        created() {  
            console.log('组件created')  
        },  
        beforeMount() {  
            console.log('组件beforeMount')  
        },  
        mounted() {  
            console.log('组件mounted')  
        },  
        onReady() {  
            console.log('组件onReady')  
        }  
    }

操作步骤:

页面中使用组件

预期结果:

页面created
组件created
页面beforeMount
页面mounted
组件beforeMount
组件mounted
picker组件mounted

实际结果:

页面created
页面beforeMount
页面mounted
picker组件mounted

bug描述:

组件options开启virtualHost后,created、beforeMount事件不执行

2024-06-04 20:18 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

你好,我跟进了这个问题

技术分析

在抖音中开启 virtualHost=true,目前会尝试使用 fragment 能力。但是在抖音中这个 fragment 限制比较多

https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/framework/custom-component/component-model-and-style/

会阻止 uni-app 触发 mounted 等事件,具体是 handLink 相关逻辑。导致相关生命周期未触发。

临时解决方案

下载解压下面的附件,替换到 hbuilderx 的插件 /Applications/HBuilderX-Dev.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-toutiao/dist/uni.mp.esm.js 中,windows 同理

后续统一发版,请你进行测试,如果有问题请留言

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

vue2 还是 vue3 的?

抖音小程序开启 virtualHost=true 之后,会使用 fragment 节点,目前在抖音小程序中,有一些限制,比如节点的 class/style/绑定事件等不生效。

https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/framework/custom-component/component-model-and-style/

我看下是否是相关限制

  • 用户已实名 (作者)

    vue3会出现,uni-file-picker组件因为created没执行,导致方法报错;vue2的话没有单独做验证,但是uni-file-picker在vue2中抖音小程序也不能用

    2024-06-05 13:44

  • DCloud_UNI_OttoJi

    回复 用户已实名: 我印象中 uni ui 在抖音上都去掉 virtualHost 了吧,规避各种问题,抖音平台先条件编译绕过吧,我下午尝试修复下这个问题

    2024-06-05 14:35

  • 用户已实名 (作者)

    回复 DCloud_UNI_OttoJi: 目前看是没有去除,而且项目中用的cli创建的,uni-ui是npm包

    2024-06-05 15:06

  • DCloud_UNI_OttoJi

    回复 用户已实名: 我解决了,给你个包,你试一下

    2024-06-05 18:10

  • 用户已实名 (作者)

    在抖音小程序uni-ui开启了virtualHost,provide提供的uniForm为null,在uniFormsItem拿不到uniForm的labelwidth,设置宽度失败,也是因为这个把

    2024-06-06 18:14

  • DCloud_UNI_OttoJi

    回复 用户已实名: 这个我要具体看一下,之前是只注意到了抖音小程序使用 virtualHost 合并标签,忽略了对应的限制。再一个是抖音生命周期之前比较特殊,你可以提供一个单页面复现代码

    2024-06-07 14:19

用户已实名

用户已实名 (作者)

<template>  
    <view class="content">  
        <uni-forms ref="form" :rules="rules" v-model="formData" :label-width="100">  
            <uni-forms-item label="姓名" name="name"   
                :label-width="100" required>  
                <uni-easyinput v-model="formData.name" :inputBorder="false" placeholder="请输入姓名" />  
            </uni-forms-item>  
            <uni-forms-item label="手机号码" name="mobile"  required>  
                <uni-easyinput v-model="formData.mobile" :inputBorder="false" placeholder="请输入手机号码" />  
            </uni-forms-item>  
        </uni-forms>  
        <button type="primary" @click="test">t111</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                formData: {  
                    name: '',  
                    mobile: ''  
                },  
                rules: {  
                    name: {  
                        rules: [{  
                            required: true,  
                            errorMessage: '请输入姓名'  
                        }]  
                    },  
                    mobile: {  
                        rules: [{  
                            required: true,  
                            errorMessage: '请输入手机'  
                        }]  
                    },  
                }  
            }  
        },  
        methods: {  
            test() {  
                this.$refs.form.validate().then(res => {  
                    console.log(res)  
                })  
            }  
        }  
    }  
</script>  
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

新开一个项目吧。

DCloud

DCloud

HBuilderX 4.21.2024061818-alpha 已修复。

要回复问题请先登录注册