WeChat applet realizes one-click copy wx.setCLipboardData
Description of Requirement
Today, when I was working on a WeChat applet, I encountered a development requirement. Simply put, the user can click a button or a certain area to display a certain text or file and copy the text.
Conceive
What I did at the beginning was to implement a click event, and then change the Boolean value checkFlag to decide whether to display this text. For example, if I click "View Text", checkFlag becomes true, and this text is displayed in a certain area; I click "View Text" again, checkFlag becomes false, and the text is hidden.
problem
This is the most stupid way I thought of at first, but it is not too beautiful later, and when the text length is uncertain, the layout of the entire page is also uncertain, resulting in the overall effect of the entire page is not too "smart".
Improvement-use pop-up windows wx.showModal and wx.setCLipboardData
wx.showModal
First, learn about wx.showModal and check the documentation of the applet:
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
Summarize a few parameters that may be used:
- title is the title
- content is the prompt content
- showCancel determines whether to display the cancel button
- confirmText confirm the text of the button
- If the object.sucess callback function is the attribute confirm, it means that the user clicks OK; if it is cancel, it means that the user clicked cancel.
wx.setCLipboardData
The replicated API is very simple.
wx.setClipboardData({
data: 'data',
success (res) {
wx.getClipboardData({
success (res) {
console.log(res.data) // data
}
})
}
})
In conjunction with
checkTextDetails is the response function of the click event bindtap.
The title and content of wx.showModal are the title and content that I want to prompt the user.
And I changed the text of the OK button to "copy text".
Callback function sucess, if the user clicks the OK button "copy text" and returns to confirm, then wx.setCLipboardData will be further called.
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
}
})
}
})
}
}
})
},
final effect
Call the checkTextDetails function, a pop-up window appears, showing the prompt content and title.
If you click to copy the text, the copy is successful and the console outputs the copied text:
Precautions
Note: **In the above code, I wrote var that = this; **I saved the point of this, because wx.setClipboardData is further called under wx.showModal.
If you don’t write this, that is to say remove var that = this, and the data of wx.setClipboardData is: data: this.data.homeworkContent;
such as:
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
}
})
}
})
}
}
})
},
Then an error will be reported.
If you do not write var that = this; another way to ensure that this points to is to use arrow functions, the code can be changed to:
success:(res)=> {
if (res.confirm) {
wx.setClipboardData({
data: this.data.homeworkContent,
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data) // data
}
})
}
})
}
}
It also works perfectly.
In short, pay attention to the direction of this.
I have also summarized two methods to solve this problem before:
- var that = this
- ES6 arrow function