小程序开发：常用组件详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_50889870/article/details/118195211

本文介绍了小程序开发中常见的组件，如view、text、image、swiper、navigator、rich-text、button、icon、radio和checkbox，详细讲解了它们的用途、特性及属性设置，帮助初学者理解小程序布局和交互的基本元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.常见组件

重点讲解⼩程序中常⽤的布局组件

view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox。 等

1.1 view
代替原来的 div 标签

<view hover-class="h-class">
 点击我试试
  </view>

1.2 text

⽂本标签
只能嵌套text
⻓按⽂字可以复制（只有该标签有这个功能）
可以对空格回⻋进⾏编码

1.3 image

图⽚标签，image组件默认宽度320px、⾼度240px
⽀持懒加载

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。
在这里插入图片描述
1.4 swiper

微信内置轮播图组件

在这里插入图片描述
默认宽度 100% ⾼度 150px

1.4.1 swiper-item

滑块

默认宽度和⾼度都是100%
1.5 navigator

导航组件类似超链接标签

在这里插入图片描述
open-type 有效值：

1.6 rich-text

富文本标签

可以将字符串解析成对应标签，类似 vue中 v–html 功能
在这里插入图片描述
代码

// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

1.6.1 nodes属性
nodes 属性⽀持字符串和标签节点数组
在这里插入图片描述
⽂本节点：type = text

nodes 不推荐使⽤ String 类型，性能会有所下降。
rich–text 组件内屏蔽所有节点的事件。
attrs 属性不⽀持 id ，⽀持 class 。
name 属性⼤⼩写不敏感。
如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
img 标签仅⽀持⽹络图⽚。
1.7 button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

在这里插入图片描述
size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

open-type 的 contact的实现流程

将⼩程序的 appid 由测试号改为⾃⼰的 appid
登录微信⼩程序官⽹，添加客服 – 微信
为了⽅便演⽰，⽼师⾃⼰准备了两个账号
普通⽤⼾ A
客服-微信 B
就是⼲！
1.8 icon

代码:
js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }
})

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>