微信小程序封装组件的实现,小程序如何封装组件

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈微信小程序封装组件的实现,小程序如何封装组件。

最新消息， 连接小程序细数有50多种，你都知道有哪些，掌握了这些就可以使小程序实现自然增长。 怎么做好小程序?其实小程序代表一个时代的连接器。

相信大家在开发小程序时会遇到某个功能多次使用的情况，比如弹出框。这个时候大家首先想到的是组件化开发，就是把弹出框封装成一个组件，然后哪里使用哪里就调用，对，看来大家都是有思路的人，但是要怎样实现呢。

微信小程序封装组件具体实现步骤：

1.新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图

2.我们可以写一些组件样式和布局，跟页面写法类似，我就不多说了，直接把代码贴出 :

popup.wxml

popup.wxss

/* component/popup.wxss */.wx-popup {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,.5);}.popup-container {position: absolute;left: 50%;top: 50%;width: 80%;max-width: 600rpx;border: 2rpx solid #ccc;border-radius: 10rpx;box-sizing: bordre-box;transform: translate(-50%,-50%); overflow: hidden;background: #fff;}.wx-popup-title {width: 100%;padding: 20rpx;text-align: center;font-size: 40rpx;border-bottom: 2rpx solid red;}.wx-popup-con {margin: 60rpx 10rpx;text-align: center;}.wx-popup-btn {display: flex;justify-content: space-around;margin-bottom: 40rpx;}.wx-popup-btn text {display: flex;align-items: center;justify-content: center;width: 30%;height: 88rpx;border: 2rpx solid #ccc;border-radius: 88rpx;}

样式和布局和布局已经写好了接下来要介绍的就是

Component构造器

Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。

Tips:

component介绍完后就是最为关键的js了

popup.js:

Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},/** * 组件的属性列表 */properties: {title: {// 属性名type: String,// 类型（必填），目前接受的类型包括：String,Number,Boolean,Object,Array,null（表示任意类型）value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个},// 弹窗内容content: {type: String,value: '内容'},// 弹窗取消按钮文字btn_no: {type: String,value: '取消'},// 弹窗确认按钮文字btn_ok: {type: String,value: '确定'} },/** * 组件的初始数据 */data: {flag: true,},/** * 组件的方法列表 */methods: {//隐藏弹框hidePopup: function () {this.setData({flag: !this.data.flag})},//展示弹框showPopup () {this.setData({flag: !this.data.flag})},/** 内部私有方法建议以下划线开头* triggerEvent 用于触发事件*/_error () {//触发取消回调this.triggerEvent("error")},_success () {//触发成功回调this.triggerEvent("success");}}})

上边会用到一个triggerEvent下面我们就来介绍下：

自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象和事件选项。

现在一个弹窗的组件就封装好了接下来就是调用了。

调用的时候需要在调用的页面新建一个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();}})

一个弹窗组件就完成了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!