相信各人在开发小程序时会遇到某个功效多次使用的情形，，，
，，，好比弹出框。。这个时间各人首先想到的是组件化开发，，，
，，，就是把弹出框封装成一个组件，，，
，，，然后那里使用那里就挪用，，，
，，，对，，，
，，，看来各人都是有思绪的人，，，
，，，可是要怎样实现呢。。

微信小程序封装组件详细实现方法：

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

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

popup.wxml

<view class="wx-popup" hidden="{{flag}}">
  <view class='popup-container'>
    <view class="wx-popup-title">{}</view>
    <view class="wx-popup-con">{{content}}</view>
    <view class="wx-popup-btn">
      <text class="btn-no" bindtap='_error'>{{btn_no}}</text>
      <text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
    </view>
  </view>
</view>

popup.wxss

/* component/popup.wxss */
.wx-popup {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
  background: rgba(0, 0, 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 结构器结构的组件也可以作为页面使用。。
• 使用 this.data 可以获取内部数据和属性值，，，
  ，，，但不要直接修改它们，，，
  ，，，应使用 setData 修改。。
• 生命周期函数无法在组件要领中通过 this 会见到。。
• 属性名应阻止以 data 开头，，，
  ，，，即不要命名成 dataXyz 这样的形式，，，
  ，，，由于在 WXML 中，，，
  ，，， data-xyz="" 会被作为节点 dataset 来处理，，，
  ，，，而不是组件属性。。
• 在一个组件的界说和使用时，，，
  ，，，组件的属性名和data字段相互间都不可冲突（只管它们位于差别的界说段中）。。

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.wxml-->
<view class="container">
  <view class="userinfo">
    <button bindtap="showPopup"> 点我 </button>
  </view>
  <popup id='popup' 
      title='小组件' 
      content='学会了吗' 
      btn_no='没有' 
      btn_ok='学会了'
      bind:error="_error"  
      bind:success="_success">
  </popup>
</view>

设置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();
  }
})

一个弹窗组件就完成了。。