本文已参与「新人创作礼」活动，一起开启掘金创作之路。
大家好，本期主要给大家讲解的是如何引入iviewWeapp框架，引入后如何布局和使用！
废话不多说，直接进入主题！
iviewWeapp框架官方文档地址：weapp.iviewui.com/docs/guide/…
接下来我们将框架引入到小程序里：
-
下载iviewWeapp框架到本地，官方提供的是GitHub地址，由于网络首先等等一系列因素，在这里给大家提供码云地址，方便大家下载：gitee.com/mirrors/iVi…
-
下载下来后将dist文件夹放入到小程序的根目录，然后我们就可以进行引入了，我们该如何引入进来，开始使用呢？大家继续往下看
-
首先打开小程序的app.json文件，将下列代码添加进去，这个段代码是引入自定义组件：
"usingComponents": {
}
- 根据自己需要在
usingComponents里写入组件名称和组件路径，例如引入button组件，代码如下：
"usingComponents": {
"i-button": "../../dist/button/index"
}
至此，我们就已经将iviewWeapp引入到小程序里了，根据第四步的组件引入，在页面中或者交互中直接调用即可！
那么引入了之后我们怎么布局呢？首先我们需要根据官方文档找到栅格布局，然后在usingComponents中加入i-row和i-col组件，接着在前端调用即可，具体怎么实现呢？
- 添加组件名称和路径
"usingComponents": {
"i-row": "../../dist/row/index",
"i-col": "../../dist/col/index"
}
- 首先先看一下对应组件的说明：
- 使用
i-row在水平方向创建一行 - 将一组
i-col插入在i-row中 - 在每个
i-col中，键入自己的内容 - 通过设置
i-col的span参数，指定跨越的范围，其范围是1到24 - 每个
i-row中的i-col总和应该为24
- 知道了组件含以后，我们随便进入一个页面，进行布局，例如：
<i-row>
<i-col span="8" i-class="col-class">col-8</i-col>
<i-col span="8" i-class="col-class">col-8</i-col>
<i-col span="8" i-class="col-class">col-8</i-col>
</i-row>
因为一行分布为24，每一个i-col的span里填写的8，三个i-col刚好是24，所以这一行刚刚好被填满，三个i-col的长度是一样的
有了这样的规则，大家就可以按照自己的页面样式进行随意的布局了，当然还有很多组件的运用，在下期中会给大家讲，本期的内容到此就结束啦，拜~
