之所以寫這個(gè)自定義modal組件，和自定義ActionSheet一樣，主要是用于一些開放能力。有些開放能力必須綁定在button上，比如用戶授權(quán)，這個(gè)需求很常見，但是小程序現(xiàn)在已經(jīng)不支持主動(dòng)彈出授權(quán)框了，所以我們會(huì)想先彈出modal用戶點(diǎn)擊確定再來彈出授權(quán)框，小程序原生的Modal確定按鈕無法實(shí)現(xiàn)，故此組件應(yīng)運(yùn)而生。該Modal組件還支持轉(zhuǎn)發(fā)，打開設(shè)置頁(yè)的開放能力，同時(shí)也擴(kuò)展了提交表單功能。

安裝

1.使用npm安裝

直接使用小程序開發(fā)工具自帶的構(gòu)建npm，請(qǐng)按下面幾個(gè)步驟引入：

• 確保項(xiàng)目目錄下有package.json文件，已有的跳過這一步

$ npm init

• 安裝

$ npm i wx-miniprogram-modal

• 在小程序開發(fā)者工具中依次找到并點(diǎn)擊工具->構(gòu)建npm，構(gòu)建完成后你的項(xiàng)目目錄會(huì)多出一個(gè)miniprogram_npm目錄，請(qǐng)確保項(xiàng)目設(shè)置已勾選使用npm模塊
• 在使用組件的頁(yè)面配置json中使用

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

2.不使用任何構(gòu)建工具的普通小程序安裝

直接拷貝wx-miniprogram-modal倉(cāng)庫(kù)中的miniprogram_dist目錄下的代碼到項(xiàng)目中的放組件的目錄中去，之后使用方法和小程序自定義組件一樣了。同樣需要在頁(yè)面配置json中聲明：

{
  "usingComponents": {
    "mymodal": "../components/modal/index" // 根據(jù)你的目錄寫
  }
}

使用

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: '請(qǐng)輸入姓名', name: 'name' }]
  },

  // 完成操作的回調(diào)
  onComplete: function (e) {
    //  關(guān)閉模態(tài)框  這里其實(shí)不寫也行，組件里已經(jīng)包含了關(guān)閉modal的代碼，
    //  但是不寫這個(gè)的話，該頁(yè)面的data里的showModal值是不會(huì)變?nèi)允莟rue，
   //  如果確定不會(huì)造成其他影響，寫不寫看個(gè)人
    this.setData({
      showModal: false,
    })

    if (e.detail.confirm) {
      // 用戶點(diǎn)擊確定
      // 各個(gè)type攜帶的數(shù)據(jù) 這里為了方便寫到一起了
      
      // 用戶授權(quán)
      if (this.data.type === 'getUserInfo') {
        if (e.detail.hasUserInfo) {
          // 已經(jīng)授權(quán)
          this.setData({
            hasUserInfo: true,
            userInfo: e.detail.userInfo
          })
          app.globalData.userInfo = e.detail.userInfo
        } else {
          wx.showToast({
            title: '您拒絕了授權(quán)',
            icon: 'none'
          })
        }
      }

      // 提交表單
      if (this.data.type === 'prompt') {
        var formData = http://www.wxapp-union.com/e.detail.formData
        var formId = e.detail.formId
        // eg.
        // formData: {name: "Jaime"}
        // formId: "the formId is a mock one"
      }

      // 打開設(shè)置頁(yè)
      if (this.data.type === 'openSetting') {
        var authSetting = e.detail.authSetting
        // eg. { "scope.userInfo": true}
      }
    } else {
      // 用戶點(diǎn)擊取消
    }
  },

  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 因?yàn)樽远x組件內(nèi)不能使用轉(zhuǎn)發(fā)回調(diào) 所以在這關(guān)閉模態(tài)框
      // 不寫這個(gè) 模態(tài)框點(diǎn)擊轉(zhuǎn)發(fā)按鈕將不會(huì)自動(dòng)關(guān)閉 
      if (res.target.dataset.type === 'modalShare') {
        this.setData({
          showModal: false
        })
      }
    }
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      path: '/page/index?id=123'
    }
  }
})

參數(shù)

觸發(fā)事件

注意事項(xiàng)

1. type = 'prompt'時(shí)，必須設(shè)置表單項(xiàng)屬性 formItems="{{items}}"；

2. 表單項(xiàng)屬性 formItems 格式如下：

   [{label: '請(qǐng)輸入姓名', name: 'name', val: '初始值(可為空)'}, 
   {label: '請(qǐng)輸入郵箱', name: 'email'}, val: '']

   提交后表單數(shù)據(jù)將重置為初始值

3. type='share' 頁(yè)面生命周期需聲明onShareAppMessage,并且在內(nèi)部加上以下代碼，因?yàn)樽远x組件內(nèi)不能使用轉(zhuǎn)發(fā)回調(diào) 所以在這關(guān)閉模態(tài)框，不寫這個(gè) 模態(tài)框點(diǎn)擊轉(zhuǎn)發(fā)按鈕后將不會(huì)自動(dòng)關(guān)閉；

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

1. type='getUserInfo'時(shí)，按需求來設(shè)定授權(quán)modal初始顯隱狀態(tài)。

建議：項(xiàng)目中先wx.getSetting查看用戶是否已經(jīng)授權(quán)，未授權(quán)showStatus初始設(shè)為true將主動(dòng)彈出該彈框，若已授權(quán)showStatus初始設(shè)為false避免多次彈出；

1. 每個(gè)type攜帶的數(shù)據(jù)見上文代碼示例或下載以下完整示例。

示例Demo

微信小程序自定義組件使用示例整合

提取碼：28a2