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')
}
}
- 发布:2024-06-04 20:18
- 更新:2024-06-19 08:04
- 阅读:621
产品分类: uniapp/小程序/字节跳动
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows11
HBuilderX类型: 正式
HBuilderX版本号: 4.18
第三方开发者工具版本号: 4.2.5
基础库版本号: 3.24.0.5
项目创建方式: HBuilderX
示例代码:
操作步骤:
页面中使用组件
页面中使用组件
预期结果:
页面created
组件created
页面beforeMount
页面mounted
组件beforeMount
组件mounted
picker组件mounted
页面created
组件created
页面beforeMount
页面mounted
组件beforeMount
组件mounted
picker组件mounted
实际结果:
页面created
页面beforeMount
页面mounted
picker组件mounted
页面created
页面beforeMount
页面mounted
picker组件mounted
bug描述:
组件options开启virtualHost后,created、beforeMount事件不执行
最佳回复
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 - 日常回复 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/
我看下是否是相关限制
-
setting (作者)
vue3会出现,uni-file-picker组件因为created没执行,导致方法报错;vue2的话没有单独做验证,但是uni-file-picker在vue2中抖音小程序也不能用
2024-06-05 13:44
-
回复 setting: 我印象中 uni ui 在抖音上都去掉 virtualHost 了吧,规避各种问题,抖音平台先条件编译绕过吧,我下午尝试修复下这个问题
2024-06-05 14:35
-
setting (作者)
在抖音小程序uni-ui开启了virtualHost,provide提供的uniForm为null,在uniFormsItem拿不到uniForm的labelwidth,设置宽度失败,也是因为这个把
2024-06-06 18:14
-
回复 setting: 这个我要具体看一下,之前是只注意到了抖音小程序使用 virtualHost 合并标签,忽略了对应的限制。再一个是抖音生命周期之前比较特殊,你可以提供一个单页面复现代码
2024-06-07 14:19
setting (作者) - 1111
<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
已经发版
2024-06-20 10:14