微信小程序组件封装开发教程

自己封装的一个比较简单微信弹窗小组件，主要就是教会大家对微信小组件的用法和理解，因为微信小程序对组件介绍特别少，所以我就把自己的理解分享给大家。

工具/原料

微信小程序开发工具

前言

1、相信大家在开发小程序时会遇到某个功能多次使用的情况，比如弹出框。这个时候大家首先想到的是组件化开发，就是把弹出框封装成一个组件，然后哪里使用哪里就调用，对，看来大家都是有思路的人，但是要怎样实现呢。可能你会去看官方文档，但是微信的官方文档也是说的不太清楚，所以写起来也是非常痛苦。今天就和大家一起开发微信组件。

具体实现

1、我们先实现个简单的弹窗组件，详情图如下：

3、我们可以写一些组件样式和布局，跟页面写法类似，就不多说了，接下来要介绍的就是Component构造器Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。

3、现在一个弹窗的组件就封装好了接下来就是调用了。调用的时候需要在调用的页面新建一个json文件，json文件里需要配置usingComponents就是引用组件，看代码：index.json{usingComponents: { popup: /component/popup/popup}}现在基本上完成了需要的就是在首页引用了，配置index.js加上点击事件//index.js//获取应用实例const app = getApp()Page({onReady: function () { //获得popup组件 this.popup = this.selectComponent(#popup);}, showPopup() { this.popup.showPopup();}, //取消事件_error() { console.log(\'你点击了取消\'); this.popup.hidePopup();},//确认事件_success() { console.log(\'你点击了确定\'); this.popup.hidePopup();}})至此，一个弹窗组件就完成了。