🌊 作者主页：海拥
🌊 简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十
🌊 粉丝福利：粉丝群 每周送六本书，不定期送各种小礼品

常见组件

重点讲解微信小程序中常见的布局组件
view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等

一、view

view 代替 原来的 div 标签

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

二、text

text:

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制（只有该标签有这个功能）

代码

  <text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

三、image

image:

1. 图片标签，image组件默认宽度320px、高度240px
2. 支持懒加载

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9
种是裁剪模式。

四、swiper

swiper: 微信内置轮播图组件

默认宽度 100% 高度 150px

1. swiper

滑块视图容器。

2. swiper-item

滑块
默认宽度和高度都是100%

五、navigator

navigator:
导航组件 类似超链接标签

open-type 有效值：

六、rich-text

rich-text:
富文本标签
可以将字符串解析成 对应标签，类似 vue中 v–html 功能

代码:

JAVASCRIPT
WXML
const htmlSnip =
`<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`

const nodeSnip =
`Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})
`

Page({
  onShareAppMessage() {
    return {
      title: 'rich-text',
      path: 'page/component/pages/rich-text/rich-text'
    }
  },

  data: {
    htmlSnip,
    nodeSnip,
    renderedByHtml: false,
    renderedByNode: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #1AAD19;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you\'re gonna get.'
      }]
    }]
  },
  renderHtml() {
    this.setData({
      renderedByHtml: true
    })
  },
  renderNode() {
    this.setData({
      renderedByNode: true
    })
  },
  enterCode(e) {
    console.log(e.detail.value)
    this.setData({
      htmlSnip: e.detail.value
    })
  }
})

nodes属性

nodes 属性⽀持 字符串 和 标签节点数组

文本节点：type = text

Bug & Tip

• nodes nodes 不推荐使用 String 类型，性能会有所下降。
• rich–text 组件内屏蔽所有节点的事件。
• attrs 属性不支持id ，支持class 。
• name 属性大小写不敏感。
• 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
• img 标签仅支持网络图片。

七、 button

button:

代码:

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

size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

open-type 的 contact的实现流程

1. 将微信小程序 的 appid 由测试号改为 ⾃⼰的 appid
2. 登录微信小程序官网，添加 客服客服 – 微信微信
3. 为了方便演示，可以准备两个账号
   (1). 普通用户 A
   (2). 客服-微信 B

八、 icon

icon:
图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

代码:
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>

九、radio

radio:
可以通过 color属性来修改颜色
需要搭配 radio-group 一起使用

代码:
js

Page({
  onShareAppMessage() {
    return {
      title: 'radio',
      path: 'page/component/pages/radio/radio'
    }
  },

  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'},
    ]
  },

  radioChange(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)

    const items = this.data.items
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value === e.detail.value
    }

    this.setData({
      items
    })
  }
})

wxml:

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">默认样式</view>
    <label class="radio">
      <radio value="r1" checked="true"/>选中
    </label>
    <label class="radio">
      <radio value="r2" />未选中
    </label>
  </view>


  <view class="page-section">
    <view class="page-section-title">推荐展示样式</view>
    <view class="weui-cells weui-cells_after-title">
      <radio-group bindchange="radioChange">
        <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

          <view class="weui-cell__hd">
            <radio value="{{item.value}}" checked="true"/>
          </view>
          <view class="weui-cell__bd">{{item.name}}</view>
        </label>
      </radio-group>
    </view>
  </view>
</view>

十、checkbox

checkbox:
可以通过 color属性来修改颜色
需要搭配 checkbox-group 一起使用

总结

以上就是本节要讲的内容，本文仅仅简单介绍了微信小程序中常用组件的使用，后续还会继续补充