我的第一篇博客，记录小程序中遇到的问题

最近老师让做小程序，以前没有任何前端的基础，所以是半路出家，中间走了太多弯路。
昨天下午写页面的时候，由于对CSS的属性了解不够扎实，出现了一个小问题，翻来覆去找了一个多小时才发现错误，写笔记的时候突然想记录一下这次的完整过程，故产生了写一篇博客记录下这个问题的想法（以前总是觉得写博客太麻烦），也开始了自己的博客之路~

flex布局的宽度

由于要写的是一个列表页面，所以我先写了一个template，在列表页面中引用，但是列表项始终不能占满屏幕宽度

template的结构

<template name="mySpaceItem">
  <view class='msi-container'>

    <view class='image'>
      <image class='space-image' src='{{item.image}}'></image>
    </view>

    <view class='info'>
      <view class='space-info'>
        <text class='info-key'>aaa:</text>
        <text class='info-value'>{{item.name}}</text>
      </view>

      <view class='space-info'>
        <text class='info-key'>bbb:</text>
        <text class='info-value'>ddd</text>
      </view>

      <view class='space-info'>
        <text class='info-key'>ccc：</text>
        <text class='info-value'>{{item.location}}</text>
      </view>
    </view>

  </view>
</template>

列表项分为两部分，flex-direction的值为row，左边展示一个图片，右边是详细信息，详细信息的flex-direction的值为column

引用template的页面

<view class='container'>
  <block wx:for="{{mySpace}}">
    <view>
      <template is="mySpaceItem" data="{{item}}"/>
    </view>
  </block>
  <button class='addSpaceBtn' type='warn'>button</button>
</view>

改来改去发现列表项的宽度始终不能占满屏幕，虽然在显示上没有区别，但是！！实际上就是没有占满屏幕，把各种属性改成100%都没有用，又看了前两天跟视频写的另一个小程序的代码，发现列表是可以占满屏幕的。没有办法，只能一点一点对照两个代码的区别，引用页面的代码是一致的，又开始找template的wxml的区别，也没找出什么问题。一番挣扎之后发现是两个template的结构不一样，以前写的template最外层view的flex-direction属性是column，而这一次是row，并且以前的最外层容器也没有设置width为100%，于是猜测（半路出家写代码全靠猜…）列布局会自动让宽度占满屏幕，所以之前

<block wx:for="{{info}}">
  <view catchtap='onPostTap' data-postID="{{item.postID}}" data-post-name="name">
    <template is="postItem" data="{{item}}" />
  </view>
</block>

这样引用时template外层的view是占满屏幕的，而现在flex-direction属性是row时template外层的view宽度是template的实际宽度（即使设置了template的宽度为100%），所以尝试去掉引用时template外层的view

<view class='container'>
  <block wx:for="{{mySpace}}">
    <template is="mySpaceItem" data="{{item}}"/>
  </block>
  <button class='addSpaceBtn' type='warn'>button</button>
</view>

改成这样以后果然问题解决了，长出一口气！

写博客果然比记笔记麻烦了很多，希望自己能坚持下去，从有道云笔记搬家到博客。刚好12点整，玥玥叫我去吃饭~