微信小程序开发---自定义组件

最新推荐文章于 2024-09-15 08:44:05 发布

用户昵称已存在，无法使用

最新推荐文章于 2024-09-15 08:44:05 发布

阅读量434

点赞数 9

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/2301_77627792/article/details/136282997

版权

本文详细介绍了如何在微信小程序中创建自定义组件，包括项目结构、WXML模板编写、WXSS样式、JSON配置、页面中注册和使用组件、父子组件间的通信以及slot插槽技术。还展示了组件的生命周期管理，如attached和detached钩子函数的应用。

摘要由CSDN通过智能技术生成

详细使用见官方文档：自定义组件 / 介绍 (qq.com)

1、创建自定义组件

项目结构：

代码示例：

// WXML
<view class="box">
  <view wx:for="{{list}}" wx:key="index" class="item {{current==index?'active':''}}" bind:tap="changeItem" data-index="{{index}}">
    {{item}}
  </view>
</view>

// WXSS
.box {
  display: flex;
  width: 90%;
  margin: 0 auto;
  flex-direction: row;
}
.item {
  flex: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.active {
  color: rgb(23, 148, 231);
}

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

// JS
Component({

  /**
   * 组件的属性列表---不能在组件内部修改，由父组件传递
   */
  properties: {
    list:{
      type:Array,
      value:["TabOne","TabTwo","TabThree","TabFour"]
    },
    current:{
      type:Number,
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
      // dataList:["科技","娱乐","体育","教育"],
      // current:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeItem(evt) {
        // 修改的是状态而非属性
        // this.setData({
        //   current:evt.currentTarget.dataset.index
        // })
        // 触发父组件中的事件
        this.triggerEvent("ParentEvent",evt.currentTarget.dataset.index)
    }
  }
})

2、页面JSON中注册组件

代码示例：

{
  "usingComponents": {
    "navbar":"../../components/navbar/navbar"
  }
}

3、页面WXML中引入组件

<navbar bindParentEvent="handleEvent" list="{{dataList}}" current="{{currentIndex}}"></navbar>

4、父子组件间通信

父传子：

子组件定义属性：

父组件传递数据：

子传父：

父组件定义相应事件：

子组件调用父组件方法（）：

5、slot（插槽技术）

组件内：

<view class="box">
  <slot name="left"></slot>
  <slot name="right"></slot>
</view>

注意事项：

父组件使用：

6、自定义组件的生命周期

代码示例（倒计时功能）：

lifetimes:{
    // 进入自动触发
    attached() {
      this.intervalId =  setInterval(()=>{
        console.log(this.data.count)
        if(this.data.count==0) {
          // 通知父组件移除自己
          this.triggerEvent("event")
        }
        this.setData({
          count:this.data.count-1
        })
      },1000)
    },
    // 移除
    detached() {
      // 移除定时器
      clearInterval(this.intervalId)
      console.log("定时器移除")
    }
  }