微信小程序组件学习(详细且简单易懂)

简介:

通过本篇文章我们可以了解到
微信小程序常见组件的作用以及特性

基础常见组件

view

小程序中的view标签和我们web中的div标签很像

我们可以把它理解为小程序中的div标签

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

hover-class

属性	默认值	说明
hover-class	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	50	按住后多久出现点击态，单位毫秒
hover-stay-time	400	手指松开后点击态保留时间，单位毫秒

---

text

1. ⽂本标签

2. 只能嵌套text

3. ⻓按⽂字可以复制（只有该标签有这个功能）

4. 可以对空格 回⻋ 进⾏编码

属性	默认值	说明
user-select	false	文本是否可选，该属性会使文本节点显示为 inline-block
space		显示连续空格
decode	false	是否解码

代码样式:

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

---

icon

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

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

---

radio

单选项目。

属性	默认值	说明
value		radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked	false	当前是否选中
disabled	false	是否禁用
color	#09BB07	radio的颜色，同css的color

单选样式图:

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

---

image

1. 图⽚标签，image组件默认宽度320px、⾼度240px

2. ⽀持懒加载

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

3. mode 有效值：

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

值	模式以及说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

---

swiper轮播图(滑块视图容器)

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

属性	默认值	说明
indicator-dots	false	是否显示面板指示点
indicator-color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	#000000	当前选中的指示点颜色
autoplay	false	是否自动切换
circular	false	是否采用衔接滑动
interval	5000	自动切换时间间隔
vertical	false	滑动方向是否为纵向

---

swiper-item

滑块标签

默认宽度和⾼度都是100%

内部写入image

案例:

WXML

<!-- 
  1. 轮播图外层容器
  2. 每一个轮播项swiper-item
  3. swiper标签   存在默认样式
    1.width   100%
    2.height   150px
    3.swiper  高度 无法实现由内容撑开
  4. 先找出来 原图的宽度和高度  等比例  给swiper 定宽度和高度
    原图的宽度和高度  1125*352
    swiper宽度 / swiper高度  =  原图的宽度  /  原图的高度
    height: 100vw * 352 / 1152
 -->
<swiper autoplay interval="2000" circular indicator-dots="true">
  <swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i3/18/O1CN01fboXpZ1C0HoAKlhdn_!!18-0-luban.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i2/2206686532409/O1CN012cOW0O1TfMo3z09sB_!!2206686532409-0-lubanimage.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"></image></swiper-item>
</swiper>

wxss

/* pages/index/index1.wxss */
swiper{
  width:100%;
  height:calc(100vw * 325 / 1125);
}
image{
  width: 100%;
}

注意

微信小程序全局支持class和style属性，不支持id属性。

---

navigator导航

navigator导航用于页面链接跳转。

属性	默认值	说明
target	self	在哪个目标上发生跳转，默认当前小程序
url		当前小程序内的跳转链接
open-type	navigate	跳转方式
hover-class	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果

open-type的合法值(有效值)

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

---

横向布局与纵向布局样式展示

WXML 😉

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column\n纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

---

总结

今天我们学习了微信小程序的基础常用组件

有view,text,icon,radio,image,swiper

和navigator导航跳转

以及非常实用的横向布局与纵向布局两种布局样式

这就是我们今天学习的内容了

欢迎在评论区互相分享自己的学习心得