微信小程序wx.setClipboardData复制文本

这篇具有很好参考价值的文章主要介绍了微信小程序wx.setClipboardData复制文本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天在开发中遇到一个问题,在小程序中 复制文本,在做之前也查了资料,大部分都是固定文本复制,(小程序本身是不能手动复制的)和需求还是不一样的。

对于复制官方文档中提供了:

wx.setClipboardData设置系统剪贴板的内容。调用成功后,会弹出 toast 提示"内容已复制",持续 1.5s。

方法一:要求在小程序页面中可以手动选择文本复制。

<text selectable="true">{{texts}}</text>

在text标签中添加 selectable="true" 属性就可以了。

方法二:当复制一段文字或者一行文字的时候。

<view wx:for="{{newArr}}" wx:key="index">
  <text class="modal-li" selectable="true">{{item.title}}</text>
<view class="iconfont icon-fuzhi" bindtap="copyBtn" data-title="{{item.title}}">复制</view>
</view>
copyBtn(){
    let that = this;
    wx.setClipboardData({//复制文本
        data: that.data.newArr,
         success: function (res) {
               wx.showToast({
                 title: '复制成功',
                icon:"none",
                mask:"true"//是否设置点击蒙版,防止点击穿透
              })
        }
     })
}

在复制按钮中添加 data-属性="{{item.属性}}" 就可以实现复制。

或者 当遇到复制手机号的时候也可以用这种方法来实现。


<text class="modal-li" selectable="true">{{title}}</text>
<view class="iconfont icon-fuzhi" bindtap="copyBtn" data-title="{{title}}">复制</view>

方法三:当循环出列表数据,点击复制,复制全部数据。这样就不能用data-了。如果用的话就是相当于一个li标签中有一个复制按钮,感觉用户体验也不好,也没达到需求。

<view class="iconfont icon-fuzhi" bindtap="copyBtn" >复制</view>
<view wx:for="{{newArr}}" wx:key="index">
  <text class="modal-li" selectable="true">{{item.title}}</text>
</view>
copyBtn() {
      let that=this;
      let result = "";
      let newcopy = that.data.newArr;
     for(var i = 0; i < newcopy.length; i++){
       console.log('遍历打印==', newcopy[i].title);
       wx.setClipboardData({//复制文本
        data: result += newcopy[i].title + "\n",
        success: function (res) {
              wx.showToast({
                title: '复制成功',
                icon:"none",
                mask:"true"//是否设置点击蒙版,防止点击穿透
              })
        }
      })
    };

首先遍历数组,其次生命一个变量,把数组拼接字符串。这样就可以复制全部的数据。

第一次接触小程序复制的功能,不足之处欢迎指正。文章来源地址https://www.toymoban.com/news/detail-494391.html

到了这里,关于微信小程序wx.setClipboardData复制文本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序-登录(wx.login)

    用户微信登录小程序有两种情况,分别为弹出登录提示和不弹出登录提示两种。弹出登录提示的情况下,用户确定后会向后台传入更多参数,例如用户昵称等。不弹出登录提示只能获取到用户的临时登录凭证code。主要根据第二种情况进行描述。 这个code具有时效性,能用于区

    2024年02月15日
    浏览(49)
  • 微信小程序 wx:if使用

    在微信小程序中,可以使用 wx:if 指令来控制某个元素是否需要被渲染到页面上。根据条件表达式的结果, wx:if 指令决定元素是否显示。 下面是使用 wx:if 的基本示例: 在上述代码中, wx:if 指令的值为一个条件表达式 {{condition}} ,根据该条件表达式的结果决定是否渲染 view 元

    2024年02月09日
    浏览(49)
  • 微信小程序本地存储(wx.setStorage)和(wx.setStorageSync)

     在微信小程序中,可以使用本地存储来保存一些数据比如用户状态,姓名,性别等; 本地存储主要包括两种方式:缓存和本地数据存储。 缓存 缓存是一种快速访问内存的临时存储机制,可以有效地提高应用程序的响应速度。在微信小程序中,可以使用 wx.setStorage 方法和

    2023年04月18日
    浏览(94)
  • 微信小程序如何实现兼容----wx.getSystemInfoSync、 wx.getSystemInfo、wx.canIUse

    小程序的宿主环境一直在迭代更新,提供更多的能力给开发者去完成更多的事情,所以你的小程序会运行在不同版本的宿主环境下。为了让你的小程序在不同环境下都能提供相应的服务,我们需要来了解一下在小程序中如何实现兼容办法。 1.针对不同手机进行程序上的兼容

    2024年02月09日
    浏览(49)
  • 微信小程序wx:for 的使用以及wx:key绑定

    wx:for基本使用 wx:for-item和wx:for-index重新命名item和index wx:key两种绑定方式以及注意事项 wx:for基本使用 业务层数据 视图层 wx:for遍历时候每一项名称为 item 每一项索引名称为 index wx:for-item和wx:for-index实现item和index重命名 wx:for-item=\\\"str\\\" 将原来名称 item 修改成 str wx:for-index=\\\"i 将原来

    2024年02月11日
    浏览(78)
  • 微信小程序封装wx.request请求

    对微信小程序的印象我还停留在2年前刚入行的时候,那是还不懂什么是Promise,只知道小程序发请求有时候要在success回调中嵌套好多层(后来我才知道这叫 回调地狱 )。最近刚好有个小程序的项目交给我发开发,加上如今的我自认为对Promise掌握的还可以,所以这次也尝试着封

    2024年02月16日
    浏览(45)
  • 微信小程序wx.getUserProfile的用法

    接触了以前开发的一个微信小程序,发现wx.getUserInfo这个官方接口不能获取用户的信息,我重新创建了一个新的项目,发现可以用wx.getUserProfile这个官方接口来获取用户信息,具体操作如下:1.首先在xxxx.jslim里面定义初始值,isAuthorization是为了解决每次登陆都需要获取用户信息

    2024年02月14日
    浏览(38)
  • 【微信小程序】列表渲染wx:for

    🏆今日学习目标:第十二期——列表渲染wx:for 😃创作者:颜颜yan_ ✨个人主页:颜颜yan_的个人主页 ⏰预计时间:20分钟 🎉专栏系列:我的第一个微信小程序 哈喽大家好,本期是微信小程序专栏第十二期,本期我们将学习列表渲染wx:for。 注意:每期内容是连载呢,建议大家

    2024年02月08日
    浏览(50)
  • 微信小程序 wx.request 请求封装

    1、添加一些统一的参数或者配置 2、加上默认的请求头和cookie(有就加,没有就为空) 3、将参数,即传入的url地址、请求头传入请求中 4、封装 post 和 get 请求,使代码使用更加方便,以维护

    2024年02月16日
    浏览(41)
  • 电子木鱼 微信小程序源码 今天你积功德了吗?

      电子木鱼已经是火了很久的小程序了,今天闲来无事自己搞着玩玩。大家没事可以部署一个放松一下心情。纯属娱乐。大家可以点击看看我部署的项目。 1、首先新建一个微信小程序,这个我就不在演示了。 2、html文件代码

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包