小程序自定义组件以及使用组件方法

最新推荐文章于 2025-02-16 20:41:24 发布

原创最新推荐文章于 2025-02-16 20:41:24 发布 · 758 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了微信小程序中自定义组件的创建过程，包括新建组件文件夹、配置json文件、编写wxml和wxss样式，以及在js中定义组件属性和方法。此外，还阐述了组件的生命周期和如何在其他页面中引入并使用自定义组件。

1.新建一个文件夹,鼠标右击选择新建Component,输入组件名,就会生成组件对应js,json,wxml,wxss等文件.如下图所示:

2.在json文件中,设置字段"component": true,就表示该组件是自定义组件,以后就可以在其它页面中进行使用.

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

3.在 wxml 文件中编写组件模板，在 wxss 文件中书写组件样式，它们的写法与页面的写法类似。

4.在js文件中格式如下:

// components/zujian.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
       shuju: { 
            type: Boolean,    //类型
            value: ''        //值
          //组件数据字段监听器，用于监听 properties 和 data 的变化
            observers:function (newVal) { 
              console.log(newVal)
            }
        },
  },
 
  /**
   * 组件的初始数据
   */
  data: {
 
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
 
  }
})

5.组件的生命周期如下:

6.调用自定义组件

在需要使用这个组件的页面所对应的 json 文件中引入自定义组件

     "usingComponents": {
        "component": "/components/zujian"    //这是绝对路径
      }

在wxml中使用组件,shopinfo是父组件往子组件中传的数据,在子组件的properties中进行接收.然后可以在子组件中使用.

<component shopinfo="{{shopinfo}}"></component>