微信小程序项目开发 课件项目二、答题小程序.pptx

微信小程序项目开发项目二、答题小程序

这个任务主要用到的知识包括GPIO、外部中断、定时器等。任务一、答题小程序任务二、使用Flex布局任务三、使用条件、列表渲染主要内容

项目介绍

演示创建过程01创建项目02设计答题界面03设计逻辑代码

微信小程序生命周期介绍微信小程序应用的生命周期

微信小程序生命周期介绍页面的生命周期

Flex布局Flex是FlexibleBox的缩写，Flex布局又称弹性布局。?Flex布局代码简单，但功能强大。用Flex布局很容易制作排列整齐、自动适应屏幕大小的页面，因此在微信小程序的开发中得到了广泛的应用，后续的大部分项目都使用了Flex布局。

flex-directionrow：默认值，如果不指定flex-direction，默认是row，代表横向，从左到右排列row-reverse：横向，从右到左排列column：纵向，从上到下排列column-reverse：纵向，从下往上排列Flex布局有“主轴”和“交叉轴”的概念。如果横向排列，则主轴是横向，交叉轴是纵向；否则主轴是纵向，交叉轴是横向。

flex-wrapnowrap：默认值，不换行，如果当前行或列显示不下就看不到wrap：换行，换行/列显示wrap-reverse：换行，换的行在上面或左面flex-flow是flex-direction和flex-wrap的组合后的简写方式

justify-contentFlex项目在主轴上的对齐方式。flex-start：默认值，左/上对齐flex-end：右/下对齐center：居中对齐space-between：两端对齐，项目之间间隔相同space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

order项目的排列顺序。数值越小，排列越靠前，默认为0。以上属性是作用在父元素，即使用Flex布局的容器上的，下面的属性作用在Flex项目上面

align-itemsFlex项目在交叉轴上的对齐方式。flex-start：上/左对齐flex-end：下/右对齐center：居中对齐baseline：Flex项目的第一行文字的基线对齐stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度（横向排列）或宽度（纵向排列）。

flex-grow定义Flex项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。这个属性非常重要，经常用于让Flex项目平均分配或按比例分配剩余空间，适应屏幕大小的同时排列整齐。

flex-shrink定义Flex项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basisflex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为auto，即项目的本来大小。

flexflex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为01auto。后两个属性可选。通常会用这个属性作为flex-grow属性的简写，来实现Flex项目平均分配或按比例分配剩余空间。推荐使用这种简写的方式，后面的项目全部采用这种方式。

flexflex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为01auto。后两个属性可选。通常会用这个属性作为flex-grow属性的简写，来实现Flex项目平均分配或按比例分配剩余空间。推荐使用这种简写的方式，后面的项目全部采用这种方式。

align-selfalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

测试Flex项目属性

测试Flex项目属性

条件渲染条件渲染在wxml文件里面使用wx:if、wx:elif、wx:else等关键字，判断是否要渲染某些代码块。

列表渲染列表渲染使用wx:for作为关键字，绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

微信小程序开发与团队合作微信小程序开发中，项目组成员通常包括产品组、设计组、开发组和测试组。微信小程序的开发流程通