9. 常见组件

重点讲解小程序中常用的布局组件

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

9.1 view

替换HTML中的 div 标签

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

9.2 text

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制（只有该标签有这个功能）
4. 可以对空格、回车进行编码

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

<text selectable="true">长按进行复制</text>
<text decode="true">测试是否编码--&nbsp;--1</text>

9.3 image

1. 图片标签，image组件默认宽度320px; 高度 240px;
2. image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
3. 支持懒加载lazy-load
   1. lazy-load会自己判断 当图片出现在视口的 上下 三屏的高度之内的时候，自己开始加载。

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

mode有效值：

mode有14中模式，其中5中的缩放模式，9种是剪裁模式。

模式	值	说明
缩放	scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
	aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。一般页面的轮播图常用这个模式
	aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。少用这个
	widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变，常用
	heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
剪裁模式	top	裁剪模式，不缩放图片，只显示图片的顶部区域
	bottom	裁剪模式，不缩放图片，只显示图片的底部区域
	center	裁剪模式，不缩放图片，只显示图片的中间区域
	left	裁剪模式，不缩放图片，只显示图片的左边区域
	right	裁剪模式，不缩放图片，只显示图片的右边区域
	top left	裁剪模式，不缩放图片，只显示图片的左上边区域
	top right	裁剪模式，不缩放图片，只显示图片的右上边区域
	bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
	bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

 eg：

<image src="//res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" alt=""/>

9.4 swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

<swiper 
  autoplay="true"
  circular="true" 
  interval="1000" 
  indicator-dots="true" 
  indicator-active-color="#fff" 
  next-margin="10px">
  <swiper-item>
    <image mode="widthFix" src="//img.alicdn.com/imgextra/i2/2206686532409/O1CN01gxx8l61TfMnoSuhkV_!!2206686532409-0-lubanimage.jpg"/>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="//img.alicdn.com/imgextra/i4/2206686532409/O1CN017K6ibh1TfMnrQS3CW_!!2206686532409-0-lubanimage.jpg"/>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="//img.alicdn.com/imgextra/i4/2206686532409/O1CN01neUpPm1TfMnuWKCzt_!!2206686532409-0-lubanimage.jpg"/>
  </swiper-item>
</swiper>
  

/* pages/demoswiper/demoswiper.wxss */
swiper {
  width: 100%;
  height: calc(100vw*352/1125);
}

swiper image {
  width: 100%;
}

注意：

1. 轮播图外层容器 swiper
2. 每一个轮播项 swiper-item
3. swiper标签 存在默认样式
   1. width：100%
   2. height：150px
   3. image 也存在默认高度 ： 320* 240
   4. swiper高度无法实现由内容撑开，默认高度是150px
4. 先找出来 原图的宽度和高度 等比例 给swiper定高度和宽度
   1. 假设原图的宽度和高度 为 1125px * 352px
   2. swiper的宽度/swiper的高度 = 原图的宽度 / 原图的高度
      1. swiper的高度 = swiper的宽度*原图的高度/原图的宽度
      2. swiper的高度 = calc（100vw * 352px/1125px）

9.5 navigator 超链接

1. navigator 是块级元素，默认会换行，可以自定义设置宽度和高度
2. 相当于HTML中的 a 链接
3. url 要跳转的页面路径 绝对路径 或 相对路径
4. target 要跳转到当前的小程序页面 还是其他的小程序的页面
   1. self 默认值 自己的小程序页面
   2. miniProgram 其他的小程序页面
5. opentype 跳转的方式
   1. navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
   2. redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
   3. switchTab跳转到tabbar页面，并关闭其他所有 非 tabbar页面

<view class="btn-area">
  <navigator url="../demoswiper/demoswiper">跳转到新页面</navigator>
  <navigator url="../index/index">navigator跳转到tab页,这样跳转不过去</navigator>
  <navigator url="../demoswiper/demoswiper" open-type="redirect">跳转到新页面</navigator>
  <navigator url="../index/index" open-type="switchTab">switchTab可以跳转到tab页</navigator>
  <navigator url="../demoless/demoless" open-type="reLaunch">reLaunch跳转到首页并关闭其他页面</navigator>
</view>

9.6 rich-text 富文本标签 相当于v-html

可以将字符串解析成对应标签，类似vue中v-html功能

9.6.1 通过HTML String渲染

<rich-text nodes="{{html}}"></rich-text>

Page({
  data: {
    html: '<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>'
  }
})

9.6.2 通过对象数组渲染

// pages/demorichtext/demorichtext.js
Page({
  data: {
    //1. 标签字符串渲染 （最常用）
    htmlString: '<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>',
    //2. 对象数组渲染
    htmlArray: [
      {
        //1. div标签 name属性来指定
        name: 'div',
        //2. 标签上有哪些属性
        attrs: {
          class: 'my_div',
          style: 'color: pink'
        },
        //3. 子节点 children 要接受的数据类型和nodes第二种渲染方式的数据类型一致
        children: [
          {
            name: 'p',
            attrs: {

            },
            children: [
              {
                type: 'text',
                text: 'hello'
              }
            ]
          }
        ]
      }
    ]
  }
})

9.7 button

1. button的外观属性
   1. size 控制按钮大小
      1. primary(默认)
      2. mini
   2. type 控制按钮颜色
      1. default 白色 （默认）
      2. primary 绿色
      3. warn 红色
   3. plain 控制按钮是否镂空，背景色是否透明
      1. false（默认）
      2. true
   4. disable 按钮是否禁用
      1. false（默认）
      2. true
   5. loading 名称前是否带longing图标
      1. false（默认）
      2. true
2. button的开放能力
   1. open-type
      1. contact 打开客服会话，需要在微信小程序的后台进行配置，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact回调中获得具体信息。
      2. share 转发当前的小程序到微信朋友中，不能把小程序分享到朋友圈
      3. getPhoneNumber 获取当前用户的手机号码信息
         1. 结合bindgetphonenumber事件来使用，不是企业的小程序账号没有权限来获取用户的手机号码
         2. 在事件的回调函数中通过参数来获取信息，获取到的信息是已经加密过的，需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，再返回到小程序中，就可以看到信息了。
      4. getUserInfo 获取当前用户的个人信息
         1. 结合bindgetuserinfo事件开始用
         2. 在事件的回调函数中通过参数来获取信息，信息是未加密的
      5. launchApp 在小程序中直接打开App
         1. 需要先在app中，通过app的某个链接 打开小程序，然后再在小程序中通过这个功能重新打开app
      6. openSetting 打开小程序内置的授权页面
         1. 授权页面中只会出现用户曾经点击过的权限
      7. feedback 打开小程序中内置的意见反馈页面

<button size="primary">按钮</button>
<button type="primary" size="mini">按钮</button>
<button type="primary" size="mini" open-type="contact">打开客服会话</button>
<button type="primary" size="mini" open-type="share">转发当前的小程序到微信朋友中</button>
<button type="primary" size="mini" open-type="getPhoneNumber">获取手机号</button>
<button type="primary" size="mini" open-type="getUserInfo">获取用户信息</button>
<button type="primary" size="mini" open-type="launchApp">直接打开App</button>
<button type="primary" size="mini" open-type="openSetting">打开小程序内置的授权页面</button>
<button type="primary" size="mini" open-type="feedback">打开小程序内置的意见反馈页面</button>

9.7.1 open-type的contact的实现流程

1. 将小程序的appid 由测试号改为自己的appid
2. 登录微信小程序官网，添加 客服-微信

9.8 icon

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色，同css的colo

9.9 radio单选按钮

1. 可以通过color属性来修改颜色
2. 需要搭配radio_group一起使用
3. value 选中的单选框的值

<view>现在选择的是： {{sex}}</view>
<radio-group  bindchange="radioChange">
  <radio checked="true" value="male">男</radio>
  <radio value="female">女</radio>
</radio-group>

// pages/demobutton/demobutton.js
Page({
  data: {
    sex: 'male'
  },
  radioChange(e) {
    console.log(e);
    console.log('radio发生change事件，携带value值为：', e.detail.value)
    this.setData(
      {
        sex: e.detail.value
      }
    )
  }
})

9.10 checkbox复选框

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