微信小程序-自己封装一个弹窗组件

微信小程序官方提供的弹窗真的是太不友好了！！提示的内容还最好不能超过三行，于是，参考着样式，自己动手撸一个！

一、创建组件

1.新建一个专门拿来放组件的目录

命名为component

2.新建一个弹窗组件的目录，在目录下新建一个同名的Component

结构跟普通页面一样

二、编写组件

1.wxml

<!--component/dialog/dialog.wxml-->
<view class="my-dialog" hidden="{{!showDialog}}">
  <view class="my-mask"></view>
  <view class="my-container">
    <view class="title">{{title}}</view>
    <view class="content">
      <view class="row" wx:for="{{content}}" wx:for-index="index" wx:for-item="item" wx:key="index">{{item.label}}：{{item.value}}</view>
    </view>
    <view class="btn-row">
      <view class="confirm" bindtap="_confirm">确定</view>
      <view class="cancel" bindtap='_cancel'>取消</view>
    </view>
  </view>
</view>

2.wxss

/* component/dialog/dialog.wxss */
.my-dialog {
  opacity: 1;
}
.my-dialog .my-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
.my-dialog .my-container {
  position: fixed;
  width: 80%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
  z-index: 5000;
}
.my-dialog .my-container .title {
  display: inline-block;
  width: 100%;
  margin: 20rpx 0 0 0;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
  color: #303133;
}
.my-dialog .my-container .content {
  margin: 10rpx 0 20rpx;
  display: inline-block;
  width: 100%;
  line-height: 50rpx;
  text-align: left;
}
.my-dialog .my-container .content .row {
  margin: 0 10%;
  width: 80%;
  font-size: 26rpx;
  color: #606266;
  word-break: break-all;
}
.my-dialog .my-container .btn-row {
  padding: 10rpx 0 0;
  display: inline-block;
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  font-size: 18px;
  border-top: 1rpx solid #c0c4cc;
}
.my-dialog .my-container .btn-row .confirm {
  float: right;
  width: 50%;
  height: 100%;
  color: #86c2ec;
}
.my-dialog .my-container .btn-row .cancel {
  color: #606266;
  float: right;
  width: calc(50% - 2rpx);
  height: 100%;
  border-right: 1rpx solid #c0c4cc;
}

3.js

// component/dialog/dialog.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      // 初始值
      value: '请确认提交信息'
    },
    content: {
      type: Array
    },
    confirmText: {
      type: String,
      value: '确定'
    },
    cancelText: {
      type: String,
      value: '取消'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showDialog: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    show() {
      this.setData({
        showDialog: true
      })
    },
    hide() {
      this.setData({
        showDialog: false
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _cancel() {
      //触发取消回调
      this.triggerEvent("cancel")
    },
    _confirm() {
      //触发成功回调
      this.triggerEvent("confirm");
    }
  }
})

4.json

{
  "component": true,
  "usingComponents": {}
}

三、在其他页面上使用组件

1.在json中引入

{
  "navigationBarTitleText": "记账",
  "usingComponents": {
    "dialog": "/component/dialog/dialog"
  }
}

2.wxml引入

<view>
  <!--这里还有一个表单，由于不是重点就不列出来了-->

  <!--这个按钮来触发弹窗的打开-->
  <button bindtap="handleSubmit" class="btn">新增资产项目</button>
  <dialog id="dialog"
      title="请确认资产项目信息"
      confirmText="确定"
      cancelText="取消"
      content="{{dialogContent}}"
      bind:cancel="handleCancelDialog"
      bind:confirm="handleConfirmDialog">
   </dialog>
</view>

3.在js中引入

// 有省略一些表单的数据的操作
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 表单数据
    assets: [],
    assetIndex: 0,
    isCostText: '支出',
    date: '',
    amount: null,
    descripition: '',
    // 用来放弹窗内容的，里面的格式应该为[{label: 'sadsa', value: 'dsadsad'}]
    dialogContent: []
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 获得dialog组件
    this.dialog = this.selectComponent("#dialog");
  },
  // 点击了提交记录按钮
  submitData(e) {
    // 打开确认框
    const data = this.data
    const dialogContent = [
      {
        label: '资产项目',
        value: data.assets[form.assetIndex].assetName
      },
      {
        label: '收入/支出',
        value: data.isCostText
      },
      {
        label: '交易日期',
        value: data.date
      },
      {
        label: '金额',
        value: `${data.amount} 元`
      },
      {
        label: '备注详情',
        value: data.description
      }
    ]
    this.setData({
      dialogContent: dialogContent
    })
    // 不定时也行的
    setTimeout(() => {
      // 打开弹窗
      this.dialog.show()
    }, 100)
  },
  // 点击了弹出框的取消
  handleCancelDialog() {
    this.dialog.hide()
  },
  // 点击了弹出框的确认
  handleConfirmDialog() {
    this.dialog.hide()
    wx.showLoading({
      title: '正在提交'
    })
    const form = this.data
    const params = {
      masterAssetId: this.data.assets[form.assetIndex].assetId,
      amount: form.isCost ? -form.amount : form.amount,
      description: form.description,
      transactionTime: form.date
    }
    // 这里一般都是与后台交互过程
    // 关闭loading
    wx.hideLoading()
  }
})

点击提交记录按钮前 弹窗出现后

参考文档

微信小程序官方API
(干货)微信小程序组件封装