微信小程序-组件

资源：

• 官方组件文档
• vant-weapp

组件属性

官网详细说明：https://developers.weixin.qq.com/miniprogram/dev/component/

• 标签共同属性

属性名	类型	描述	注解
id	String	组件的唯一标识	整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind / catch	EventHandler	事件

组件是否显示

<van-cell 
    wx:if="{{task.location}}"
    value="{{task.location.lagitude}}, {{task.location.longitude}}">
</van-cell>
    

原生组件

原生组件在WebView这一层的渲染任务是很简单，只需要渲染一个占位元素，之后客户端在这块占位元素之上叠了一层原生界面。因此，原生组件的层级会比所有在WebView层渲染的普通组件要高。

• 常用的几个原生组件

组件名	名称	是否有context	描述
video	视频	是	播放视频
map	地图	是	展示地图
canvas	画布	是	提供一个可以自由绘图的区域
picker	弹出式选择器	否	初始时没有界面，点击时弹出选择器

交互比较复杂的原生组件都会提供“context”，用于直接操作组件。以canvas为例，小程序提供了wx.createCanvasContext方法来创建canvas的context。这是一个可以用于操作canvas的对象，对象下提供了很多绘图的方法，如“setFillStyle”方法可以设置填充样式，“fillRect”方法用于绘制矩形

navigator

  <navigator url='../addtodo/addtodo'>
    <van-icon name="plus" class="plusIcon"/>  
  </navigator>

交互反馈

hover

// wxml
<button hover-class="hover">hover</button>
// wxss
.hover{
  background-color: red;
}

loading

// wxml
<button loading="{{loading}}" bindtap="loading">loading</button>
// js
loading:function(eye){
    // 把按钮的loading状态显示出来
    this.setData({
      loading: true
    })
    // 接着做耗时的操作
 }

模态对话框

    wx.showModal({
      title: '标题',
      content: '告知当前状态，信息和解决方法',
      confirmText:'conform',
      cancelText:'cacel',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击主操作')
        } else if (res.cancel) {
          console.log('用户点击次要操作')
        }
      }
    })
  },

Toast

  onLoad: function() {
    wx.showToast({ // 显示Toast
      title: '已发送',
      icon: 'success',
      duration: 1500
    })