页面模板中有很多多余的空格
-
如题,我使用trao init 初始化构建了一个小程序,最终页面呈现的模板wxml中莫名其妙的出现了很多多余的空字符串节点;
在微信小程序中空格会占用一定页面宽度,这导致页面有些细节不符合我的预期。希望有大佬能帮一下。版本信息:
{ "@tarojs/cli": "3.1.1", "@tarojs/components": "3.1.1", "@tarojs/runtime": "3.1.1", "@tarojs/taro": "3.1.1", "vue-template-compiler": "^2.5.0", "vue": "^2.5.0", "taro-ui-vue": "^1.0.0-alpha.5" }
index.vue文件内容
<template> <view class="index"> <view class="index"> <view style="width:100%"> <view class="item"> <text>Taro</text> </view> <view class="item"> <text>Vue</text> </view> </view> </view> </view> </template> <style> .item { display: inline-block; width: 40%; box-sizing: border-box; height: 8em; line-height: 8em; text-align: center; background-color: coral; color: #fff; } </style>
效果:
最终生成的wxml:
可以看见item中间多了一个空格字符串,导致页面显示时连个块中间有空隙。
但是如果第二个view.item元素不换行就不会有空格,不过这样一来代码格式就很乱了。
而且这种空格多了是不是也会影响最终打包文件的体积呢?希望能给出解决方案。
-
@bug4j 这个应该是 小程序中经常出现的一个问题 行内元素 如<text> 编辑过程代码格式化 会产生“空格” 打包编译代码压缩就没事 就是在开发调试会有影响