微信小程序自定义组件

微信小程序自定义组件

以下以自定义弹窗为例

先看小程序官方文档

 

在开发者工具中设置如下

上面的意思就是将Dialog这个页面(组件)设定为可以被别的页面引用

下面直接上弹窗也就是Dialog这个页面的wxml,wxss和wxjs代码

dialog.wxml

<!--components/Dialog/dialog.wxml-->
<view class='wx_dialog_container' hidden="{{!isShow}}">
  <view class='wx-mask'></view>
  <view class='wx-dialog'>
      <view class='wx-dialog-title'>{{ title }}</view>
      <view class='wx-dialog-content'>{{ content }}</view>
      <view class='wx-dialog-footer'>
        <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
        <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
      </view>
  </view>
</view>

dialog.wxss

/* components/Dialog/dialog.wxss */
.wx-mask{
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.wx-dialog{
    position: fixed;
    z-index: 5000;
    width: 80%;
    max-width: 600rpx;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}

.wx-dialog-title{
    font-size: 18px;
    padding: 15px 15px 5px;
}

.wx-dialog-content{
    padding: 15px 15px 5px;
    min-height: 40px;
    font-size: 16px;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    color: #999999;
}

.wx-dialog-footer{
    display: flex;
    align-items: center;
    position: relative;
    line-height: 45px;
    font-size: 17px;
}

.wx-dialog-footer::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D5D5D6;
    color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.wx-dialog-btn{
    display: block;
    -webkit-flex: 1;
    flex: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
}

.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
    color: #353535;
}

.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
    color: #3CC51F;
}

.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #D5D5D6;
    color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

dialog.js

Component({
options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
    // 弹窗标题
    title: {            // 属性名
    type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
        type: String,
        value: '弹窗内容'
    },
    // 弹窗取消按钮文字
    cancelText: {
    type: String,
    value: '取消'
    },
    // 弹窗确认按钮文字
    confirmText: {
    type: String,
    value: '确定'
    }
},

/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
    // 弹窗显示控制
    isShow: false
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
    /*
    * 公有方法
    */
    //隐藏弹框
hideDialog() {
  this.setData({
    isShow: !this.data.isShow
  })
},
//展示弹框
showDialog() {
  this.setData({
    isShow: !this.data.isShow
  })
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent() {
  //触发取消回调
  this.triggerEvent("cancelEvent")
},
_confirmEvent() {
  //触发成功回调
  this.triggerEvent("confirmEvent");
}
}
})

到这里弹窗的样式就设计好了，下面就是如何引用了

在需要引用的页面json文件中引入，代码如下：

然后在引入页面的wxml文件中加入如下代码：

<!--弹窗-->
<view class="container">
    <dialog id='dialog' 
        title='友情提示'        //这些根据情况自行修改
        content='扫描屏幕二维码并关注公众号后可领水' 
        cancelText='知道了' 
        confirm='确定'
        bind:cancelEvent="_cancelEvent"  
        bind:confirmEvent="_confirmEvent">
    </dialog>
</view>

在什么位置加都可以，因为它默认是不显示的，只有被调用的时候才会显示

那现在就添加调用它的js，在引入它的页面js中添加如下代码：

//弹窗
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
    //获得dialog组件
    this.dialog = this.selectComponent("#dialog");
},
//取消事件
_cancelEvent() {
    console.log('你点击了取消');
    this.dialog.hideDialog();
},
//确认事件
 _confirmEvent() {
    console.log('你点击了确定');
    this.dialog.hideDialog();
},

send(event) {
    var that = this
    wx.sendSocketMessage({
        data: JSON.stringify(   //将发送的数据改为键值对的json格式
            {
            "type": "message",
            "data": {
                '':''
            }
        }),
        success: function (e) {
            this.dialog.showDialog();  //触发弹窗
         },
    });  

}

别忘了wxml文件中还得绑定一下js中的send函数

<view class='index'>
  <text class='vipcn-name'>公众号1</text>
  <text class='focus' bindtap="send" data-index="公众号1">关注</text>
</view>

到这里，一个自定义组件弹窗就完成了

下面上一下效果图