微信小程序常用组件（模态框、promise封装request）

本人编程新手，最近再做一个微信小程序项目，用到了这两个组件，也是在网上找了自己修改的，发出来希望能帮助更多人！

目录

模态框组件

promise封装request

---

模态框组件

wxml：

<!-- 为实现过渡效果，舍弃wx:if，使用透明度属性，未被启用时z-index为-1，避免影响页面其他元素 -->
<view class="mask" style="opacity:{{isShowModal?'1':'0'}}; z-index: {{isShowModal?'9999':'-1'}};" bindtap="clickMask"></view>
<view class="modal-wrapper" style="opacity:{{isShowModal?'1':'0'}}; z-index: {{isShowModal?'10000':'-1'}};">
  <view class="modal-content">
    <view class="main-content">
      <view class="title">{{title}}</view>
      <!-- 模态框中的内容 -->
      <slot></slot>
    </view>
    <view class="modal-btn-wrapper">
      <button wx:if="{{isShowCancel}}" class="cancel-btn" bindtap="handleCancel">取消</button>
      <button class="confirm-btn" bindtap="handleConfirm">确认</button>
    </view>
  </view>
</view>

scss：

.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.modal-wrapper {
  position: absolute;
  width: 100%;
  top: 20%;
  left: 10%;
  transition: all 0.3s ease;
  .modal-content {
    width: 80%;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    text-align: center;

    .main-content {
      .title {
        margin-bottom: 40rpx;
      }
    }

    .modal-btn-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;

      .cancel-btn,
      .confirm-btn {
        width: 175rpx;
        text-align: center;
        font-size: 35rpx;
        line-height: 80rpx;
        border-radius: 12rpx;
        color: var(--themeColor);
        border: 2rpx solid var(--themeColor);
      }

      .confirm-btn {
        background-color: var(--themeColor);
        color: #fff;
      }
    }
  }
}

js：

Component({
  properties: {
    // 是否显示modal
    isShowModal: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal, changedPath) {
        this.setData({
          isShowModal: newVal
        })
      }
    },
    // 自定义标题
    title: {
      type: String,
      value: '',
      observer: function (newVal, oldVal, changedPath) {
        this.setData({
          title: newVal
        })
      }
    },
    // 是否显示取消按钮（默认显示）
    isShowCancel: {
      type: Boolean,
      value: true,
      observer: function (newVal, oldVal, changedPath) {
        this.setData({
          isShowCancel: newVal
        })
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShowModal: false,
    title: '',
    isShowCancel: true,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击遮罩层关掉modal
    clickMask() {
      this.setData({
        isShowModal: false
      })
    },

    handleCancel: function () {
      this.triggerEvent("handleCancel")
      this.setData({
        isShowModal: false
      })
    },

    handleConfirm: function () {
      this.triggerEvent("handleConfirm")
      this.setData({
        isShowModal: false
      })
    }
  }
})

看着别的小程序过渡动画都蛮精美，自己也尝试做了一个，用display: none;是不行的，得使用透明度opacity。为防止遮挡页面其他元素，未启用时z-index设置为了-1，可根据需求修改。

在页面中调用的话，json文件这样写：

{
  "usingComponents": {
    "showModal":"/components/showModal/showModal"
  }
}

使用举例：

<showModal title="一个提示性标题"
isShowMadal="{{判断是否显示模态框（true | flase）}}"
isShowCancel="{{判断是否显示取消按钮（true | flase）}}"
bind:handleCancel="一个页面函数，在点击取消按钮后被触发"
bind:handleConfirm="一个页面函数，在点击确认按钮后被触发">
  <!-- 中间写在模态框中的内容 -->
</showModal>

注意，页面函数用函数名字符串即可

promise封装request

  /**
 *  使用Promise 对wx.request进行封装
 * @param {url,method,data} params 
 */

const request = (params = {methods, url, data,header}) => {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: params.url,
      method: params.method,
      header: params.header,
      data: params.data,
      timeout: 5000,
      success(res) {
        if (res.statusCode == 200) {
          if (res.data.code == 200 || res.data.code === 0) {
            resolve(res);
          } else {
            reject(res.data);
          }
        } else {
          wx.showToast({
            title: '提示',
            content: '网络请求超时！',
          })
          reject();
        }

      },
      fail(err) {
        reject(err)
      }
    })
  })
}

module.exports = {
  request
}

附带了一个请求超时，在then中调用。

调用该组件的话，在页面js的开头这样写就好了：

const { request } = require('../../utils/request');

具体使用的话，也给个例子：

request({
          url: url, // 后端定义的接口
          method: 'GET', // 接口的调用方法
          data: {}, // 接口需要的参数
          header: {}, // 接口需要的头
        }).then(res => {
          // 处理成功调用时返回的参数res
        }).catch(err => {
          // 处理调用失败时返回的参数err
        })

一层层"then"下去就好了，比起异步请求方便得多。