微信小程式 彈窗展示内容并實作單擊複制文本（wx.showModal和wx.setCLipboardData）

微信小程式 實作單擊複制 wx.setCLipboardData

• 需求描述
• 構思
• 問題
• 改進——使用彈窗wx.showModal和wx.setCLipboardData
• • wx.showModal
  • wx.setCLipboardData
  • 結合使用
• 最終效果
• 注意事項

需求描述

今天在做微信小程式時，遇到一個開發需求。簡單來說就是，使用者點選按鈕或者某一區域，能夠顯示一定的文本或檔案，并且能夠複制文本下來。

構思

我一開始做的，是實作單擊事件，然後改變Boolean值checkFlag，去決定要不要顯示這個文本。譬如我點選“檢視文本”，checkFlag變為true，于是某個區域就顯示了這個文本；我再次點選“檢視文本”，checkFlag變為false，這個文本就被隐藏起來。

問題

這是最開始我想到的最笨的辦法，但是後面做出來并不是太美觀，而且當文本篇幅不确定，整個頁面的布局也是不太确定，導緻整個頁面的整體效果并不是太“聰明”。

改進——使用彈窗wx.showModal和wx.setCLipboardData

wx.showModal

首先了解一下 wx.showModal，查閱小程式的文檔：

wx.showModal({
  title: '提示',
  content: '這是一個模态彈窗',
  success (res) {
    if (res.confirm) {
      console.log('使用者點選确定')
    } else if (res.cancel) {
      console.log('使用者點選取消')
    }
  }
})
           

總結一下幾個可能會用到的參數：

1. title是标題
2. content是提示内容
3. showCancel确定是否顯示取消按鈕
4. confirmText 确定按鈕的文字
5. object.sucess回調函數如果是屬性confirm，說明使用者點選确定，如果是cancel，說明點選了取消。

wx.setCLipboardData

這個複制的API很簡單。

wx.setClipboardData({
  data: 'data',
  success (res) {
    wx.getClipboardData({
      success (res) {
        console.log(res.data) // data
      }
    })
  }
})
           

結合使用

checkTextDetails是點選事件bindtap的響應函數。

wx.showModal的title，content都是我想提示給使用者的标題和内容。

并且我把确定按鈕的文本改為了“複制文本”。

回調函數sucess，如果使用者點選了确定按鈕“複制文本”，傳回confirm，那麼将進一步調用wx.setCLipboardData。

checkTextDetails: function () {
    var that = this;
    wx.showModal({
      title: '作業說明',
      content: this.data.homeworkContent,
      showCancel: true,
      confirmText: '複制文本',
      success(res) {
        if (res.confirm) {
          wx.setClipboardData({
            data: that.data.homeworkContent,
            success(res) {
              wx.getClipboardData({
                success(res) {
                  console.log(res.data) // data
                }
              })
            }
          })
        }
      }
    })

  },
  
           

最終效果

調用checkTextDetails函數，出現彈窗，顯示提示内容和标題。

若點選複制文本，複制成功，且控制台輸出複制的文本：

注意事項

注意：**上述代碼我寫了一句 var that = this；**儲存了this的指向，因為是在wx.showModal下進一步調用wx.setClipboardData。

若不這麼寫，也就是說去掉var that = this,并且wx.setClipboardData的data是： data: this.data.homeworkContent；

如：

checkTextDetails: function () {
    // var that = this;   //去掉
    wx.showModal({
      title: '作業說明',
      content: this.data.homeworkContent,
      showCancel: true,
      confirmText: '複制文本',
      success(res) {
        if (res.confirm) {
          wx.setClipboardData({
            data: this.data.homeworkContent,   // this
            success(res) {
              wx.getClipboardData({
                success(res) {
                  console.log(res.data) // data
                }
              })
            }
          })
        }
      }
    })

  },
 
           

那麼就會報錯

如果不寫var that = this；另外一種保證this指向的方法是，用箭頭函數，代碼可以改作：

success:(res)=> {
        if (res.confirm) {
          wx.setClipboardData({
            data: this.data.homeworkContent,
            success(res) {
              wx.getClipboardData({
                success(res) {
                  console.log(res.data) // data
                }
              })
            }
          })
        }
      }
           

也是可以完美運作的。

簡言之，要注意this的指向。

之前也總結過解決這種問題的兩個方法：

1. var that = this
2. ES6箭頭函數