微信小程序入门：初步了解官方文档（循环、视图容器、icon、image）
今天是正式学习微信小程序的第一天，学习微信小程序先从了解官方文档开始吧。
这一节开始学习微信小程序官方文档中的for循环、视图容器、icon、image等。
打开index文件夹下的index.wxml，接下来可以开始我们的表演啦。
1.使用for循环打印数组、打印九九乘法表、打印n遍同样的话
效果如下：
源码如下：
<!--for循环实例-->
<view wx:for="{{[1,2,3,4,5,6]}}">
{{item}}
</view>
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
<view wx:if="{{i<=j}}">
{{i}}x{{j}} = {{i * j}}
</view>
</view>
</view>
<block wx:for="{{[1, 2, 3]}}">
<view>come on</view>
<view>加油</view>
</block>
2.视图容器
效果如下：
注意：若想1、2、3竖着排列，需要经index.wxml中的flex-direction:row改为flex-direction:column
源码如下：
<!--视图容器的例子-->
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="display:flex;flex-direction:row;">
<!--上一行中，记得加style="display:flex;否则横着排列时会有点小问题-->
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
.flex-item{
width:80px;
height:80px;
text-align: center;/*水平居中*/
line-height: 80px;/*垂直居中*/
}
.bc_green{
background-color: green;
height:80px;
}
.bc_red{
background-color: red;
}
.bc_blue{
background-color: blue;
}
3.微信小程序中的icon
（1）各种icon（类似于原生控件）
错误效果如下：
正确效果如下：
注意：写icon既可以像第45行那样写，也可以像第46行那样。
上图小的蓝色的（中间还有一个红色的）icon代码分别如第48-56行代码所示。
源码如下：
<!--icon的例子，success, success_no_circle, info, warn, waiting, cancel, download, search, clear-->
<icon type="success" size="40" color="{{item}}" />
<icon type="success" size="40" color="{{item}}"></icon>
<icon type="success" size="40" color="red"></icon>
<icon type="success" size="30" color="blue"></icon>
<icon type="success_no_circle" size="30" color="blue"></icon>
<icon type="info" size="30" color="blue"></icon>
<icon type="warn" size="30" color="blue"></icon>
<icon type="waiting" size="30" color="red"></icon>
<icon type="cancel" size="30" color="blue"></icon>
<icon type="download" size="30" color="blue"></icon>
<icon type="search" size="30" color="blue"></icon>
<icon type="clear" size="30" color="blue"></icon>
（2）使用循环生成从大到小排列的icon
效果如下：
源码如下：
<!--使用循环生成从大到小排列的icon-->
<view>
<block wx:for="{{[50,40,30,20,10]}}">
<icon type="search" size="{{item}}" color="black"></icon>
</block>
</view>
4.在小程序中引入图片（image）
效果如下：
注意：在官方文档中图片的mode有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。详情见https://developers.weixin.qq.com/miniprogram/dev/component/image.html
源码如下：
<!--图片使用src填写路径引入-->
<view>
<image style="width:200px; height:200px; background-color:red;" src="/pages/images/lovebefore.png"></image>
</view>
<!--也可以用链接的形式引入外部图片-->
<view>
<image style="width:200px; height:200px;" src="https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png"></image>
</view>
本文参考：
（1）小程序开发官方文档https://developers.weixin.qq.com/miniprogram/dev/component/
（2）零基础都会微信小程序人人学习到app实战（基础篇）