1、组件也有它的生命周期（lifetimes）

自小程序基础版本2.2.3起，组件的生命周期可以在lifetimes字段中声明（这是推荐的方式，优先级最高）

  lifetimes: {
    created: function () {
      // 组件实例化，但节点树还未导入，因此这时不能用setData
    },
    attached: function () {
      // 在组件实例进入页面节点树时执行 
      // 节点树完成，可以用setData渲染节点，但无法操作节点
    },
    ready: function () {
      // 组件布局完成，这时可以获取节点信息，也可以操作节点
    },
    move: function () {
      // 组件实例被移动到树的另一个位置
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

2、组件内使用父页面定义的样式（externalClasses）

组件js内先引用：

externalClasses: ['out_class'], // 引用父页面定义的class名

组件html中使用：

<view class="out_class">{{item.txt}}</view>

父页面中：

<nav nav="{{navData}}" out_class="txtColor"></nav>
 
.txtColor{
  color: purple;
}

3、组件中数据监听（observers）

3.1监听传过来数据

  properties: {
    testData: {
      type: String,
      observer: function(a, b){
        console.log('数据1：', b)
        console.log('数据2：', a)
      }
    }
  },

image.png

3.2监听data中的数据

  observers: {
    'oberser_data'(data){
      console.log('数据发生了变化', data)
    },
    'oberser_data.newVal'(data) { // 无用，监听不到
      console.log('第二个数据发生了变化', data)
    }
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    oberser_data: '初始数据',
    oberser_data2: {
      'newVal': '深度数据'
    }
  },
 
   methods: {
    onNav(e) {
      this.setData({
          oberser_data: '改变的数据',
          ["oberser_data2.newVal"]: '第二个改变的数据'
      })
    }
  }

image.png

4、父子组件通信

父组件：<getCode  name=”{{name}}” bindmyEvent=”onTest”></getCode>
子组件在properties中接收name：properties：{name: {type:String,value:’’}}
然后子组件通过this.data.name就可以使用了
 
子组件中：click: function(e) {
var val = e.detail.value
    var myEventData = {val: val}
    this.triggerEvent(‘myEvent’,myEventData )
}
父组件中：onTest: function(e) {
    this.setData({value: e.detail.val})
}

5、获取组件实例对象

获取到了组件实例对象this.selectComponent(“#id)

调用组件实例中的方法this.selectComponent(“#id).fun()

6、抽象组件

父页面：

<masonry generic:masonry-item="img-box" id="masonry" ></masonry>
this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.start(items).then(() => {
    console.log('refresh completed')
})

子组件：

“componentGenerics”: {
    “masonry-item”：true
}

7、具体实例

作者：Lia代码猪崽
链接：https://www.jianshu.com/p/1622874fdab6

一、创建组件

1.新建一个专门拿来放组件的目录

image

2.新建一个弹窗组件的目录，在目录下新建一个同名的Component

image

二、编写组件

1.wxml

<!--component/dialog/dialog.wxml-->
<view class="my-dialog" hidden="{{!showDialog}}">
  <view class="my-mask"></view>
  <view class="my-container">
    <view class="title">{{title}}</view>
    <view class="content">
      <view class="row" wx:for="{{content}}" wx:for-index="index" wx:for-item="item" wx:key="index">{{item.label}}：{{item.value}}</view>
    </view>
    <view class="btn-row">
      <view class="confirm" bindtap="_confirm">确定</view>
      <view class="cancel" bindtap='_cancel'>取消</view>
    </view>
  </view>
</view>

2.wxss

/* component/dialog/dialog.wxss */
.my-dialog {
  opacity: 1;
}
.my-dialog .my-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
.my-dialog .my-container {
  position: fixed;
  width: 80%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
  z-index: 5000;
}
.my-dialog .my-container .title {
  display: inline-block;
  width: 100%;
  margin: 20rpx 0 0 0;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
  color: #303133;
}
.my-dialog .my-container .content {
  margin: 10rpx 0 20rpx;
  display: inline-block;
  width: 100%;
  line-height: 50rpx;
  text-align: left;
}
.my-dialog .my-container .content .row {
  margin: 0 10%;
  width: 80%;
  font-size: 26rpx;
  color: #606266;
  word-break: break-all;
}
.my-dialog .my-container .btn-row {
  padding: 10rpx 0 0;
  display: inline-block;
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  font-size: 18px;
  border-top: 1rpx solid #c0c4cc;
}
.my-dialog .my-container .btn-row .confirm {
  float: right;
  width: 50%;
  height: 100%;
  color: #86c2ec;
}
.my-dialog .my-container .btn-row .cancel {
  color: #606266;
  float: right;
  width: calc(50% - 2rpx);
  height: 100%;
  border-right: 1rpx solid #c0c4cc;
}

3.js

// component/dialog/dialog.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      // 初始值
      value: '请确认提交信息'
    },
    content: {
      type: Array
    },
    confirmText: {
      type: String,
      value: '确定'
    },
    cancelText: {
      type: String,
      value: '取消'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showDialog: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    show() {
      this.setData({
        showDialog: true
      })
    },
    hide() {
      this.setData({
        showDialog: false
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _cancel() {
      //触发取消回调
      this.triggerEvent("cancel")
    },
    _confirm() {
      //触发成功回调
      this.triggerEvent("confirm");
    }
  }
})

4.json

{
  "component": true,
  "usingComponents": {}
}

三、在其他页面上使用组件

1.在json中引入

{
  "navigationBarTitleText": "记账",
  "usingComponents": {
    "dialog": "/component/dialog/dialog"
  }
}

2.wxml引入

<view>
  <!--这里还有一个表单，由于不是重点就不列出来了-->

  <!--这个按钮来触发弹窗的打开-->
  <button bindtap="handleSubmit" class="btn">新增资产项目</button>
  <dialog id="dialog"
      title="请确认资产项目信息"
      confirmText="确定"
      cancelText="取消"
      content="{{dialogContent}}"
      bind:cancel="handleCancelDialog"
      bind:confirm="handleConfirmDialog">
   </dialog>
</view>

3.在js中引入

// 有省略一些表单的数据的操作
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 表单数据
    assets: [],
    assetIndex: 0,
    isCostText: '支出',
    date: '',
    amount: null,
    descripition: '',
    // 用来放弹窗内容的，里面的格式应该为[{label: 'sadsa', value: 'dsadsad'}]
    dialogContent: []
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 获得dialog组件
    this.dialog = this.selectComponent("#dialog");
  },
  // 点击了提交记录按钮
  submitData(e) {
    // 打开确认框
    const data = this.data
    const dialogContent = [
      {
        label: '资产项目',
        value: data.assets[form.assetIndex].assetName
      },
      {
        label: '收入/支出',
        value: data.isCostText
      },
      {
        label: '交易日期',
        value: data.date
      },
      {
        label: '金额',
        value: `${data.amount} 元`
      },
      {
        label: '备注详情',
        value: data.description
      }
    ]
    this.setData({
      dialogContent: dialogContent
    })
    // 不定时也行的
    setTimeout(() => {
      // 打开弹窗
      this.dialog.show()
    }, 100)
  },
  // 点击了弹出框的取消
  handleCancelDialog() {
    this.dialog.hide()
  },
  // 点击了弹出框的确认
  handleConfirmDialog() {
    this.dialog.hide()
    wx.showLoading({
      title: '正在提交'
    })
    const form = this.data
    const params = {
      masterAssetId: this.data.assets[form.assetIndex].assetId,
      amount: form.isCost ? -form.amount : form.amount,
      description: form.description,
      transactionTime: form.date
    }
    // 这里一般都是与后台交互过程
    // 关闭loading
    wx.hideLoading()
  }
})

image image