请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

【微信小程序开发】第 7 课 - 小程序的常用组件

2023-07-13

          欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。


目录

1、缘起

2、小程序中组件的分类

3、常用的视图容器类组件 

3.1、view 组件

3.2、scroll - view 组件

3.3、swiper 和 swiper-item 组件

3.4、text  组件的基本使用

3.5、rich-text 组件

3.6、button 组件 

3.7、image 组件

4、总结 


1、缘起

        小程序的组件包括视图容器、文本、图片、按钮、输入框、列表、轮播图、导航栏、下拉菜单和弹窗等,用于构建小程序界面和实现交互功能。


2、小程序中组件的分类

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

①  视图容器

②  基础内容

③  表单组件

④  导航组件

  媒体组件

  map 地图组件

  canvas  画布组件

⑧  开放能力

⑨  无障碍访问

注:上述标红的文字是工作中常用的四大组件。


3、常用的视图容器类组件 

3.1、view 组件

①  普通视图区域

②  类似于 HTML 中的 div ,是一个块级元素

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

示例代码:

.wxml 

<!--pages/list/list.wxml-->
<view class = "square">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

.wxss 

/* pages/list/list.wxss */
/* 后代选择器 */
.square view{
  width:100px;
  height:100px;
  text-align: center;

  /* 用于设置所选元素内文本的行高为100像素,这将使文本在元素的垂直中心位置垂直居中。 */
  line-height:100px; 
}

.square view:nth-child(1){
  background-color: lawngreen;
}

.square view:nth-child(2){
  background-color: #ffd700;
}

.square view:nth-child(3){
  background-color: #ed5736;
}

.square {
  display:flex;
  justify-content: space-around;
}


3.2、scroll - view 组件

(1)  可滚动的视图区域

(2)  常用来实现滚动列表效果

示例代码:

①  .wxml

<!--pages/list/list.wxml-->
<scroll-view class = "container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

        ①  scroll-y  属性:允许纵向滚动

        ②  scroll-x  属性:允许横向滚动

        ③  注意:使用竖向滚动时,必须给 scroll-view 一个固定的高度 

②  .wxss  

/* pages/list/list.wxss */
/* 后代选择器 */
.container1 view{
  width:100px;
  height:100px;
  text-align: center;

  /* 用于设置所选元素内文本的行高为100像素,这将使文本在元素的垂直中心位置垂直居中。 */
  line-height:100px; 
}

.container1 view:nth-child(1){
  background-color: lawngreen;
}

.container1 view:nth-child(2){
  background-color: #ffd700;
}

.container1 view:nth-child(3){
  background-color: #ed5736;
}

.container1 {
  border: 1px solid red;
  width:100px;
  height:150px;
}

注:把鼠标放在方块内上下拖动,就可以实现纵向滚动效果。 


3.3、swiper 和 swiper-item 组件

        在微信小程序中,swiper 和 swiper-item 组件用于 创建轮播图(Banner)效果

        Swiper 组件 是一个滑块容器,用于包裹 swiper-item 组件,实现整体的轮播功能 ;它的默认高度是 150px,它提供了一些配置属性和事件,用于控制轮播的行为和样式,例如:设置轮播间隔时间、设置是否自动播放、设置指示点样式等。

        Swiper-item 组件 是 Swiper 组件的子组件,用于定义每个轮播项的内容。每个 swiper-item 组件代表了一个单独的轮播项,可以包含图片、文字、按钮等其他组件或内容,它的宽度和高度为 100%*100%。

        通过在 Swiper 组件中包裹多个 Swiper-item 组件,可以创建一个可以左右滑动的轮播图,用户可以通过手势或指示点进行切换。

swiper 组件的基本属性 

示例代码:

①  .wxml

<!--pages/list/list.wxml-->
<!-- indicator-dots  属性:显示面板指示点 -->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
  <!-- 第1项 -->
  <swiper-item>
      <view class="item">A</view>
  </swiper-item>

  <!-- 第2项 -->
  <swiper-item>
      <view class="item">B</view>
  </swiper-item>

  <!-- 第3项 -->
  <swiper-item>
      <view class="item">C</view>
  </swiper-item>
</swiper>

②  .wxss 

/* pages/list/list.wxss */
.swiper-container{
  height:150px; /*轮播图容器的高度*/
}

.item {
  height:100%;
  line-height:150px;
  text-align:center;
}

swiper-item:nth-child(1) .item {
  background-color:lightgreen;
}

swiper-item:nth-child(2) .item {
  background-color:#ed5736;
}

swiper-item:nth-child(3) .item {
  background-color:#ffd700;
}

注:上述代码就可以实现一个轮播图的效果。 

        在上述代码中,我们把轮播图容器的高度设置为 150px ,其实,微信小程序的轮播图容器 没有固定的最大高度限制。轮播图容器的高度可以根据实际需求进行设置,可以根据图片数量、图片大小以及布局设计等因素进行调整。通常情况下,轮播图容器的高度会根据页面的整体设计来确定,以保证页面的美观和用户体验。建议根据具体需求进行设计和调整,确保图片在容器内能够正常显示且不失真。 


3.4、text  组件的基本使用

        ①  文本组件

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

作用:通过 text 组件的 selectable 属性,实现长按选中文本内容的效果

示例代码: 

<!--pages/list/list.wxml-->
<view>
  长按选中文本内容的效果 
  <text selectable>Hello Applet</text>
</view>

        在模拟器中,不能实现长按选中文本内容的效果,只能在手机上预览,然后查看长按选中文本内容的效果。


3.5、rich-text 组件

①  富文本组件

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

作用:通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构

示例代码: 

<!--pages/list/list.wxml-->
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>


3.6、button 组件 

①  按钮组件

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

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

button 按钮的基本使用 

示例代码:

<!--pages/list/list.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>


3.7、image 组件

        image 组件是一个有默认大小(320*240)的“盒子”。 

①  image  组件的 mode 属性 

        image 组件的 mode 属性 用来指定图片的 裁剪缩放 模式,常用的 mode 属性值如下: 

②  image 组件的基本使用

示例代码: 

.wxml 

<!-- image 空图片 -->
<image></image>

<image src="/images/Photo13.jpg"></image>

.wxss 

image {
  border: 1px solid red
}

注:通过边框线证明 image 有默认的宽和高 

注:上述代码和图片展示 image 的 mode 默认属性效果,mode 的其他属性,请各位读者自行体验查看。


4、总结 

        本期的分享总结就到这里了,如果有疑问的小伙伴儿,我们在评论区交流嗷~~~,笔者必回,我们下期再见啦 ! 

博客中难免存在疏漏和错误之处,皆归因于作者水平有限,诚请各位读者不吝指正 !

< 微信小程序开发 >  专栏系列持续更新 ,欢迎订阅关注 !

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部