微信小程序开发组件和API（附源代码演示）

微信小程序组件参考文档：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回调函数接收数据。