写在前面

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
官方把小程序的组件分为了9大类，分别是:

 1.视图容器    2.基础内容    3.表单组件        4.导航组件    5.媒体组件    6.地图组件        7.画布组件    8.开放能力    9.无障碍访问

现只举例部分常用组件，大部分可以看官方文档组件部分，不再做过多赘述。

文章目录

写在前面
1. view 组件
2. text 组件
3. image 组件
4. button 组件
5. swiper 和 swiper-item 组件

1. view 组件

在小程序中,通常使用<view/>代替<div/>作为容器来做布局

<!--pages/welcome/welcome.wxml-->
<view class="container"><image class="avatar" src="/images/测试.jpg"></image><text>Hello</text><!-- <button>微信小程序</button> --><view><text>微信小程序</text></view>
</view>

2. text 组件

⽂本标签
只能嵌套text
⻓按⽂字可以复制（只有该标签有这个功能）–>selectable
可以对如: 空格回车  进⾏编码 -->decode

属性名	类型	默认值	说明
selectable	Boolean	false	⽂本是否可选
decode	Boolean	false	是否解码

例：通过 text 组件的user-select 属性，可以实现长按选中文本内容的效果。

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>

3. image 组件

图⽚标签，image组件默认宽度320px、⾼度240px,所以如果不进行宽高设置,不会进行自适应
⽀持懒加载

属性名	类型	默认值	说明
src	String		图⽚资源地址
mode	String	`scaleToFill`	图⽚裁剪、缩放的模式
lazy-load	Boolean	false	图⽚懒加载

mode模式列举:

模式	值	说明
缩放	scaleToFill	不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image 元素
缩放	aspectFit	保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。
缩放	aspectFill	保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来
缩放	widthFix	宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
裁剪	top	不缩放图⽚，只显⽰图⽚的顶部区域
裁剪	bottom	不缩放图⽚，只显⽰图⽚的底部区域
裁剪	center	不缩放图⽚，只显⽰图⽚的中间区域
裁剪	left	不缩放图⽚，只显⽰图⽚的左边区域
裁剪	right	不缩放图⽚，只显⽰图⽚的右边区域
裁剪	`top left`、`top right` `bottom left`、`bottom right`	不缩放图⽚,只显示值所指向区域

代码示例:

  <image class="avatar"  mode="aspectFit" src="/images/测试.jpg"></image>

4. button 组件

小程序中的按钮组件类似于HTML中的按钮组件，同时可以调用微信提供的丰富的功能，例如：获取用户信息，获取用户授权，转发等。

例：使用type属性设置按钮的类型：

<button >默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

例：使用size属性设置按钮的大小：

<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

例：使用plain属性设置镂空按钮：

<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>

5. swiper 和 swiper-item 组件

利用这两个组件可以实现轮播图效果：

wxml代码:

<swiper class="swiper-container">
<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>

wxss代码：

.swiper-container{height:150px;
}
.item{height:100%;line-height: 150px;text-align: center;
}swiper-item:nth-child(1) .item{background-color: aquamarine;
}
swiper-item:nth-child(2) .item{background-color: azure;
}
swiper-item:nth-child(3) .item{background-color: darkorange;
}

实现效果：

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	是否采用衔接滑动

例：显示面板指示色：

<swiper class="swiper-container" indicator-dots="true" >

例：指定指示点颜色和当前选中知识点颜色：

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red">

例：设置自动切换，间隔设置为1s：

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000">

采用衔接滑动：

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular>

【微信小程序】一文带你吃透开发中的常用组件相关推荐

字体设计符号组合多功能微信小程序源码带流量主
这是一款主打字体设计,符号组合等多模板功能的一款微信小程序源码内含多种功能,比如: 花式字体设计表情字体组合设计翅膀字体组合火星文一键生成符号库空白名称彩色网名等等还有很多,所以就不一 ...
校园跑腿微信小程序跑腿同学带直播新版源码
校园跑腿微信小程序跑腿同学带直播新版源码适用类型微信小程序测试环境:系统环境:CentOS Linux 7.6.1810 (Core).运行环境:宝塔 Linux v7.0.3(专业版).网站环 ...
如何去掉微信小程序的自带头部，自定义创建？
一.如何去掉微信小程序的自带头部,自定义创建? 在进行微信小程序的开发中微信小程序的头部会默认生成一个头部,用来展示每个pages页面标题,可以在app.json中的window中进行配置,但是它自身 ...
多接口网课题库等综合搜题微信小程序源码带流量主
多接口网课题库等综合搜题微信小程序源码带流量主,网课搜题小程序下载:https://download.csdn.net/download/qq_45102995/87785387
学习成长之路（初章三个月建成微信小程序商城、ArcEngine C# GIS开发入门）
学习成长之路(初章 ) 三个月建成微信小程序商城 .ArcEngine C# GIS开发入门自我简介先简单介绍一下,我是Domen,是一个彻彻底底的新手 . 大一大学大一没好好学习,搞这搞那 ...
微信小程序手把手教你实现类似Android中ViewPager控件效果
微信小程序手把手教你实现类似Android中ViewPager控件效果前言需求分析头部TAB 滑动的内容部分最终版本尾巴前言在做Android开发的时候,ViewPager是开发者使用频 ...
对战微信小程序，探究快应用的开发之路【一】
最近华为牵头国内几大厂商推出了Quikapp快应用,与微信小程序展开了入口之争,作为走在时代最前沿的程序猿,不了解一下,不动手操作一下,都对不起时代赋予我们的责任感了.来,跟我一起来探究探究快应用的开 ...
php阅读器开发,微信小程序阅读器的简单实例开发
这篇文章主要介绍微信小程序阅读器的简单实例开发的相关资料,需要的朋友可以参考下今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 首先先说下 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...

【微信小程序】一文带你吃透开发中的常用组件