微信小程序之常用组件

Posted 地中海真帅

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序之常用组件相关的知识,希望对你有一定的参考价值。


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

常用组件

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

  1. view

代替 原来的 div 标签

WXML中写入

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

介绍:

  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制(只有该标签有这个功能)
  4. 可以对空格 回⻋ 进⾏编码
属性名类型默认值说明
selectableBooleanfalse⽂本是否可选
decodeBooleanfalse是否解码
//在WXML中写入
 <text selectable="false" decode="false">&nbsp;</text>
  1. image

介绍

  1. 图⽚标签,image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载
属性名类型默认值说明
srcString图⽚资源地址
modeString‘scaleToFill’图片剪切,缩放的模式
lazy-loadBooleanfalse图片懒加载

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

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

效果图


默认宽度 100% ⾼度 150px

常用属性

属性名类型默认值说明
indicator-dotsBooleanfalse是否显⽰⾯板指⽰点
indicator-colorColorrgba(0, 0, 0, .3)指⽰点颜⾊
indicator-active-colorColor#000000当前选中的指⽰点颜⾊
autoplayBooleanfalse是否⾃动切换
intervalNumber5000⾃动切换时间间隔
circularBooleanfalse是否循环轮播

swiper-item

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


  1. navigator

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

属性名类型默认值说明
targetStringself在哪个⽬标上发⽣跳转,默认当前⼩程序,可选值self/miniProgram
urlString当前⼩程序内的跳转链接
open-typeStringnavigate跳转⽅式

open-type有效值:

说明
navigate保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯
redirect关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到tabbar ⻚⾯。
switchTab跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯
reLaunch关闭所有⻚⾯,打开到应⽤内的某个⻚⾯
navigateBack关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层
exit退出⼩程序,target="miniProgram"时生效
  1. 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 属性⽀持 字符串 和 标签节点数组

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

⽂本节点:type = text

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

注意:

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

  1. button

<button
  type="default"
  size="defaultSize"
  loading="loading"
  plain="plain"
>
 default
</button
属性类型默认值必填说明
sizestringdefault按钮的⼤⼩
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空,背景⾊透明
disabledbooleanfalse是否禁⽤
loadingbooleanfalse名称前是否带 loading 图标
form-typestring⽤于 组件,点击分别会触发 组件的submit/reset 事件
open-typestring微信开放能⼒

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的实现流程

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

  1. icon

属性类型默认值必填说明
typestringicon的类型,有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear
sizenumber/string23icon的⼤⼩
colorstringcon的颜⾊,同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>
  1. radio

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

属性类型默认值必填说明最低版本
valuestringradio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value1.0.0
checkedbooleanfalse当前是否选中1.0.0
disabledbooleanfalse是否禁用1.0.0
colorstring#09BB07radio的颜色,同css的color1.0.0

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

radio-group

介绍:

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

  1. checkbox

介绍:

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

属性类型默认值必填说明最低版本
valuestringcheckbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value1.0.0
disabledbooleanfalse是否禁用1.0.0
checkedbooleanfalse当前是否选中,可用来设置默认选中1.0.0
colorstring#09BB07checkbox的颜色,同css的color1.0.0

checkbox-group

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

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

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

以上是关于微信小程序之常用组件的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 之 常用组件 及其属性

微信小程序之组件

微信小程序 MinUI 组件库系列之 icon 图标组件

微信小程序 MinUI 组件库系列之 badge 徽章组件

微信小程序 MinUI 组件库系列之 loading 加载提示组件

微信小程序 MinUI 组件库系列之 elip 文本截断组件