微信小程序自定义组件的使用

发表于   |   分类于   |  

当功能多了后，自然而然就会有需求要求实现功能的复用，这个时候就需要把功能模块抽象成自定义组件，以便在不同的页面中复用。但是微信官方的文档写的有点简单，看的有点懵，折腾了好久终于算是会用了，写个记录吧。

自定义组件介绍

官方地址

简单介绍：
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用.

也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护.

创建自定义组件

先说下我要实现的组件的样子，大概就是一个面板，有左右两半，可以传入不同的值来显示并复用。大概效果如下很简单的一个东西(这里只是举例用)：

component1

1.首先在最外层的 components 文件夹中新建一个文件名命名为你要创建的组件的名字 比如我要做个通用的list面板
我就建了个文件夹 listPanel 当然这个名字随意的。

然后在这个文件夹下选择 新建Component 输入名字即可。如果你不是用的微信开发工具，自己手动建立相关的文件即可。

自定义组件需要4个文件 如下：

component

2.修改 listPanel.json 文件, 指定其中的 component 属性 为 true

1
2
3
4
{
  "component": true,
  "usingComponents": {}
}

3.编辑 listPanel.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    left_data: {
      type: String,
      value: '',
    },
    right_data: {
      type: String,
      value: '',
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleLeft: function () {
      wx.showToast({
        title: 'click left',
      });
    }
  }
})

上面的属性是我大概组件需要的，你可以根据需要写自己的。因为我的组件需要两部分动态显示，所以我设置了2个属性值。

3.编辑 listPanel.wxml 增加一点很简单的代码

1
2
3
4
5
6
7
8
<view class="list_container">
  <view class="list_left">
    <text bindtap="handleLeft">{{ left_data }}</text>
  </view>
  <view class="list_right">
    <text>{{ right_data }}</text>
  </view>
</view>

4.编辑 listPanel.wxss 稍微增加一点样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.list_container {
  width: 100vw;
  height: 50vh;
  line-height: 50vh;
  display: flex;
  text-align: center;
}
.list_left {
  width: 50vw;
  background-color: orange;
}
.list_right {
  width: 50vw;
  background-color: pink;
}

5.然后找到最外面的 app.json 文件 找到其中的 usingComponents 属性，在其中注册刚写好的组件

1
2
3
"usingComponents": {
    "listPanel": "/components/listPanel/listPanel"
}

前面的Key是组件的名字，等会在别的wxml中使用.

6.然后来测试下，在index页面中，修改 index.wxml 增加组件的使用

1
<listPanel left_data="Hello" right_data="World"></listPanel>

当然你也可以设置更多的属性和更多的控制，以达到组件可以更灵活的复用。

组件间通信

父组件可以直接设置子组件中的数据绑定，如果子组件要向父组件来传递数据的话就有点麻烦了，需要使用事件。

1.在父组件中创建监听 在本次的例子中 pages/index/index.wxml 就相当于父组件了

修改 <listPanel left_data="Hello" right_data="World"></listPanel> 这一行，在其中添加事件监听

1
<listPanel left_data="Hello" right_data="World" bind:handleFatherRightEvent="handleFatherRightEvent"></listPanel>

或者

1
<listPanel left_data="Hello" right_data="World" bindhandleFatherRightEvent="handleFatherRightEvent"></listPanel>

这两种写法都可以。

然后在 pages/index/index.js 中写好对应的js方法

1
2
3
handleFatherRightEvent: function (e) {
    console.log('father', e.detail);
}

2.触发事件

修改 listPanel.wxml 文件 增加一个点击事件(也可以用别的事件，点击事件测试比较简单)

1
<text bindtap="handleRightEvent">{{ right_data }}</text>

然后编辑 listPanel.js 文件，增加对应的处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
handleRightEvent: function (e) {
    // detail对象，提供给事件监听函数
    let myEventDetail = {
    name: 'reggie'
    };
    // 触发事件的选项
    var myEventOption = {
    age: 18
    };
    
    this.triggerEvent('handleFatherRightEvent', myEventDetail, myEventOption);
}

3.然后来点击测试下

如果出现下面的结果就成功了

component_connect

-------------The End-------------