文章目录

常见组件
一、view
二、text
三、image
四、swiper
- 1. swiper
- 2. swiper-item
五、navigator
六、rich-text
- nodes属性
七、 button
八、 icon
九、radio
十、checkbox
总结

常见组件

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

一、view

view 代替原来的 div 标签

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

二、text

text:

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

属性名	类型	默认值	说明
selectable	Boolean	false	⽂本是否可选
decode	Boolean	false	⽂本是否可选

代码

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

三、image

image:

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

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

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

模式	值	说明
缩放	scaleToFill	不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image 元素
缩放	aspectFit	保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。
缩放	aspectFill	保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。
缩放	widthFix	宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
裁剪	top	不缩放图⽚，只显⽰图⽚的顶部区域
裁剪	bottom	不缩放图⽚，只显⽰图⽚的底部区域
裁剪	center	不缩放图⽚，只显⽰图⽚的中间区域
裁剪	left	不缩放图⽚，只显⽰图⽚的左边区域
裁剪	right	不缩放图⽚，只显⽰图⽚的右边区域
裁剪	top left	不缩放图⽚，只显⽰图⽚的左上边区域
裁剪	top right	不缩放图⽚，只显⽰图⽚的右上边区域
裁剪	bottom left	不缩放图⽚，只显⽰图⽚的左下边区域
裁剪	bottom right	不缩放图⽚，只显⽰图⽚的右下边区域

四、swiper

swiper: 微信内置轮播图组件
在这里插入图片描述
默认宽度 100% ⾼度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显⽰⾯板指⽰点
indicator-color	Color	rgba(0, 0, 0, .3)	指⽰点颜⾊
indicator-active-color	Color	#000000	当前选中的指⽰点颜⾊
autoplay	Boolean	false	是否⾃动切换
interval	Number	5000	⾃动切换时间间隔
circular	Boolean	false	s是否循环轮播

1. swiper

滑块视图容器。

2. swiper-item

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

五、navigator

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

属性名	类型	默认值	说明
target	String	self	在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgram
url	String		当前⼩程序内的跳转链接
open- type	String	navigate	跳转⽅式

open-type 有效值：

值	说明
navigate	保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar ⻚⾯
redirect	关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。
switchTab	跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
reLaunch	关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
navigateBack	关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈，决定需要返回⼏层
exit	退出⼩程序，target="miniProgram"时⽣效

六、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 属性⽀持字符串和标签节点数组

属性	说明	类型	必填	备注
name	标签名	string	是	⽀持部分受信任的 HTML 节点
attrs	属性	object	否	⽀持部分受信任的属性，遵循 Pascal 命名法
children	⼦节点列表	array	否	结构和 nodes ⼀致

⽂本节点：type = text

属性	说明	类型	必填	备注
text	⽂本	string	是	⽀持entities

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

七、 button

button:
在这里插入图片描述
代码:

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

属性	类型	默认值	必填	说明
size	string	default	否	按钮的⼤⼩
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景⾊透明
disabled	boolean	false	否	是否禁⽤
loading	boolean	false	否	名称前是否带 loading 图标
form- type	string		否	⽤于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open- type	string		否	微信开放能⼒

size 的合法值

值	说明
default	默认⼤⼩
mini	⼩尺⼨

type 的合法值

值	说明
primary	绿⾊
default	⽩⾊
warn	红⾊

form-type 的合法值

值	说明
submit	提交表单
reset	重置表单

open-type 的合法值

值	说明
contact	打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息，具体说明
share	触发⽤⼾转发，使⽤前建议先阅读使⽤指引
getPhoneNumber	获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，具体说明
getUserInfo	获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting	打开授权设置⻚
feedback	打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

open-type 的 contact的实现流程

将⼩程序的 appid 由测试号改为⾃⼰的 appid
登录微信⼩程序官⽹，添加客服客服 – 微信微信
为了⽅便演⽰，可以准备两个账号
(1). 普通⽤⼾ A
(2). 客服-微信 B

八、 icon

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

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

在这里插入图片描述
代码:
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 ⼀起使⽤
在这里插入图片描述

总结

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

微信小程序入门之常用组件(04)