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
- 阅读：1640
产品分类： 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事件不执行
最佳回复
![[已删除]](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/002/47/03/80_avatar_mid.jpg?v=1699875362){kind=avatar}
你好，我跟进了这个问题
技术分析
在抖音中开启 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 同理
后续统一发版，请你进行测试，如果有问题请留言
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 (作者) - 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>
[已删除]
已经发版
2024-06-20 10:14