La ventana emergente del subprograma WeChat muestra el contenido y realiza una copia de texto con un solo clic (wx.showModal y wx.setCLipboardData)

Descripción del requisito

Hoy, cuando estaba trabajando en un subprograma de WeChat, encontré un requisito de desarrollo. En pocas palabras, el usuario puede hacer clic en un botón o en un área determinada para mostrar un texto o archivo determinado y copiar el texto.

Concebir

Lo que hice al principio fue implementar un evento de clic y luego cambiar el valor booleano checkFlag para decidir si mostrar este texto. Por ejemplo, si hago clic en "Ver texto", checkFlag se convierte en verdadero y este texto se muestra en un área determinada, hago clic en "Ver texto" nuevamente, checkFlag se vuelve falso y el texto se oculta.

problema

Esta es la forma más estúpida en la que pensé al principio, pero no es demasiado hermosa después, y cuando la longitud del texto es incierta, el diseño de la página completa también es incierto, lo que resulta en el efecto general de toda la página no es demasiado "inteligente".

Mejora de uso de ventanas emergentes wx.showModal y wx.setCLipboardData

wx.showModal

Primero, aprenda sobre wx.showModal y verifique la documentación del subprograma:

wx.showModal({
    
    
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    
    
    if (res.confirm) {
    
    
      console.log('用户点击确定')
    } else if (res.cancel) {
    
    
      console.log('用户点击取消')
    }
  }
})

Resuma algunos parámetros que pueden usarse:

1. el título es el título
2. el contenido es el contenido rápido
3. showCancel determina si mostrar el botón cancelar
4. confirmText confirmar el texto del botón
5. Si la función de devolución de llamada object.sucess es el atributo confirmar, significa que el usuario hace clic en Aceptar; si es cancelar, significa que el usuario hizo clic en cancelar.

wx.setCLipboardData

La API replicada es muy simple.

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

En conjunto con

checkTextDetails es la función de respuesta del evento click bindtap.
El título y el contenido de wx.showModal son el título y el contenido que quiero solicitar al usuario.
Y cambié el texto del botón Aceptar a "copiar texto".
Éxito de la función de devolución de llamada, si el usuario hace clic en el botón Aceptar "copiar texto" y vuelve para confirmar, se volverá a llamar a 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
                }
              })
            }
          })
        }
      }
    })

  },
  

efecto final

Llame a la función checkTextDetails, aparece una ventana emergente que muestra el contenido y el título del mensaje.

Si hace clic para copiar el texto, la copia se realiza correctamente y la consola genera el texto copiado:

Precauciones

Nota: ** En el código anterior, escribí var that = this; ** Guardé el punto de esto, porque wx.setClipboardData se llama además en wx.showModal.
Si no escribe esto, es decir, elimine var that = this, y los datos de wx.setClipboardData son: data: this.data.homeworkContent;
como:

 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
                }
              })
            }
          })
        }
      }
    })

  },
 

Entonces se informará un error.

Si no escribe var that = this; otra forma de asegurarse de que esto apunta a es usar las funciones de flecha, el código se puede cambiar a:

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

También funciona perfectamente.
En resumen, preste atención a la dirección de esto.
También he resumido dos métodos para resolver este problema antes:

1. var que = esto
2. Función de flecha ES6