小程序自定义组件开发

最新推荐文章于 2024-10-31 10:28:56 发布

WXDEE

最新推荐文章于 2024-10-31 10:28:56 发布

阅读量343

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_29791893/article/details/114694144

版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

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

1、创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，步骤如下：

1.1 创建组件目录

其用来存放各个文件。以toast组件为例，示例如下：
在这里插入图片描述

1.2 配置.json文件

在 json 文件中进行自定义组件声明，将 component 字段设为 true ，则这一组文件设为自定义组件。示例如下：

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

1.3 创建自定义组件样式

在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。示例如下：

<!--components/toast/index.wxml-->
<view class="toast-main-container" hidden="{{!visible}}">
    <view class="toast-content-wrap">
        <text class="toast-msg-wrap">{{message}}</text>
    </view>
</view>

1.4 配置.js文件，注册组件

在js 文件中，需要使用 Component()（具体见链接）来注册组件，并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。示例如下：

//components/toast/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {},
  /**
   * 组件的初始数据
   */
  data: {
    visible: false,
    message: '',
  },
  /**
   * 组件的方法列表
   */
  methods: {
    show(message, duration) {
      if (!message) {
        throw new Error('message is must param');
      }
      if (!duration) {
        duration = 3000;
      }
      this.setData({
        visible: true,
        message,
      });
      setTimeout(() => {
        this.setData({
          visible: false,
        });
      }, duration);
    },
  },
});

2、使用自定义组件

2.1 在页面的json文件中声明

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。具体如下：

{
  "usingComponents": {
    "toast": "/components/toast/index"
  }
}

2.2 在页面的wxml文件中引用

在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。具体如下：

<!--pages/webview/index.wxml-->
<view>
    <button bindtap="handleClick">点击提示</button>
    <toast id="toast" />
</view>

2.3 配置页面的js文件中

在渲染完成后，首先要获得toast组件，得到该对象后通过绑定修改值，可以设置显示内容、时间。具体如下：

// pages/webview/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.toast = this.selectComponent("#toast");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  // 弹窗显示
  handleClick: function () {
    this.toast.show("我是toast");
  },
})