微信小程序原生组件封装

1.和pages文件同级的文件components文件夹下创建一个想要的组件popup,popup组件有popup.html, popup.css, popup.json, popup.js 四个文件 2.组件中写入传入的参数，在properies中声明传入参数类型 3.父组件给子组件传递时间逻辑 3.1子组件bindtap=‘事件名’ ；如bindtap=’_blue’ 3.2 子组件js中_blue(){this.triggerEvent(‘blue’)} 3.3父组件中直接事件名称改为铂略，bind:blue=‘事件名’即可时间传入成功

4.组件popup.js文件如下

var app = getApp()
const util = require(../../utils/util.js)
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {  //声明传参类型
    popupTitle: {
      type: String
    },
    // 弹窗内容
    popupCon: {
      type: String
    },
    // 弹窗取消按钮文字
    clickNum: {
      type: Number
    },
    titleIcon:{
      type:String
    },
    bgImg:{
      type:String
    },
    choose: {
      type: Number
    },
    // 弹窗确认按钮文字
    popupBtn: {
      type: Number
    },
    popupGray: {
      type: String
    },
    popupBlue: {
      type: String
    },
    popupAside: {
      type: Number
    },
    popupRightTop: {
      type: Number
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
    imgServer: app.data.imgServer, //图片服务器
    buyAgree:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup() {
      this.setData({
        flag: !this.data.flag
      })
    },

    // 防止重复点击
    _blue: util.throttle(function (e) {
          this.triggerEvent("blue")
    }, 1000),
    _gray: util.throttle(function (e) {
          this.triggerEvent("gray")
    }, 1000),
    
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _close() {
      //触发取消回调
      this.triggerEvent("close")
    },
    // _blue() {
    //   this.triggerEvent("blue")
    // },
    // _gray() {
    //   this.triggerEvent("gray")
    // },
    _success() {
      //触发成功回调
      this.triggerEvent("success");
    }
  }
})

5.组件popup.wxml文件如下

<!--components/popup/popup.wxml-->
<view class="wx-popup" hidden="{
         
  {flag}}">
  <view class=popup-container{
         
  {choose}} style={
         
  {bgImg}}>
    <view class="wx-popup-title">
      <image class=wx-popup-titleIcon src={
         
  {titleIcon}} mode="widthFix" wx:if="{
         
  {choose ===100}}"></image>
      {
         
  {popupTitle}}
    </view>
    <view class="wx-popup-con{
         
  {choose}}">{
         
  {popupCon}}</view>
    <view class=buy wx:if="{
         
  {buyAgree}}">
      <view class=yes>√</view>我已同意《XXXXXX规则》
    </view>
    <view class="wx-popup-btn">
    <text class="btn-red" wx:if="{
         
  {popupBtn === 3}}" bindtap=_blue>{
         
  {popupBlue}}</text>
    <text class="btn-gray" wx:if="{
         
  {popupBtn === 3}}" bindtap=_gray>{
         
  {popupGray}}</text>
      <text class="btn-gray" wx:if="{
         
  {popupBtn === 2}}" bindtap=_gray>{
         
  {popupGray}}</text>
      <text class="btn-blue" wx:if="{
         
  {popupBtn === 2}}" bindtap=_blue>{
         
  {popupBlue}}</text>
      <view class=btn-know{
         
  {choose}} wx:if="{
         
  {popupBtn === 1}}" bindtap=_close>{
         
  {popupBlue}}</view>
    </view>
    
    <view class=help wx:if="{
         
  {choose !=100}}">
      <!-- <view class=helpIcon wx:if="{
         
  {popupAside === 1}}">?</view> -->
      <image class=helpIcon wx:if="{
         
  {popupAside === 1}}" src=https://bc5-pub.oss-cn-hangzhou.aliyuncs.com/miniprogram_image/bc5AgentWechat/v15_agent/icon_blueHelp.png></image>
      <view class=helpDesc wx:if="{
         
  {popupAside === 1}}">如有疑问请点这里</view>
      <view class=aside bindtap=_close  wx:if="{
         
  {popupAside === 0}}" >暂时不处理</view>
    </view>

    <view class=close bindtap=_close wx:if="{
         
  {popupRightTop === 1}}" >
      <view class=closeIcon>×</view>
    </view>
     <view class=question wx:if="{
         
  {popupRightTop === 0}}">
      <view class=questionIcon>?</view>
    </view>
   </view>  
</view>

6.父组件使用页面的.json文件如下 7.父组件引入如下

<popup id=popup bind:close="_close" bind:success="_success" bind:blue="_blue" bind:gray="_gray" clickNum="{
         
  {clickNum}}" titleIcon="{
         
  {titleIcon}}" choose="{
         
  {choose}}" popupTitle="{
         
  {popupTitle}}" popupCon="{
         
  {popupCon}}" popupBtn="{
         
  {popupBtn}}" popupGray="{
         
  {popupGray}}" popupBlue="{
         
  {popupBlue}}" popupAside="{
         
  {popupAside}}" popupRightTop="{
         
  {popupRightTop}}" bgImg="{
         
  {bgImg}}"></popup>

8.父组件调子组件内方法 父组件页面初次渲染完成的方法 onReady(){ this.popup = this.selectComponent("#popup"); //对应父组件引入子组件的id } 后面若用到子组件中方法，则只需this.popup.方法名()即可