微信小程序-自定义导航组件

一、如何自定义组件

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

相关文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

a、新建组件

新建文件夹命名：components，之后所有的组件都建立在这个文件夹下

在components文件夹下新建组件文件夹，然后在组件文件夹下新建组件：

组件和页面一样，也有.js、.json、.wxml、.wxss四个文件

b、自定义组件生命周期

Component({
   
   
  lifetimes: {
   
   
    attached: function() {
   
   
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
   
   
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
   
   
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
   
   
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

c、组件的事件绑定

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
   
   
  properties: {
   
   },
  methods: {
   
   
    onTap: function(){
   
   
      var myEventDetail