微信小程序组件参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/
微信开发者工具下载网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序开发指南：https://developers.weixin.qq.com/miniprogram/dev/framework/
小程序框架参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/
一、小程序的宿主环境——组件
1、常用的视图容器类组件
（1）view 普通视图区域，类似于HTML中的div，是一个块级元素，常用来实现页面的布局效果。
（2）scroll-view 可滚动的视图区域，常用来实现滚动列表效果
（3）swiper和swiper-item 轮播图容器组件和轮播图item组件
2、view组件的基本使用
（1）flex横向布局效果
.wxml文件（结构）：
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
.wxss文件（样式）：
.container1 view{
width:100px;
height:100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: aqua;
}
.container1 view:nth-child(2){
background-color:blue;
}
.container1 view:nth-child(3){
background-color: red;
}
.container1{
display: flex;//横向布局
justify-content: space-around; //分散对齐}
3、scroll-view组件的基本使用
wxml文件：
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss文件：
.container1 view{
width:100px;
height:100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: aqua;
}
.container1 view:nth-child(2){
background-color:blue;
}
.container1 view:nth-child(3){
background-color: red;
}
.container1{
border: 1px solid red;
/*给scroll-view固定高度*/
height: 120px;
width: 100px;
}
纵向滚动：
4、swiper和swiper-item组件的基本使用
实现轮播图，一个swiper-item是一个轮播图(左右拖动）
wxml文件：
<!--轮播图的结构-->
<swiper>
<!--第一个轮播图-->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!--第二个轮播图-->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!--第三个轮播图-->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
添加class=”swiper-container”
wxss文件：
/*轮播图的样式*/
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
.wxss文件中添加背景颜色：（注意，前面没有.）
swiper-item:nth-child(1) .item{
background-color: aqua;
}
swiper-item:nth-child(2) .item{
background-color: red;
}
swiper-item:nth-child(3) .item{
background-color: blueviolet;
}
拖动效果不太明显，会有“拉不动”的感觉，从view右下角直接拉过去，直到实现。
5、swiper组件的常用属性
6、常用的基础内容组件 text、rich-text
（1）text
文本组件，类似于HTML中的span标签，是一个行内元素；
基本使用：通过text组件的selectable属性，实现长按选中文本内容的效果；
预览，手机上选中会出现复制、全选。
（2）rich-text
富文本组件，支持把HTML字符串渲染为WXML结构
通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构。
7、button和image组件的基本用法
（1）button 按钮组件，功能比HTML中的button丰富，通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
wxml文件中：
<!--通过type属性指定按钮颜色类型-->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!--size="mini" 小尺寸按钮-->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!--plain 镂空按钮-->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
app.json文件中"style": "v2",控制按钮样式（v2表示新版样式）：
我删掉代码样式也没有改变，可能现在已经默认v2版本了吧。
（2）image 图片组件，image组件默认宽度约300px、高度约240px
新建image文件夹，放入图片，点击图片查看路径
插入图片：路径与上图一样
<!--插入图片-->
<image src="/pages/image/1.jpg"></image>
image的mode属性：
image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：
<!--aspectFit和aspectFull效果演示-->
<image src="/pages/image/1.jpg" mode="aspectFit"></image>
<image src="/pages/image/1.jpg" mode="aspectFull"></image>
<!--heightFix和widthFix效果演示-->
<image src="/pages/image/1.jpg" mode="heightFix"></image>
<image src="/pages/image/2.jpg" mode="widthFix"></image>
（3）navigator
页面导航组件、类似于HTML中的a链接
二、小程序的宿主环境-API
小程序API网址：https://developers.weixin.qq.com/miniprogram/dev/api/
小程序官方把API分为3类：
（1）事件监听API
特点：以on开头，用来监听某些事件的触发
举例：wx.onWindowResize(funvtion callback)监听窗口尺寸变化的事件
（2）同步API
特点：以Sync结尾的API都是同步API，同步API的执行结果，可以通过函数返回值直接获取吗，如果执行出错会抛出异常
举例：wx.setStorageSync(‘key’,’value’)向本地存储中写入内容。
（3）异步API
特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
举例：wx.request()发起网络数据请求，通过success回调函数接收数据。
