页面模板中有很多多余的空格



  • 如题,我使用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>
    

    效果:
    9d9ea275-f6ec-4e55-aa6f-4e53b333f318-image.png

    最终生成的wxml:
    823330c0-8245-459e-8e96-12eb5a8ba989-image.png

    可以看见item中间多了一个空格字符串,导致页面显示时连个块中间有空隙。

    但是如果第二个view.item元素不换行就不会有空格,不过这样一来代码格式就很乱了。
    而且这种空格多了是不是也会影响最终打包文件的体积呢?

    希望能给出解决方案。



  • @bug4j 这个应该是 小程序中经常出现的一个问题 行内元素 如<text> 编辑过程代码格式化 会产生“空格” 打包编译代码压缩就没事 就是在开发调试会有影响


登录后回复