📚小程序—组件

小程序中的组件是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。

📰组件的分类：(标红的为重点知识)

①视图容器        ②基础内容        ③表单组件        ④导航组件        ⑤媒体组件       ⑥map地图组件        ⑦canvas画布组件        ⑧开放能力        ⑨原生组件        ⑩无障碍访问、导航栏以及页面属性配置节点。  

原本的组件分为九大类现在分为十二大类，新增了原生组件的说明、导航栏以及页面属性配置节点，想了解更多组件的知识，推荐看一下 微信官方文档 对组件的说明。

📃视图容器类组件

名称                功能说明                                    名称        功能说明

cover-image 覆盖在原生组件之上的图片视图     page-container 页面容器

cover-view 覆盖在原生组件之上的文本视图     scroll-view        可滚动视图区域

match-media media query 匹配检测节点             share-element 共享元素

movable-area movable-view的可移动区域                swiper        滑块视图容器

movable-view 可移动的视图容器，在页面中可以拖拽滑动 view        视图容器

swiper-item 仅可放置在swiper组件中，宽高自动设置100%  

常用的视图容器类组件

① view

       ●普通视图区域

       ●类似于 HTML 中的div，是一个块级元素

       ●常用来实现页面的布局效果

② scroll-view

       ●可滚动的视图区域

       ●常用来实现滚动列表效果

③ swiper 和 swiper-item

       ●轮播图容器组件 和 轮播图 item 组件

view组件的使用（和web前端的 div 及其类似，招壶画瓢即可）

<!--pages/person/person.wxml--><viewclass="view">  我是相当于 div 的容器组件
<viewclass="content">大家想了解更多<span>微信小程序</span>可以关注一下作者</view><viewclass="content1">csdn搜索亦世凡华、哦</view></view>

/* pages/person/person.wxss */.view{
color: #f00;
text-align: center;
font-weight: bold;
}
.contentspan{
font-size: 1.5em;
color: #008c8c;
}
.content{
color: #0f0;
margin-top: 30px;
}
.content1{
margin-top: 30px;
color: #ffd345;
font-size: 25px;
}

scroll-view组件的使用 （实现纵向滚动效果）

<!-- scroll-y 属性：允许纵向滚动 --><!-- scroll-x 属性：允许横向滚动 --><!-- 注意：使用竖向滚动时，必须给scroll-view 一个固定的高度 --><scroll-viewclass="container1"scroll-x><view>手机</view><view>电脑</view><view>平板</view><view>键盘</view></scroll-view>

/* pages/person/person.wxss */.container1view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1view:nth-child(1){
background-color: #f00;
}
.container1view:nth-child(2){
background-color: #0f0;
}
.container1view:nth-child(3){
background-color: #00f;
}
.container1view:nth-child(4){
background-color: gold;
}
.container1{
border: 1pxsolidred;
width: 100px;
height: 200px;
}

微信小程序中 container 是有默认样式的，其中就会是display:flex不起作用，推荐写类名的时候要避免出现使用含义特殊样式的关键字，否则程序可能会出现一些 Bug。

swiper 和 swiper-item 组件的使用（实现轮播图的效果）

<!-- 轮播图区域 --><!-- indicator-dots 属性：显示面板指示点 --><swiperclass="swiper-container"indicator-dots><!-- 第一页 --><swiper-item><viewclass="item">手机</view></swiper-item><!-- 第二页 --><swiper-item><viewclass="item">电脑</view></swiper-item><!-- 第三页 --><swiper-item><viewclass="item">平板</view></swiper-item><!-- 第四页 --><swiper-item><viewclass="item">键盘</view></swiper-item></swiper>

/* pages/person/person.wxss */.swiper-container{
height: 150px; /* 轮播图容器的宽度 */}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: #f00;
}
swiper-item:nth-child(2) .item{
background-color: #0f0;
}
swiper-item:nth-child(3) .item{
background-color: #00f;
}
swiper-item:nth-child(4) .item{
background-color: #ff0;
}

swiper 组件常用属性介绍

属性                                   类型         默认值         说明

indicator-dots                 boolean          false  是否显示面板指示点

indicator-color                   color    rgba(0,0,0,.3)     指示点颜色

indicator-active-color           color       #000000  当前选中的指示点颜色

autoplay                         boolean           false  是否自动切换

interval                          number           5000  自动切换时间间隔

circular                          boolean           false  是否采用衔接滑动

根据上述属性可以做一个简单的动图，大家仔细看一下变化。

📜基础内容组件

常用的基础内容组件

① text        

 ●文本组件

       ●类似于 HTML 中的 span 标签，是一个行内元素

② rich-text

       ●富文本组件

       ●支持把 HTML 字符串渲染为 WXML 结构

text组件的使用（实现长按选中文本内容的效果）

官方文档以前使用的selectable已经废弃，现在使用user-select，这里了解一下即可。

<view>  进行手机号的复制：
<!-- 复制要加上 user-select 才行 --><textuser-select>13333333333</text></view>

rich-text组件的使用（把 HTML 字符串渲染为对应的 UI 结构）

<rich-textnodes="<h1 style='color:red'>我是h1标题</h1>"></rich-text>

📑其他常用组件

① button

       ●按钮组件

       ●功能比 HTML 中的 button 按钮丰富

       ●通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权等)

② image

       ●图片组件

       ●image组件的默认宽度约为 300px，高度约为 240px

button按钮的基本使用

<view>-------通过 type 指定按钮类型---------</view><button>默认按钮</button><buttontype="primary">主色调按钮</button><buttontype="warn">警告按钮</button><view>--------size="mini" 小尺寸按钮--------</view><buttonsize="mini">默认按钮</button><buttontype="primary"size="mini">主色调按钮</button><buttontype="warn"size="mini">警告按钮</button><view>------------plain 镂空按钮--------------</view><buttonsize="mini"plain="">普通按钮</button><buttontype="primary"size="mini"plain="">主色调按钮</button><buttontype="warn"size="mini"plain="">警告按钮</button>

image组件的基本使用

<!-- 空图片 --><image></image><!-- 图片 --><imagesrc="/images/1.jpeg"mode="aspectFill"></image>

image{
border: 1pxsolidred;
}

image组件中 mode 属性讲解

image组件中mode属性是用来指定图片的剪切和缩放模式，常用的mode属性如下：

mode值                                            说明

scaleToFill    (默认值)缩放模式，不保持纵横比缩放图片，使图片宽高完全拉伸至填满image元素

aspectFit    缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来

aspectFill    缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来

widthFix    缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix    缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

今天的讲解就到这，下期继续讲解认知小程序的开发 ！