小程序 input 换行_【续】免费开发微信小程序教程【10~12节】

课程介绍：

    在本次内容中包含了10~12节。本节其中10和12节比较关键。

在第十节主要讲到了小程序开发当中常用的布局方法(flex布局)。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex容器有以下几个属性(就是最外层的盒子)：

第十节重点内容总结：

flex-direction　　容器内项目的排列方向(默认横向排列)　　flex-wrap　　    容器内项目换行方式flex-flow　　     以上两个属性的简写方式justify-content　 主轴上的对齐方式align-items　　   交叉轴上的对齐方式align-content　　 多根轴线的对齐方式

夜，结束了一天的喧嚣后安静下来，伴随着远路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。 常用选项

【flex-direction】 flex-direction: row  水平主轴由左向右排列 flex-direction: column  沿着垂直轴上下排列

【flex-wrap】flex-wrap：nowrap 默认不换行flex-wrap：wrap  换行

【justify-content】justify-content：flex-strat  在主轴上由左或者上开始排列justify-content：flex-end    在主轴上由右或者下开始排列justify-content：center     在主轴上居中排列justify-content：space-between 在主轴上左右两端或者上下两端开始排列justify-content：space-around 每个项目两侧的间隔相等

【align-items】align-items:flex-strat  交叉轴的起点对齐align-items: flex-end  交叉轴的终点对齐align-items: center    交叉轴的中点对齐align-items: baseline  项目的第一行文字的基线对齐align-items:stretch   如果项目未设置高度或设为auto，将占满整个容器的高度

第十二节：组件化开发重点总结

组件：目的是代码重用，功能相对单一或者独立。

在微信组件化开发步骤：

1.在根目录创建component文件夹

2.为了便于区分在component目录下再新建文件夹

3.在此目录下右键新建component，并起名

4.在新建组建的.js文件中声明此文件为组建，"component":true

{  "component": true,  "usingComponents": {}}

5.将要把做成组建的代码块剪切到新建组建.wxml文件中

(比如视频中把index.wxml中的轮播图组件放在swiper.wxml组建中)

 class=   <swiper indicator-dots autoplay>     <swiper-item wx:for="{{indexSwiper}}" wx:key="index">       <image src="{{item.imgSrc}}">image>     swiper-item>   swiper> view>

6.在需要使用组件页面的json文件中给组件标签起名，并指定组件的正确路径

{  "navigationBarTitleText": "首页",  "usingComponents":{    "yswiper":"/component/swiper/swiper"  //yswiper是组件名，可以随便起名  }}

7.在需要使用组件页面的wxml文件中使用刚才引入的组件，并给分离出去的组件传值，如下：

8.最终在分类出去的组建中接受页面传递的值，如下：

第十课：初步认识flex布局

第十一课：组织分类数据

第十二课：组件化开发基础