自定义微信小程序modal框

自定义微信小程序弹窗框modal组件

最近公司要做一个小程序，苦逼的没有ui，没有前端，作为后台的自己撸起袖子加油干，使用的微信小程序自有的一套UI库，勉强将项目做完了。最后想要实现一个修改密码的弹窗，但是微信官方api中的modal组件只能显示字符串，不能加入视图片段，网上扒了好多文章，站在前人的基础上写了一个modal组件

微信自定义组件从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
类似于页面，一个自定义组件由 json，wxml， wxss， js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：
modal.json文件

{
  "component": true,
}

在modal.wxml中写入组建模板

<view class='mask' wx:if='{{show}}'>
  
  <view class='modal-content' style='height:{{height}}'>
  <view class='modal-header'>{{title}}</view>
    <scroll-view scroll-y class='main-content'>
      <slot></slot>
    </scroll-view>
    <view class='modal-btn-wrapper'>
      <view class='cancel-btn' style='color:rgba(7,17,27,0.6)' bindtap='cancel'>取消</view>
      <view class='confirm-btn' bindtap='confirm'>确定</view>
    </view>
  </view>
</view>

组件模板中设定了页面的高度，默认时50%，可以在父组件中传入合适的值，同时，组件中使用<scroll-view></scroll-view>,保证即使高度不够的话区域会滚动显示；通过show参数控制组件的显示，其中确定和取消按钮设置了事件的监听，可以在父组件中定义，控制自由逻辑，
modal.js文件

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示modal
    show: {
      type: Boolean,
      value: false
    },
    //modal的高度
    height: {
      type: String,
      value: '50%'
    },
    title: {
      type: String,
      value: '弹窗'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

    cancel() {
      this.setData({ show: false })
      this.triggerEvent('cancel')
    },

    confirm(e) {
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      // this.setData({ show: false })
      this.triggerEvent('confirm', myEventDetail,myEventOption)
    }
  }
})

在modal.wxss中写入组建样式

.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.63);
  z-index: 99999999999;
}

.modal-content {
  display: flex;
  flex-direction: column;
  width: 90%;
  background-color: #fff;
  border-radius: 10rpx;
}

.modal-btn-wrapper {
  display: flex;
  flex-direction: row;
  height: 120rpx;
  line-height: 100rpx;
  border-top: 2rpx solid rgba(7, 17, 27, 0.1);
}

.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1px solid #e8e8ea;
}

.cancel-btn {
  border-right: 2rpx solid rgba(7, 17, 27, 0.1);
}

.confirm-btn {
  color: #3cc51f;
}

.main-content {
  padding:15px;
  flex: 1;
  height: 100%;
  overflow-y: hidden;
}

.modal-header {
  padding: 15px;
  font: 20px "microsoft yahei";
  text-align: center;
}

其中遮罩的z-index应尽可能大，保证组件是在页面最上层

下面就是调用了，demo项目中是在index中调用的
在index.json中声明一下组件地址

{
  "usingComponents": {
    "my-modal": "/component/modal/modal"
  }
}

这里my-modal是我自己定义在页面中使用的tag标明组件的，随意制定，只要后边的路径是正确的就可以了。
index.html文件

<!-- 引用组件的页面模版 -->
<view>
  <button bindtap='showModal' type='warn' style='top:180px;'>修改密码</button>
</view>
<my-modal show="{{isShow}}" title="修改密码" height="60%" bindcancel="cancle" bindconfirm="confirm">
  <view class="weui-cells weui-cells_after-title" style='width:90%;'>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">旧密码
          <font style="color:red;">*</font>
        </view>
      </view>
      <view class="weui-cell__bd">
        <input password="true" bindinput='oldPassInput' class="weui-input" placeholder="请输入旧密码" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">新密码
          <font style="color:red;">*</font>
        </view>
      </view>
      <view class="weui-cell__bd">
        <input bindinput='newPassInput' password="true" class="weui-input" placeholder="请输入新密码" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">确认密码
          <font style="color:red;">*</font>
        </view>
      </view>
      <view class="weui-cell__bd">
        <input bindinput='confirmPassInput' bindblur='confirmPass' password="true" class="weui-input" placeholder="请输入确认密码" />
      </view>
    </view>
  </view>
</my-modal>

index.js文件

const app = getApp()

Page({
  data: {
    isShow: false,
  },
  onLoad: function() {
   
  },
  //点击确定按钮回调事件
  confirm: function(e) {
    console.log('confirm', e)
    this.setData({
      isShow: false
    })
  },
  //点击取消按钮回调事件
  cancle: function(e) {
    console.log('cancle', e)
  },
  showModal: function() {
    this.setData({
      isShow: true
    })
  },
  oldPassInput: function(e) {
    console.log('监听旧密码输入:',e)
  },
  newPassInput: function(e) {
    console.log('监听新密码输入:',e)
  },
  confirmPassInput: function(e) {
    console.log('监听确认密码输入:', e)
  },
  confirmPass: function(e) {
    console.log('确认密码输入框失去焦点:', e)
  }
})

自定义组件官方说明的也很明确：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

demo地址：https://github.com/duanlizhi/my-mini-modal.git

还有一个微信小程序联系人的组件，也是结合前人的脚步整理使用的，稍后发不出来