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')
}
}
setting
- 发布：2024-06-04 20:18
- 更新：2024-06-19 08:04
- 阅读：700
产品分类： 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>
![[已删除]](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/00/00/01_avatar_mid.jpg?v=0){kind=avatar}
DCloud_UNI_OttoJi
已经发版
2024-06-20 10:14