WeChatアプレットは、ワンクリックコピーwx.setCLipboardDataを実現します
要件の説明
今日、WeChatアプレットで作業していたときに、開発要件に遭遇しました。簡単に言えば、ユーザーはボタンまたは特定の領域をクリックして、特定のテキストまたはファイルを表示し、テキストをコピーすることができます。
構想する
最初に行ったことは、クリックイベントを実装してから、ブール値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('用户点击取消')
}
}
})
使用できるいくつかのパラメーターを要約します。
- タイトルはタイトルです
- contentはプロンプトコンテンツです
- showCancelは、キャンセルボタンを表示するかどうかを決定します
- ConfirmTextボタンのテキストを確認します
- object.sucessコールバック関数が属性confirmの場合は、ユーザーが[OK]をクリックしたことを意味します。キャンセルされた場合は、ユーザーが[キャンセル]をクリックしたことを意味します。
wx.setCLipboardData
複製されたAPIは非常に単純です。
wx.setClipboardData({
data: 'data',
success (res) {
wx.getClipboardData({
success (res) {
console.log(res.data) // data
}
})
}
})
と組み合わせて
checkTextDetailsは、クリックイベントbindtapの応答関数です。
wx.showModalのタイトルとコンテンツは、ユーザーにプロンプトを表示したいタイトルとコンテンツです。
そして、OKボタンのテキストを「テキストをコピー」に変更しました。
コールバック関数が成功し、ユーザーが[OK]ボタンの[テキストのコピー]をクリックして戻って確認すると、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; ** wx.setClipboardDataがwx.showModalの下でさらに呼び出されるため、このポイントを保存しました。
これを記述しない場合、つまり、var that = thisを削除すると、wx.setClipboardDataのデータは次の
ようになります。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
}
})
}
})
}
}
})
},
次に、エラーが報告されます
。varthat= this;を記述しない場合、これが指すことを確認する別の方法は、矢印関数を使用することです。コードを次のように変更できます。
success:(res)=> {
if (res.confirm) {
wx.setClipboardData({
data: this.data.homeworkContent,
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data) // data
}
})
}
})
}
}
また、完全に機能します。
要するに、これの方向に注意を払ってください。
また、この問題を解決するための2つの方法を以前に要約しました。
- var that = this
- ES6矢印機能