前端开发系列095-小程序篇之小程序框架基础组件(一)

本文介绍小程序框架中为我们提供的组件，还专门对view、text、image等组件的基本使用进行了说明，此外还补充了为标签设置样式的几种方式并提供综合案例。

1.0 组件

组件就是控件或者说标签。

小程序官方为我们提供了各种各样的组件，按照类型来划分可以分成：视图容器组件、基础内容组件、表单组件、导航组件、多媒体组件、地图组件和画布组件共七类30种。

小程序中的组件和HTML中的元素差不多，一个组件是指从组件开始标签到结束标签的所有代码，因为平台的差异性所以小程序中的组件可能会被转译为不同端对应的代码，所以在进行小程序开发的时候不能使用除上述组件之外的标签。

组件的定义

>❏  组件是视图层的基本组成单元。
>❏  组件会自带一些功能和微信风格的样式。
>❏  组件通常包括开始标签和结束标签、用来修饰该组件的属性以及两个标签中间的内容。

组件的属性

组件可以拥有属性，属性用于对组件进行配置。
组件的属性可以分为所有组件都拥有的共同属性和某些组件才有的特定属性。
组件的属性只能用在开始标签或者是单个自闭合标签身上，不能用于结束标签。
组件中可以设置多个属性，属性具有属性名称和属性值两部分内容，组件的属性名称都是小写。

所有组件都拥有的共同属性

✧ id   组件的唯一标识，保持整个页面唯一。

✧ style   同HTML中的style一致，用来动态设置组件的内联样式。

✧ class   组件中的样式类，可以在WXSS文件中通过类选择器来选择标签设置样式。

✧ hidden   组件是否显示，默认所有组件均显示可通过设置该属性值为false隐藏组件。

✧ bind../catch..   用于绑定逻辑层事件的属性，其中bind为冒泡事件，catch为非冒泡事件。

✧ data-   自定义属性，事件触发时会发送给事件处理函数，函数中可通过datasl来获取对应的值。

2.0 view组件

view组件是视图容器组件的一种，属于块级组件(标签)。

view组件类似于HTML中的div标签，在小程序开发中布局展示，是小程序界面布局中最常用的UI组件，任何一种复杂的布局都可以通过嵌套view组件设置组件的样式来实现。

下面列出view组件的主要属性

hover	                    是否启动点击态，默认为false。
hover-start-time          标签按下后多久出现点击态，默认为50毫秒。		
hover-stay-time           手指松开后点击态的保留时间，默认为400毫秒。
hover-class               标签被按下去的样式，默认值为`none`表示没有点击效果。

view组件的使用示例

//.wxml中的代码
<view hover-class='view-hover-class' hover-start-time='1000'>我是第1个View组件</view>
<view hidden='{{true}}'>我是第2个View组件</view>
<view>我是第3个View组件</view>
<view>我是第4个View组件</view>

//.wxss中的代码
view{
  padding: 30rpx;
  text-align: center;
  background: #195;
  margin: 20rpx;
  color: #fff;
}

.view-hover-class
{
  background: #9e2
}

给标签设置样式

❏ 内联样式设置。
❏ 页面样式设置。
❏ 外部样式设置。
❏ 全局样式设置。

给view标签设置样式的四种方式代码示例

//.wxml文件
<!-- 1.0 内联样式 -->
<view style = "width:300px;font-size:40rpx;background:#195;">我是第1个View组件</view>

<!-- 2.0 页面样式文件设置 -->
<view class='pageStyleView'>我是第2个View组件</view>

<!-- 3.0 引入外部样式文件设置 -->
<view class='outPageViewClass'>我是第3个View组件</view>

<!-- 4.0 使用全局样式文件设置 -->
<view class='globalViewClass'>我是第4个View组件</view>
<view>我是第5个View组件</view>

//.wxss文件
@import "../../style/demo.wxss";

.pageStyleView
{
    background: #830;
    color: #fff;
}

view
{
    margin: 30rpx;
}

//demo.wxss文件
.outPageViewClass
{
  background: yellow;
  color: red;
  border: 1px solid #000;
  width: 60%
}

//app.wxss文件
.globalViewClass{
  background: #503;
  color: #fff;
  font-family: "KaiTi";
  font-size: 50rpx;
  width: 90%
}

3.0 image组件

小程序提供了image组件来处理图片，同HTML中的img标签类型。

下面列出image组件的主要属性

binderror     加载图片失败时，发布到 AppService 的事件名。
bindload      加载图片完毕时，发布到 AppService 的事件名。
src           图片资源地址，可以是本地图片的相对路径也可以是URL地址。
mode          图片的缩放和剪裁模式，image组件中供提供了4中缩放和9种剪裁模式。		
lazy-load     图片懒加载，布尔类型默认false，只对page与scroll-view下的image有效。

这里列出image组件中mode属性的取值范围

裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片短边能完全显示。图片通常只在水平或垂直方向是完整的。

注意：image组件默认宽度300px、高度225px ，二维码/小程序码图片不支持长按识别。

4.0 text组件

text组件用于文本内容的展示。

下面列出text组件的主要属性

decode        是否解码。
selectable    文本是否可选。
space         显示连续空格的方式，可选值有ensp、emsp和nbsp[0.5|1|自适应]

text组件注意点说明

[01] text组件属于内联元素。
[02] text组件的内部只能嵌套text标签。
[03] 小程序中只有text组件支持长按选中。

这里给出text组件使用示例

<text>我是text标签01\n</text>
<text selectable='true'>我是text标签02\n</text>
<text decode='true'>我是text标签03&nbsp;嘻嘻\n</text>

<text decode='false'>解码&nbsp;嘻嘻&nbsp;(空格) &lt;(小于) &gt;(大于)
 &amp;(&) &apos;(') &ensp;(半角空格) &emsp;(全角空格)\n</text>

<text decode='{{false}}'>解码&nbsp;嘻嘻&nbsp;(空格) &lt;(小于) &gt;(大于)
&amp;(&) &apos;(') &ensp;(半角空格) &emsp;(全角空格)\n</text>

设置让标签隐藏的N中方式

wx:if         设置为true则显示(懒加载的)
display       设置为none，不占位也不显示
visibility:   设置为hidden，占位但是不显示
hidden        默认不设置该属性那么就是显示的  不占位也不显示

代码示例

<text hidden='true'>我是text标签05\n</text>
<text style='display:none;'>我是text标签06\n</text>
<text wx:if='{{true}}'>我是text标签07\n</text>
<text style='visibility:hidden'>我是text标签08\n</text>

5.0 综合案例

这里给出综合案例的目标效果和实现代码

//wxml结构文件的内容
<view class='info-view'>
<view class='content info-view-left'>
<text class='info-name'>杨勇嘻哈</text>
<image class='info-edit' src='../../images/编辑.png' bindtap='editClick'></image>
<text class='info-description'>梧州学院，定制您的成功人生。</text>

</view>
<view class='content info-view-right'>
<image src='https://wx.qlogo.cn/mmopen/vi_324a6p....Yd2FZVJSw/132'></image>
</view>
</view>

//wxss样式文件的内容
.info-view
{
  width: 100%;
  height: 210rpx;
  line-height: 220rpx;
  background: #000;
}

.content{
  top: 30rpx;
  height: 150rpx;
  line-height: 150rpx;
  position: absolute;
  color: #fff;
}

.info-view-left
{
  left: 40rpx;
  width: 400rpx;
}

.info-view-right
{
  right: 40rpx;
  width: 150rpx;
}

.info-name
{
  display: block;
  width: 200rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 45rpx;
}

.info-edit
{
  display: block;
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  left: 220rpx;
  top: 25rpx;
}

.info-description
{
  display: block;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 30rpx;
}

.info-view-right image
{
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-top: 15rpx;
  margin-left: 15rpx;
}

6.0 第三方UI组件库介绍

wx-charts [stars 2500+]
微信小程序图表charts组件

iview-weapp [stars 2400+]
高质量的微信小程序 UI 组件库
官网和文档地址

vant-weapp [stars 6500+]
轻量、可靠的小程序 UI 组件库。
官网和文档地址

wux-weapp[stars 2000+]
微信小程序自定义 UI 组件
官网和文档地址

weui-wxss [stars 7000+]
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，包含button、cell、dialog、 progress、 toast、article、icon等各式元素。
官网和文档地址