首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序中实现一键复制长段文本内容

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

作者头像
连胜
发布于 2018-03-07 02:24:22
发布于 2018-03-07 02:24:22
7.1K04
代码可运行
举报
运行总次数:4
代码可运行

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.setClipboardData({
  data: url,
  success: function (res) {
    util.showModelTips('复制成功');
  }
})

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

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

实例一:复制网址

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

实例二:复制全部文本

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.showActionSheet({
  itemList: ['复制内容', '上传背景图片'],
  success: function (res) {
    console.log(res.tapIndex)
  },
  fail: function (res) {
    console.log(res.errMsg)
  }
})

二、复制部分文本内容

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<text class="c-desc" selectable="true">{{detail.desc}}</text>

OK,今天就分享到这儿~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-08-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序开发(二)图片上传+服务端接收
这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口。
开发者技术前线
2020/11/23
2.3K0
微信小程序开发(二)图片上传+服务端接收
微信小程序----wx.showActionSheet(OBJECT)操作菜单(MUI操作表)
效果图 实现 利用了微信小程序的wx.showActionSheet(OBJECT)操作菜单API实现菜单操作; 利用wx.chooseVideo录制视频; 利用wx.chooseImage选取本地图
Rattenking
2021/02/01
1.6K0
微信小程序----wx.showActionSheet(OBJECT)操作菜单(MUI操作表)
「小程序JAVA实战」小程序的微信api菜单操作(67)
菜单按钮的介绍,点在视频详情时会出现菜单按钮,里面有多个选项。源码:https://github.com/limingios/wxProgram.git 中No.15和springboot 官方介绍
IT架构圈
2019/07/08
6160
「小程序JAVA实战」小程序的微信api菜单操作(67)
微信小程序-常用弹窗
showToast showModal showLoading showActionSheet 页面结构文件: <!--index.wxml--> <button bindtap="onShowToast">showToast</button> <button bindtap="onShowLoading">showLoading</button> <button bindtap="onShowModal">showModal</button> <button bindtap="onShow
程序员NEO
2023/05/22
6120
微信小程序-常用弹窗
微信小程序开发日记:重要的var that=this
什么是微信小程序 关于什么是微信小程序在网络上已经有很多文章介绍,这里就不再阐述了。简单来说微信小程序应该是嵌套在微信里面的应用,这个应用体现“用完即走”的理念,用户无需安装过多APP,应用无需下载,用完就销毁。 这给我们带来很多的思考,关于微信小程序未来会给我们带来什么样的体验以及更多的思考笔者以后会在其他文章进行阐述,这里就不过多的描述。 四个交互接口 新版本的微信小程序最新版本号是 0.10.102800,这次更新增加了 四个交互API: wx.showToast wx.showModal wx.h
极乐君
2018/02/05
1.8K0
微信小程序开发日记:重要的var that=this
干货 | 微信小程序长按保存图片
微信浏览器打开h5页面如果是img标签的话,长按会弹出保存图片的选项。但是微信小程序里面不可以,需要自己写这个功能。 这个功能有两个点,一个是长按,一个是保存图片到本地。 1. 微信小程序关于图片长按的解释,有两种: 因此我们选用 bindlongpress 事件 2. 保存图片接口 微信小程序同样提供了保存图片的接口,是wx.saveImageToPhotosAlbum() 3. 值得说的是,保存的接口,两个需要注意的地方: ① 需要先授权,调用 wx.getSetting()方法
腾讯NEXT学位
2020/02/10
4.6K0
干货 | 微信小程序长按保存图片
小程序弹出框详解
标题图 小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假']; wx.showActionSheet({ itemList: itemList, success: function(res) { console.log(res); console.log(itemList[res.tapIndex]); }, fail: function(res) {
达达前端
2019/07/04
4K0
微信小程序展示弹窗的几种方式
https://img-blog.csdnimg.cn/20200824143538219.gif#pic_center
peng_tianyu
2022/12/15
5.6K0
微信小程序展示弹窗的几种方式
小程序上传图片加水印
注意事项: 1.如果在画图完成后,有对应操作时,必须在draw的callback后执行,比如图片预览、改变画布大小等 ctx.draw(false, function() { console.log(‘后续操作’);
全栈程序员站长
2022/07/04
1.2K0
微信小程序-点击复制功能
wxml: <view class="page"> <view class="template flex-col" wx:for="{{templateList}}" wx:key="{{templateList}}" wx:for-index='idx'> <view class="title">{{item.Title}}</view> <view class="content">{{item.TemplateText}}</view> <view class="cop
超级小可爱
2023/02/20
3.9K0
一键复制时间提醒
这两天写了个超级简单的微信小程序,展示时间提醒,同时支持将提醒信息一键复制到剪贴板:
TTTEED
2020/07/09
7450
前端技术前沿6
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
达达前端
2019/07/03
6210
前端技术前沿6
「小程序JAVA实战」小程序的分享和下载功能(69)
这样就实现了转发功能了,这个里面的path一定要填路径,不然你转发给好友,好友点击会出现找不到页面的问题
IT架构圈
2019/07/08
1.3K0
「小程序JAVA实战」小程序的分享和下载功能(69)
小程序实现地图方面功能和代码示例
小程序实现地图开发主要依赖于地图API,目前微信小程序支持腾讯地图API和百度地图API。以下是实现地图开发的基本步骤:
飞梦工作室
2023/08/29
8170
微信小程序上传图片
//添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset.index; var evalList = this.data.evalList; var that = this; var imgNumber = evalList[index].tempFilePaths; if (imgNumber.length >= 3) { wx.showModal({
达达前端
2022/04/29
1.8K0
小程序点击复制功能_怎么复制小程序链接
长按复制,在微信小程序内的文字无法长按复制,除了text节点以外,但是要在text标签内加一个“selectable”属性。
全栈程序员站长
2022/11/11
7K0
微信小程序学习笔记,持续记录。
开始 1. 小程序开发指南(入门必读):https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ace6c960378
房东的狗丶
2023/02/17
1.5K0
微信小程序学习笔记,持续记录。
【愚公系列】2022年02月 微信小程序-app.json配置属性之entryPagePath
指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages 列表的第一项。不支持带页面路径参数。
愚公搬代码
2022/02/22
1K0
【愚公系列】2022年02月 微信小程序-app.json配置属性之entryPagePath
微信小程序与用户交互
显示Loading提示框,不会自动关闭,需主动调用 wx.hideLoading 才能关闭提示框
小小咸鱼YwY
2020/06/19
1.6K0
全栈开发工程师微信小程序-中(下)
wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元.
达达前端
2019/07/03
5690
相关推荐
微信小程序开发(二)图片上传+服务端接收
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验