小程序---原生开发---自定义组件

在开发过程中，我们经常需要创建一些公用组件以便方便我们多次调用。组件的功能以及事件的一个传递，这使得需要注意，有些组件可能样式一样，点击的事件效果会有所不同，所以组件需要功能多样化，方便使用

创建组件，使用微信开发者工具创建，直接选择创建组件的选项，所有的页面都会给创建好。

但是使用别的软件进行开发的时候，创建组件一定要创建完整。比如说一个组件中有xx.js  xx.wxml  xx.wxss  xx.json

如果你少一个xx.json文件，会导致你引入组件的时候找不到这个文件。为了避免出错，创建所有的页面即可。

组件的js页面是这样的

var app = getApp()
Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

和普通的js页面是不一样的

当我们有数据需要传递的时候在properties中写出即可，例如

properties: {
    navbarData: { // navbarData 由父页面传递的数据
      type: Object,
      value: {
        gobank: true,
        gohome: true,
        has_search: false,
      },
      observer: function (newVal, oldVal) { 
      }
    }
  },

当我们有点击事件需要传递的时候，需要传递什么这个看需求，我这里只写传递点击事件

methods: {
    goback: function () {
	  this.triggerEvent('goback')
    },
    goHome: function () {
      wx.navigateTo({
        url: '/pages/index/index',
      });
    }
  }

当我们在页面中使用需要现在aa.json文件中先调用才可以使用，可以在app.json中全局调用，也可以在使用页面下的.json文件中调用，局部调用，看需求

"usingComponents": {
		"headpage":"/components/pagehead/pagehead"
	}

使用页面index.wxml，这里的点击事件bind:xxx     xxx这个名称要和在组件中triggerEvent中的名称保持一致，如果有误，则无法调用点击事件

<!--index.wxml-->
	<headpage bind:goback='goback'></headpage>
<view class="container" bindtap="goToPage">
 首页
</view>

index.js中的点击事件，书写我们需要处理的操作即可

 goback(){
	  navigUrl.navigatoBackUrl('../index/index')
  }