微信小程序的组件 component开发，提高效率第三篇

微信小程序组件，自定义更加快速完成开发

创建组件

首先建立一个文件夹主要是放置自定义组件的

之后，右击文件夹，新建component，填写名称，添加之后出现会出现

wxml和wxss页面的写法按照正常的小程序的规则走就好 .json 设置component 为true

{

"component": true,

"usingComponents": {}

}

js页面的写法

const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    statusBarHeight: {
      type: String,
      value: app.globalData.statusBarHeight
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShowOrganizer: false,
  },
  ready:function(){
    //进入组件会执行
  },
  /**
   * 组件的方法列表
   */
  methods: {
    ecodedt:function(e){
        console.log('组件的点击事件')
        this.triggerEvent('myevent', e.currentTarget.dataset)
    }
  }
})

properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表
data	Object	否	组件的内部数据，和 properties 一同用于组件的模板渲染

引入使用组件

需要引入页面的.json需要添加如下

"usingComponents": {

    "registered": "../../component/registered/registered",//页面路径

    "kefu": "../../component/kefu/kefu" //引入多个的写法

}

wxml需要进行的操作 kefu 是跟json页面的内容对应的

<view>
     <kefu info="{{info}}" bind:myevent="kefuBack"></kefu>
</view>

组件传参

<view>
     <kefu info="{{info}}" bind:myevent="kefuBack"></kefu>
</view>

//组件页面
this.triggerEvent('myevent', e.currentTarget.dataset)