微信小程序自定义组件——模态框 Modal

码农天地 - 2020-09-27 13:10:06

---

版权声明：本文原创，转载请注明出处 https://segmentfault.com/a/11...

系列文章：微信小程序自定义组件——底部菜单栏 ActionSheet

之所以写这个自定义modal组件，和自定义ActionSheet一样，主要是用于一些开放能力。有些开放能力必须绑定在button上，比如用户授权，这个需求很常见，但是小程序现在已经不支持主动弹出授权框了，所以我们会想先弹出modal用户点击确定再来弹出授权框，小程序原生的Modal确定按钮无法实现，故此组件应运而生。该Modal组件还支持转发，打开设置页的开放能力，同时也扩展了提交表单功能。

安装1.使用npm安装

直接使用小程序开发工具自带的构建npm，请按下面几个步骤引入：

确保项目目录下有package.json文件，已有的跳过这一步

$ npm init

安装

$ npm i wx-miniprogram-modal

在小程序开发者工具中依次找到并点击工具->构建npm，构建完成后你的项目目录会多出一个miniprogram_npm目录，请确保项目设置已勾选使用npm模块在使用组件的页面配置json中使用

{
  "usingComponents": {
    "mymodal": "wx-miniprogram-modal"
  }
}

2.不使用任何构建工具的普通小程序安装

直接拷贝wx-miniprogram-modal仓库中的miniprogram_dist目录下的代码到项目中的放组件的目录中去，之后使用方法和小程序自定义组件一样了。同样需要在页面配置json中声明：

{
  "usingComponents": {
    "mymodal": "../components/modal/index" // 根据你的目录写
  }
}

使用

wxml文件中

<mymodal type="{{type}}" title='{{title}}' content='{{content}}' form-items="{{items}}"
confirmText='{{confirmText}}' showStatus='{{showModal}}' showCancel="{{showCancel}}" 
bind:complete="onComplete"></mymodal>

js文件中

// 只列出核心代码
Page({
  data: {
    showModal: false,
    type: 'getUserInfo',
    showCancel: false,
    title: '提示',
    content: '',
    confirmText: '好的',
    items: [{ label: '请输入姓名', name: 'name' }]
  },

  // 完成操作的回调
  onComplete: function (e) {
    //  关闭模态框  这里其实不写也行，组件里已经包含了关闭modal的代码，
    //  但是不写这个的话，该页面的data里的showModal值是不会变仍是true，
   //  如果确定不会造成其他影响，写不写看个人
    this.setData({
      showModal: false,
    })

    if (e.detail.confirm) {
      // 用户点击确定
      // 各个type携带的数据 这里为了方便写到一起了
      
      // 用户授权
      if (this.data.type === 'getUserInfo') {
        if (e.detail.hasUserInfo) {
          // 已经授权
          this.setData({
            hasUserInfo: true,
            userInfo: e.detail.userInfo
          })
          app.globalData.userInfo = e.detail.userInfo
        } else {
          wx.showToast({
            title: '您拒绝了授权',
            icon: 'none'
          })
        }
      }

      // 提交表单
      if (this.data.type === 'prompt') {
        var formData = e.detail.formData
        var formId = e.detail.formId
        // eg.
        // formData: {name: "Jaime"}
        // formId: "the formId is a mock one"
      }

      // 打开设置页
      if (this.data.type === 'openSetting') {
        var authSetting = e.detail.authSetting
        // eg. { "scope.userInfo": true}
      }
    } else {
      // 用户点击取消
    }
  },

  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 因为自定义组件内不能使用转发回调 所以在这关闭模态框
      // 不写这个 模态框点击转发按钮将不会自动关闭 
      if (res.target.dataset.type === 'modalShare') {
        this.setData({
          showModal: false
        })
      }
    }
    return {
      title: '自定义转发标题',
      path: '/page/index?id=123'
    }
  }
})

参数属性数据类型说明选项默认值showStatusBooleanmodal的显隐状态必填—typeStringmodal的类型，可选值：prompt、getUserInfo、share、openSetting必填—showCancelBoolean是否显示取消按钮选填falseconfirmTextString确定按钮的文字选填好的cancelTextString取消按钮的文字选填取消titleString标题，不写或为空时则不显示title选填无contentStringmodal的内容选填—formItemsArraytype='prompt'时必填的表单项属性，格式: [{label: '输入框label', name: '键名', val: '初始值(可为空)'}, ...]选填[]reportSubmitBooleantype="prompt"时 是否返回 formId选填false触发事件eventName说明completemodal完成时触发的事件，e.detail.confirm来判断是取消还是确定，type='prompt'时携带的数据包括e.detail.formData和e.detail.formId; type='getUserInfo'时携带的数据为e.detail.hasUserInfo,e.detail.userInfo; type='openSetting'时携带的数据为e.detail.authSetting; 具体请看示例注意事项type = 'prompt'时，必须设置表单项属性 formItems="{{items}}"；

表单项属性 formItems 格式如下：

[{label: '请输入姓名', name: 'name', val: '初始值(可为空)'}, 
{label: '请输入邮箱', name: 'email'}, val: '']

提交后表单数据将重置为初始值

type='share' 页面生命周期需声明onShareAppMessage,并且在内部加上以下代码，因为自定义组件内不能使用转发回调 所以在这关闭模态框，不写这个 模态框点击转发按钮后将不会自动关闭；

if (res.from === 'button') {
    if (res.target.dataset.type === 'modalShare') {
      this.setData({
        showModal: false
      })
    }
  }

type='getUserInfo'时，按需求来设定授权modal初始显隐状态。

建议：项目中先wx.getSetting查看用户是否已经授权，未授权showStatus初始设为true将主动弹出该弹框，若已授权showStatus初始设为false避免多次弹出；

每个type携带的数据见上文代码示例或下载以下完整示例。示例Demo

微信小程序自定义组件使用示例整合

Tags 标签