微信小程序之常用组件

介绍:今天继续接着昨天的学习,学习一下常用组件,常用组件比较多,具体详细大家看后面的文章呦

常用组件

重点讲解⼩程序中常⽤的布局组件
view,text,rich–text,button,image,navigator,icon,swiper,radio,checkbox。 等

代替 原来的 div 标签

WXML中写入

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

2. text

介绍:

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

//在WXML中写入
 <text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

3. image

介绍

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

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

4. swiper

效果图

常用属性

swiper-item

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

5. navigator

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

open-type有效值:

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')
}})

nodes属性

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

⽂本节点：type = text

注意:

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

7. 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
4. 实战

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>

9. radio

介绍:可以通过color 属性来修改颜色

注意:需要搭配 radio-group ⼀起使⽤

radio-group

介绍:

单项选择器，内部由多个 radio 组成。

10. checkbox

介绍:

可以通过 color属性来修改颜色

checkbox-group

多项选择器，内部由多个checkbox组成

总结: 今天学习了常用组件,常用组件是小程序的重中之重,每个组件都有特别多的属性,大家学习的时候一定要小心,好的今天的讲解就结束了,各位明天见

最后作者创作不易,如果文章对你有帮助的话,记得留下你的点赞和关注呦