小程序中实现一键复制长段文本内容

做小程序开发,就知道其实小程序是有限制的,在小程序内无法打开网址,只允许从一个小程序跳到另一个小程序。

今天主要不是说小程序的限制,我们来看一下,如果网址不能打开的情况下,能否给用户提供“一键复制”功能?

必须可以,微信提供了复制的API,如下:

wx.setClipboardData({
  data: url,
  success: function (res) {
    util.showModelTips('复制成功');
  }
})

我们来看一下“一键复制”的使用场景~

一、复制全部内容(今天要说的重点)

实例一:复制网址

这个就是上面说的例子,就不详细介绍了

实例二:复制全部文本

这种情况也有,就是想复制一段内容出来。做法是监听长按事件bindlongtap,然后触发弹层,点击弹层,触发“复制代码”~

实例三:复制所有内容,用微信通用菜单形式展示

看了小程序的API,其实也提供了showActionSheet方法,可以把菜单做的更像微信原生菜单,效果图和代码如下:

wx.showActionSheet({
  itemList: ['复制内容', '上传背景图片'],
  success: function (res) {
    console.log(res.tapIndex)
  },
  fail: function (res) {
    console.log(res.errMsg)
  }
})

二、复制部分文本内容

小程序API也提供了选择复制,就是使用text标签,设置selectable="true",并且必须是text标签,如下:

<text class="c-desc" selectable="true">{{detail.desc}}</text>

OK,今天就分享到这儿~

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云端架构

【云端架构】前端CSS3技巧:fit-content水平居中

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么...

42311
来自专栏前端vue

4.添加导航、分栏布局,配置路由及对应页面、登陆、404

侧边栏的导航与页面相对应,根据导航栏新建对应页面(含登陆、404) src目录下新建views文件夹用来放视图文件

904
来自专栏无所事事者爱嘲笑

react-navigation 中的多tabs嵌套时内部tabs无法正常切换问题

1995
来自专栏Jerry的SAP技术分享

SAP Fiori应用Footerbar区域按钮的高亮显示逻辑

如果您够细心,您或许会发现有的SAP Fiori应用的footerbar区域内的按钮有高亮显示,有的则没有。

1778
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第4章 示波器设计—主界面布局和框架

emWin主界面框架主要有三种(当然,还有很多其它种类,我们这里仅说明以下三种):

1044
来自专栏分享达人秀

Android应用实战,不懂代码也可以开发

通过上一期的学习,我们成功开发了Android学习的第一个应用程序,不仅可以在Android模拟器上运行,同时还能在我们的Android手机上运行,是不...

1759
来自专栏听雨堂

微信小程序:字体保持大小

小程序和网页差不多,前台用wxml把内容摆好,然后用css调整样式。所以和web一样,必须要能够精确控制每一个元素的大小。在Web中,通过CSS基本达到了像素级...

3197
来自专栏python3

tkinter -- Canvas(3)

scale 缩放 item,计算公式:(coords - offset)*scale + offset

632
来自专栏Android干货

安卓开发-设置RadioButton的点击效果

3097
来自专栏vue学习

29、地址列表

(1)关于颜色的改变前面在做轮播图的时候我们已经处理过,当时我们的解决方法是用在开发中工具中找到它的class类名,然后我们使用vue的穿透选择器改变这个类名的...

834

扫码关注云+社区