关于微信小程序:微信小程序自定义组件模态框-Modal

版权申明：本文原创，转载请注明出处 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'
    }
  }
})

参数

触发事件

注意事项

1. type = 'prompt'时，必须设置表单项属性 formItems="{{items}}"；

2. 表单项属性 formItems 格局如下：

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

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

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

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

1. type='getUserInfo'时，按需要来设定受权 modal 初始显隐状态。

倡议：我的项目中先 wx.getSetting 查看用户是否曾经受权，未受权 showStatus 初始设为 true 将被动弹出该弹框，若已受权 showStatus 初始设为 false 防止屡次弹出；

1. 每个 type 携带的数据见上文代码示例或下载以下残缺示例。

示例 Demo

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