微信小程序组件的分类

  • 视图容器组件
  • 基础内容组件
  • 表单组件
  • 操作反馈组件
  • 导航组件
  • 媒体组件
  • 地图组件
  • 画布组件

组件是试图层(UI)的基本组成单位,自带一些功能以及微信风格的样式,组件就是对html5元素的封装.

组件的通用属性

  • id
    字符串属性,组件的唯一标识,必须保持唯一,js中通过id属性获取组件的dom对象,然后操作;但是在微信小程序中,由于框架提供了动态数据绑定技术,小程序不再使用id来获取dom对象,id很少使用
  • class属性
    可以设置样式,如果与动态数据绑定结合,组件的class具有动态变化的能力
  • style
    通过style设置组件的内联样式,style属性值中可以设置css的各种属性
  • hidden
    默认为false,不隐藏
  • data-*属性
    可以用来为组件设置任意的自定义的属性值,当组件绑定的事件触发时,这些自定义属性会作为参数发送给事件处理函数,在事件处理函数中可以通过传入参数对象的currentTarget.dataset方法获取自定义属性的值
  • bind/catch*属性
    定义事件,bind不会阻止冒泡事件向上冒泡,catch可以

input组件

  • value属性
    用来标识输入框的内容,在这里设置的值为输入框的初始值,可以动态数据绑定,不是双向绑定,value组件中输入的值不会动态反应到绑定的变量中
  • password属性
    密码框,逻辑类型boolean,默认false,不作为密码框
  • placeholder
    为输入内容时将显示
  • disabled
    设置输入框是否禁用,不接受输入
  • maxlength
    输入框可输入字符的最大长度,0为不限制长度
  • bindchange
    设置输入框的事件绑定,当输入框失去焦点时，将触发bindchange事件执行该属性设置的函数,触发bindchange事件时，传入event作为参数,其中event.detail.value中将包含输入框中输入的值

button组件

  • type

    • default:灰色
    • primary:绿色
    • warn:红色

    • size

      • default
      • mini:按钮高度减少一些
    • plain:设置按钮是否镂空,即背景是否透明;boolean
    • loading:设置按钮文字前显示一个loading动画图标;boolean

slider组件(滑动条组件)

  • max:组件最大值,默认是100
  • min:组件最小值,默认是0
  • step:步长值,必须大于0
  • value:组件当前值
  • Show-value:逻辑值,是否在组件由此显示组件当前值
  • bindchange:组件事件,当拖动滑块操作完成时将触发该事件,并通过event.detail.value传递值到事件处理函数中

icron组件

  • type:指定图标类型,有效值success,success_no_circle,info,warn,waiting,cancel,download,search,clear
  • size:指定图标大小,单位是px
  • color:设置图标的颜色

switch组件

  • checked:默认为false,控制组件是否选中
  • type:组件样式,默认为switch;checkbox
  • bindchange:绑定组件的checked改变时的事件
  • checked:event.detail.value的值标识当前checked的状态

将数据保存到本地

  • wx.setStorage
    将数据存储在本地缓存的指定的key中,如果本地缓存中存在该key就会覆盖,异步接口,参数时object

    • key:本地缓存中的key,字符串
    • data:需要存储的内容
    • success:接口调用成功的回调函数
    • fail:接口调用失败的回调函数
    • complete:接口调用结束的回调函数,无论是否成功都会执行
      success和complete回调,其参数对象都有一个errMsg的属性
  • wx.setStorageSync
    同步接口,不需要success,fail,complete，只有key和data,在使用同步接口函数时,最好在外部包一个错误捕获

本地缓存时永久存储的

从本地缓存中国读取数据

  • wx.getStorage
    异步接口

    • key
    • success
      参数中包含key队形的内容,即res = {data:key对应内容}
    • fail
      调用失败的回调函数
    • complete
  • wx.getStorageSync
    函数的返回值就是指定Key对应的内容
var exprs = wx.getStorageSync('exprs') || []//获取本地缓存
exprs.unshift(expr);//在数组开头增加一个expr元素

  • 清空本地缓存
    本地缓存数据量最大为10mb,超过不能使用

    • wx.clearStorage
      不需要任何参数,将所有key清理完
    • wx.clearStorageSync
      同步清理本地数据缓存,最好try..catch

页面切换

  • wx.navigateTo
    保留当前页面(不从内存中释放),跳转到应用内的某个页面,参数是一个object对象,其中属性如下

    • url
      跳转的应用内页面的路径,可以使用绝对和相对
    • sucess
      成功回调函数
    • fail
    • complete

官方规定页面路径只能时5层,尽量避免多层级的交互方式

  • wx.redirectTo
    可以完成跳转页面的功能,在跳转前会关闭当前页面，参数和navigateTo一样
  • wx.navigateBack
    不需要参数,功能很简单,就是关闭当前页面,回退到前一页面(即使用wx.navigateTo接口跳转前的页面)

form组件

  • report-submit
    是否返回formid用于模板消息,boolean
  • bindsubmit
    携带form中的数据触发submit事件,event.detail={value:{'name':'value'},formId:''}
  • bindreset
    表单重置时会触发reset事件,在表单中定义一个formType属性为bindreset中属性名相同的button按钮,点击就会恢复默认值,不是初始值,而是每个组件的默认值

radio和radio-group组件

  • radio-group
    将多个radio组件组合为一组,一组中只有一个radio被选中,作为一个容器组件,本身不需要设置value,checked,只有一个bindchange事件绑定属性,当radio-group中的选中项发生变化时触发change事件,通过event.detail.value可以获得radio组件的值

  • radio

    • value
      单选按钮的标识,当该radio选中,radio-group的change事件会携带这个属性内容
    • checked
      设置当前radio是否选中
    • disabled
      设置是否禁用当前radio

当radio-group中没有一个radio组件处于选中状态时,将返回空字符串,即e.datail.value.name=""

checkbox和checkbox-group

  • checkbox-group
    是一个容器组件,提供bindchange属性用来绑定悬着改变事件的处理函数

  • checkbox

    • value
      选中某个checkbox组件时,将触发checkbox-group组件的change事件,并携带checkbox中的value属性值
    • disabled
    • checked

picker组件

picker滚动选择器组件支持三种数据类型选择器,通过mode属性来区分

  • mode

    • selector
      普通选择器

      • range
        字符串数组,数组中的每个元素作为选择器的一个选项,当mode为selector时,该属性有效
      • value
        为整数,表示选择了range数组中的第几个元素,与数组序列号相同,从0开始
      • bindchange
        当value属性改变时(即在选择器中进行了选择操作后)触发change事件,事件对象event中包含value值

    • date
      日期选择器

      • value
        为一个日期字符串,表示选中的日期值,格式为yyyy-MM-dd
      • start
        为一个日期字符串,表示开始日期
      • end
        结束日期
      • fields
        为一个字符串,有效值为"year","month","day"，表示选中器的力度,默认为"day"
      • bindchange
        为事件处理函数,当选择器的value改变时触发

    • time
      时间选择器

      • value
        为一个表示时间的字符串,表示选中的时间,格式hh:mm
      • start
        开始时间,hh:mm
      • end
        结束时间,hh:mm
      • bindchange

textarea组件

swiper实现广告轮播

swiper组件的名称叫滑块视图容器,首先是一个容器控件,其中放置的组件会轮换显示;需要注意的是,swiper容器中只能放置名为swiper-item的组件,其他组件会被自动删除,swiper-item组件中又可以放置其他需要显示的组件,然后由swiper组件控制这些swiper-item组件轮换显示

  • swiper组件
    swiper属性比较多,主要用来控制滑块显示的指示点、是否自动播放、自动切换时间、滑动时间间隔等

    • indicator-dots(指示点)
      设置是否在界面中显示面板指示点，默认false
    • autoplay
      设置是否自动切换swiper-item,默认false
    • current
      当前所在页面的序号,默认为0
    • interval
      设置自动切换的时间,默认为5000，5秒
    • duration(持续时间)
      设置页面滑动动画时长,默认1000,1秒
    • vertical
      是否垂直显示指标点
    • bindchange
      current属性值改变(切换页面)触发事件
  • swiper-item组件
    swipe-item组件是swiper的子组件,swiper-item组件也是一个容器组件,可以在其中放置其他组件(如image组件),宽度和高度自动设置为100%