之(zhī)所以(yǐ)寫這(zhè)個(gè)自定義modal組件，和(hé / huò)自定義ActionSheet一樣，主要(yào / yāo)是(shì)用于(yú)一些開放能力。有些開放能力必須綁定在(zài)button上(shàng)，比如用戶授權，這(zhè)個(gè)需求很常見，但是(shì)小程序現在(zài)已經不(bù)支持主動彈出(chū)授權框了(le／liǎo)，所以(yǐ)我們會想先彈出(chū)modal用戶點擊确定再來(lái)彈出(chū)授權框，小程序原生的(de)Modal确定按鈕無法實現，故此組件應運而(ér)生。該Modal組件還支持轉發，打開設置頁的(de)開放能力，同時(shí)也(yě)擴展了(le／liǎo)提交表單功能。

安裝

1.使用npm安裝

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

• 确保項目目錄下有package.json文件，已有的(de)跳過這(zhè)一步

$ npm init

• 安裝

$ npm i wx-miniprogram-modal

• 在(zài)小程序開發者工具中依次找到(dào)并點擊工具->構建npm，構建完成後你的(de)項目目錄會多出(chū)一個(gè)miniprogram_npm目錄，請确保項目設置已勾選使用npm模塊
• 在(zài)使用組件的(de)頁面配置json中使用

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

2.不(bù)使用任何構建工具的(de)普通小程序安裝

直接拷貝wx-miniprogram-modal倉庫中的(de)miniprogram_dist目錄下的(de)代碼到(dào)項目中的(de)放組件的(de)目錄中去，之(zhī)後使用方法和(hé / huò)小程序自定義組件一樣了(le／liǎo)。同樣需要(yào / yāo)在(zài)頁面配置json中聲明：

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

使用

wxml文件中

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

js文件中

// 隻列出(chū)核心代碼
Page({
  data: {
    showModal: false,
    type: 'getUserInfo',
    showCancel: false,
    title: '提示',
    content: '',
    confirmText: '好的(de)',
    items: [{ label: '請輸入姓名', name: 'name' }]
  },

  // 完成操作的(de)回調
  onComplete: function (e) {
    //  關閉模态框  這(zhè)裏其實不(bù)寫也(yě)行，組件裏已經包含了(le／liǎo)關閉modal的(de)代碼，
    //  但是(shì)不(bù)寫這(zhè)個(gè)的(de)話，該頁面的(de)data裏的(de)showModal值是(shì)不(bù)會變仍是(shì)true，
   //  如果确定不(bù)會造成其他(tā)影響，寫不(bù)寫看個(gè)人(rén)
    this.setData({
      showModal: false,
    })

    if (e.detail.confirm) {
      // 用戶點擊确定
      // 各個(gè)type攜帶的(de)數據 這(zhè)裏爲(wéi / wèi)了(le／liǎo)方便寫到(dào)一起了(le／liǎo)
      
      // 用戶授權
      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: '您拒絕了(le／liǎo)授權',
            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"
      }

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

  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 因爲(wéi / wèi)自定義組件内不(bù)能使用轉發回調 所以(yǐ)在(zài)這(zhè)關閉模态框
      // 不(bù)寫這(zhè)個(gè) 模态框點擊轉發按鈕将不(bù)會自動關閉 
      if (res.target.dataset.type === 'modalShare') {
        this.setData({
          showModal: false
        })
      }
    }
    return {
      title: '自定義轉發标題',
      path: '/page/index?id=123'
    }
  }
})

參數

觸發事件

注意事項

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

2. 表單項屬性 formItems 格式如下：

   [{label: '請輸入姓名', name: 'name', val: '初始值(可爲(wéi / wèi)空)'}, 
   {label: '請輸入郵箱', name: 'email'}, val: '']

   提交後表單數據将重置爲(wéi / wèi)初始值

3. type='share' 頁面生命周期需聲明onShareAppMessage,并且在(zài)内部加上(shàng)以(yǐ)下代碼，因爲(wéi / wèi)自定義組件内不(bù)能使用轉發回調 所以(yǐ)在(zài)這(zhè)關閉模态框，不(bù)寫這(zhè)個(gè) 模态框點擊轉發按鈕後将不(bù)會自動關閉；

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

1. type='getUserInfo'時(shí)，按需求來(lái)設定授權modal初始顯隐狀态。

建議：項目中先wx.getSetting查看用戶是(shì)否已經授權，未授權showStatus初始設爲(wéi / wèi)true将主動彈出(chū)該彈框，若已授權showStatus初始設爲(wéi / wèi)false避免多次彈出(chū)；

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

示例Demo

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

提取碼：28a2