fix: #297使用grid布局解决目前编译为抖音小程序无法开启virtualHost

ijry · Apr 9, 2024 · 43b245f · 43b245f
1 parent 43ab379
commit 43b245f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/src/manifest.json b/src/manifest.json
@@ -128,7 +128,7 @@
         "appid" : ""
     },
     "mp-toutiao" : {
-        "usingComponents" : true,
+        "usingComponents" : true,		"mergeVirtualHostAttributes" : true,
         "appid" : ""
     },
     "h5" : {

diff --git a/src/uni_modules/uview-plus/components/u-grid-item/u-grid-item.vue b/src/uni_modules/uview-plus/components/u-grid-item/u-grid-item.vue
@@ -1,7 +1,6 @@
 <template>
-	<!-- #ifndef APP-NVUE -->
-	<view
-		v-if="parentData.col > 0"
+	<!-- #ifndef APP-NVUE -->
+	<view		v-if="parentData.col > 0"
 	    class="u-grid-item"
 	    hover-class="u-grid-item--hover-class"
 	    :hover-stay-time="200"
@@ -50,6 +49,8 @@
 				},
 				// #ifdef APP-NVUE
 				width: 0, // nvue下才这么计算，vue下放到computed中，否则会因为延时造成闪烁
+				// #endif				// #ifdef MP-TOUTIAO
+				width: '100%',
 				// #endif
 				classes: [], // 类名集合，用于判断是否显示右边和下边框
 			};
@@ -59,11 +60,11 @@
 		},
 		emits: ['click'],
 		//  微信小程序中 options 选项
-		options: {
-		    virtualHost: true //将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
-		},
+		// #ifdef MP-WEIXIN		options: {
+		    virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
+		},		// #endif
 		computed: {
-			// #ifndef APP-NVUE
+			// #ifndef APP-NVUE || MP-TOUTIAO
 			// vue下放到computed中，否则会因为延时造成闪烁
 			width() {
 				if (this.parentData.col > 0) {

diff --git a/src/uni_modules/uview-plus/components/u-grid/u-grid.vue b/src/uni_modules/uview-plus/components/u-grid/u-grid.vue
@@ -71,7 +71,9 @@
 				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
 			}
 		},
-		emits: ['click'], // 防止事件执行两次
+		emits: ['click'], // 防止事件执行两次		// 20240409发现抖音小程序如果开启virtualHost会出现严重问题，几乎所有事件包括created等生命周期事件全部失效。		// #ifdef MP-WEIXIN		options: {
+		    // virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
+		},		// #endif
 		methods: {
 			// 此方法由u-grid-item触发，用于在u-grid发出事件
 			childClick(name) {
@@ -95,6 +97,6 @@
 		justify-content: center;
 		@include flex;
 		flex-wrap: wrap;
-		align-items: center;
+		align-items: center;		// 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局		// 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。		/* #ifdef MP-TOUTIAO */		display: grid;		grid-template-columns: repeat(v-bind(col), 1fr);		/* #endif */
 	}
 </style>