微信小程序开发实战

本人最近参与了系统分析与设计课程项目的开发（项目地址，主要负责前端小程序开发部分。下面讲讲我在项目开发时获取的一些经验。

任务卡片：Flex布局的一处应用

小程序的首页是一个任务广场，通过任务卡片的形式呈现目前正在进行的任务。

首页最重要的元素就是任务卡片，是长这样子的：

任务卡片由左侧的图标和右侧的内容组成，右侧的内容则分为上部的header，和下部的body。其中header由任务标题和任务报酬组成，body则是任务概要。

下将任务标题所在的view成为title, 任务报酬所在的view成为extra

需求：extra view显示价格，border是圆角矩形，单行显示，不可换行，在整个header中居右对齐。
title view显示任务标题，无边框，字号较大，可以换行，在整个header中居左对齐。

分析：考虑到标题和价格都是动态加载的，于是title和extra要显示多长的文本是不确定的。然后这里价格是有边框的，所以需要extra view的大小恰好合适。并且价格的显示不能换行，这就要求了header需要优先保证extra view的空间。

考虑flex布局。当空间足够时，extra view不会增长（价格的框需要恰好的大小）。当空间不足时，extra view不会收缩（收缩会使单行无法显示完全）。于是可以对header采取flex布局，title view设为flex: 1 1 auto, extra view设为flex: 0 0 auto. 即可完成任务。

具体实现：

.header {
   
  display: flex;
  flex-direction