微信小程序组件化开发

官方介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

本次Demo目录结构：

page下两个文件夹，一个components，用于存放组件；一个home，为我们的主要页面；

components里面两个组件，一个banner，一个news，都是都过右键 => 新建component 生成的；

一，基本使用：

第一步：配置 home.json 使页面能使用组件；

home.json

{
  "usingComponents": {
    "news-item":"../components/news/news-item",
    "banner-item":"../components/banner/banner-item"
  }
}

第二部：使用组件；

home.wxml

二，数据绑定：

home.wxml

newsInfoArr 是页面home里的数据，而news-arr 为 组件 news-item 里的对外属性newsArr：

/**
   * 组件的属性列表  (对外属性)
   */
  properties: {
    //type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数  
    newsArr: {
      type:Array,
      value:'hehe',
      observer:function(newVal,oldValue){
        console.log(newVal)
        console.log(oldValue)
      }
    }
  },

  /**
   * 组件的初始数据 (私有数据)
   */
  data: {
   
  },

组件 news-item拿到父级给的数据之后，可以进行加工、在页面上展示。

三，节点插入：

在组件模板中可以提供一个  节点，用于承载组件引用时提供的子节点。

news-item.wxml

（*由于这里用了多个solt所以需要在 news-item.js 里面设置下，单个无需设置）

  options: {
    multipleSlots: true
  }

home.wxml

  之前
  之后

效果：

四：事件监听：

news-item.wxml

在每个item里面绑定一个事件 ontap

  
  
  
    
      
        
      
      
        {{item.name}}
        {{item.desc}}
      
    
  

  
  

news-item.js

methods: {
    onTap:function(e){
      // detail对象，提供给事件监听函数
      const myEventDetail = {e:e}
      // 触发事件的选项
      const myEventOption  = {}
      this.triggerEvent('myevent',myEventDetail,myEventOption)
    }
  }

传递给事件“myevent”，供home页面使用

home.wxml

  之前
  之后

然后在home页触发 onMyEvent 方法：

  onMyEvent(e) {
    const detail = e.detail.e.currentTarget.dataset;
    wx.showModal({
      title: 'json如下',
      content: JSON.stringify(detail),
    })
  },

效果：

五：生命周期

生命周期方法页可以直接定义在 Component 构造器的第一级参数中，不过还是推荐在 lifetimes 字段内进行声明，这样优先级最高。

lifetimes: {
    created(){
      // 在组件实例刚刚被创建时执行
    },
    attached() {
      // 在组件实例进入页面节点树时执行
    },
    ready() {
      // 在组件在视图层布局完成后执行
    },
    moved() {
      // 在组件实例被移动到节点树另一个位置时执行
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
    error(err) {
      // 每当组件方法抛出错误时执行
    }
  }