微信小程序,我要做一个页面,主要用来分享资源,有多个资源标题按钮,点击直接复制好资源连接并提示已复制资源,请给完整的代码演示
时间: 2023-12-11 13:06:13 浏览: 53
微信小程序实现的一键复制功能示例
好的,以下是一个简单的微信小程序页面,包含多个资源标题和复制按钮,并且点击按钮会复制对应的资源链接并提示已复制资源的完整代码:
```html
<view class="container">
<view wx:for="{{resources}}" wx:key="title" class="resource">
<view class="title">{{item.title}}</view>
<button class="copy-btn" data-url="{{item.url}}" bindtap="onCopy">复制资源链接</button>
</view>
</view>
```
```js
Page({
data: {
resources: [
{
title: '资源标题1',
url: 'http://example.com/resource1',
},
{
title: '资源标题2',
url: 'http://example.com/resource2',
},
{
title: '资源标题3',
url: 'http://example.com/resource3',
},
],
},
onCopy: function (event) {
var url = event.currentTarget.dataset.url;
wx.setClipboardData({
data: url,
success: function () {
wx.showToast({
title: '已复制资源',
})
},
})
},
})
```
解释一下代码:
- 页面中的 `resources` 数组包含了多个资源的标题和链接,可以根据实际情况进行修改。
- 使用 `wx:for` 循环遍历 `resources` 数组,生成多个资源标题和复制按钮。
- `button` 标签上的 `data-url` 属性用于存储对应资源的链接。
- `onCopy` 函数中使用了 `event.currentTarget.dataset.url` 来获取当前点击按钮对应资源的链接,然后再将链接复制到系统剪贴板中,同时在复制成功后使用 `wx.showToast` 方法弹出提示框提示用户已复制资源。
希望这个代码能够帮助到你!
阅读全文