微信小程序自定义一个组件

微信小程序中的组件

ps:

刚做小程序的时候，上传代码有限，组件开发在官方文档的描述又少的可怜，当时真的是非常的痛苦，不过，不要慌，现在又了我这么长时间的积累，现在开发一个小程序自定义组件已经是一个很 So Eacy的事情了。 接下来，带大家一步一个脚印的自定义一个微信小程序的弹框组件。come！！开车==>

效果图：

效果图

开始吧，第一步：

我们初始化一个小程序，删掉index的实例代码，让index变的空空如也，并且新建一个components文件夹，用于存放我们接下来要开发用的组件，然后在components文件夹中创建一个 dialog 的文件夹，点击 dialog文件夹然后右键选择 Component 并命名为 dialog 会自动生产对应的文件，如果你现在的目录结构跟下面的这个一样，那就没啥问题，可以进入下一步了：

image.png

第二步：

1. 关于的组件所需要的基本工作已经做好了，接下来就是组件的相关配置，首先需要声明一下我们自定义的组件，打开我们创建的 dialog.json :将代码设置如下：

// dialog.json{  "component": true,//自定义组件声明
  "usingComponents": {} // 可选项，用于引入别的组件}
ps: 小伙伴们如果要copy这段代码记得删掉json文件中的注释哦，要不然会报错的

1. 接下来我们就需要写 dialog 的模板了，话不多说，直接上 dialog 的wxml和wxss 的代码

dialog.wxml ：

<!--pages/components/Dialog/dialog.wxml--><view class='dialog-container' hidden="{{!isShow}}">
    <view class='mask'></view>
    <view class='dialog'>
        <view class='dialog-title'>{{ title }}</view>
        <view class='dialog-content'>{{ content }}</view>
        <view class='dialog-footer'>
            <view class='dialog-btn' catchtap='cancelEvent'>{{ cancelText }}</view>
            <view class='dialog-btn' catchtap='confirmEvent'>{{ confirmText }}</view>
        </view>
    </view></view>

dialog.wxss

/* pages/components/Dialog/dialog.wxss */.mask{position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.3);
}.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;
}.dialog-title{font-size: 18px;padding: 15px 15px 5px;
}.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;
}.dialog-footer{display: flex;align-items: center;position: relative;line-height: 45px;font-size: 17px;
}.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);
}.dialog-btn{display: block;-webkit-flex: 1;flex: 1;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);position: relative;
}.dialog-footer .dialog-btn:nth-of-type(1){color: #353535;
}.dialog-footer .dialog-btn:nth-of-type(2){color: #3CC51F;
}.dialog-footer .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);
}

1. 组件的结构和样式都已经大功告成了，但是我们肯定还需要 js 来完成组件的功能，我相信眼神好的各位已经发现了一些会用到 js 的地方了吧，（斜眼笑） 栗子：{{isShow}}、{{title}} 还定义了 cancelEvent 和 confirmEvent 两个方法，这些都是在 dialog.js 中了

dialog.js 是自定义组件的构造器，是用小程序的 component 构造生产的 ，Component构造器可以用来指定自定义组件的属性、方法 、数据
配置一下dialog.js

// pages/components/Dialog/dialog.jsComponent({  /**
   * 组件的属性列表
   */
  options:{    multipleSlots: true //在组件定义时选项中启用slot
  },  // 组件的属性列表，用于组件自定义设置
  properties: {    // 弹窗标题
    title:{ // 属性名字
      type: String,// 类型(必填项){String,Number,Boolean,Object,null}
      value: '我是dialog'// 属性初始值
    },    // dialog 内容
    content: {      type: String,      value: '我是dialog内容'
    },    // 取消按钮
    cancelText: {      type: String,      value: '取消'
    },    // 弹窗确认按钮文字
    confirmText: {      type: String,      value: '确定'
    }
  },  /**
   * 组件的初始数据
   */
  data: {    isShow: false//dialog显示隐藏
  },  /**
   * 组件的方法列表
   */
  methods: {    // 隐藏弹框
    hideDialog(){      this.setData({        isShow: !this.data.isShow
      })
    },    // 展示弹框
    showDialog(){      this.setData({        isShow: !this.data.isShow
      })
    },

    cancelEvent(){      this.triggerEvent('cancelEvent')
    },
    confirmEvent(){      this.triggerEvent('confirmEvent')
    }
  }
})

1. 到现在我们已经完成了微信小程序自定义组件的大部分，接下来我们需要在 index.wxml 中引入它才可以使用哦
   index.json

{  "usingComponents": {    "dialog": "/pages/components/Dialog/dialog" // 这里要注意路径不能写错了哦，而且json文件不能有注释的
  }
}

index.wxml:

<view class="container">
    <dialog id='dialog' 
      title='dialog标题' 
      content='dialog内容部分' 
      cancelText='取消' 
      confirm='谢谢你'
      bind:cancelEvent="cancelEvent"  
      bind:confirmEvent="confirmEvent">
    </dialog>
    
    <button type="primary" bindtap="showDialog"> 点我显示 </button></view>

最后配置一下index.js

//index.js//获取应用实例const app = getApp()

Page({  /**
 * 生命周期函数--监听页面初次渲染完成
 */
  onReady: function () {    //获得dialog组件
    this.dialog = this.selectComponent("#dialog");
  },

  showDialog() {    this.dialog.showDialog();
  },  //取消事件
  cancelEvent() {    console.log('你点击了取消');    this.dialog.hideDialog();
  },  //确认事件
  confirmEvent() {    console.log('你点击了确定');    this.dialog.hideDialog();
  }

})

到这里就已经大功告成了，快去试试你的微信小程序组件是不是已经可以正常使用了哦，如果出现以下报错，那你一定没有好好的看我的代码

image.png

ps:如果你们出现了这个报错，把json文件里面的注释删掉就好了。

现在的微信小程序有了自定义组件，我们写小程序的时候也方便多了，我把小程序的代码推到github上，如果大家需要的话可以去拉以下

// gitHub本篇地址https://github.com/aizhoujin/applet-of-WeChat-component.git

结束，希望大家早日掌握好微信小程序，前端之路越走越远！~~~

作者：周瑾ruiqi
链接：https://www.jianshu.com/p/abfc6f669354