
详解微信小程序之一键复制到剪切板

最近在开发小程序项目里遇到一个小难题-----一键复制
在网页开发里 我们可以引用大牛封装好的复制插件,比如无flash插件clipboard.js适用移动端,pc端-------
言归正装,打开微信开发文档打开-APi即可查询到:
第一个是设置要复制的内容到剪切板,第二个是获取剪切板的内容,我们要用到的是第一个设置剪切板内容:
1.
<text class="tblin_items_txt" selectable="true">{{detail.taokouling||''}}</text> <!-- 复制的对象--> <view class="tblin_items_btn" bindtap="copyTBL">一键复制</view><!-- 复制操作 -->
2.js:
copyTBL:function(e){ var self=this; wx.setClipboardData({ data: self.data.taokouling, success: function(res) { // self.setData({copyTip:true}), wx.showModal({ title: '提示', content: '复制成功', success: function(res) { if (res.confirm) { console.log('确定') } else if (res.cancel) { console.log('取消') } } }) } }); }
data里我这边是设置成接口给的数据然后赋值到这里,只要我们点击复制按钮即可将你要的内容复制到剪切板,从而达到复制效果。
或者也可以在复制的对象里设置参数。将参数对应值传到js复制指令的data里即可。
以上所述是小编给大家介绍的微信小程序一键复制到剪切板详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
微信小程序实现即时通信聊天功能的实例代码
项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30
-
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in
-
微信小程序onLaunch异步,首页onLoad先执行?
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了. //app.js App({ onLaunch: function () { console.log('onLaunch'); wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) {
-
微信小程序适配iphoneX的实现方法
一. 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhone X尺寸上的变化: 苹果对于 iPhone X 的设计布局意见如下: 核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡.也就是说 我们设计显示的内容应该尽可能的在安全区域内
-
微信小程序中上传图片并进行压缩的实现代码
小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button
-
微信小程序实现的一键复制功能示例
本文实例讲述了微信小程序实现的一键复制功能.分享给大家供大家参考,具体如下: 微信小程序不支持页面复制功能,故要实现某些信息的复制,需要开发复制功能 微信小程序中复制一般采用调用 wx.setClipboardData 接口 实现功能如下: 1,.wxml里写一个复制按钮 <button bindtap="copy"> 一键复制 </button> 2, .js里写复制功能 copy: function (e) { var that = this; wx.se
-
微信小程序自定义底部弹出框
本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下 效果图: html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_attr
-
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvue ui框架:mpvue-weui request请求:fly.js 1.项目初始化 注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了 接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可) npm默认从外网下载包,可能会比较慢,可以换
-
微信小程序wx:for循环的实例详解
列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 使
-
微信小程序自定义组件封装及父子间组件传值的方法
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class
随机推荐
- json转String与String转json及判断对象类型示例代码
- setup.exe microsoft.exe SP00LV.exe手动查杀
- JAVA线程同步实例教程
- iOS开发中最基本的位置功能实现示例
- 理解javascript定时器中的setTimeout与setInterval
- Java、JavaScript、Oracle、MySQL中实现的MD5加密算法分享
- PHP实现多关键字加亮功能
- 如何给phpcms v9增加类似于phpcms 2008中的关键词表
- PHP伪静态页面函数附使用方法
- Yii操作数据库的3种方法
- 浅谈谈Android 图片选择器
- Android 图片的三级缓存机制实例分析
- Node.js环境下编写爬虫爬取维基百科内容的实例分享
- 鼠标移入移出改变CSS样式的小例子
- 普桑灯光按钮的使用图解说明(路考用车)
- JQuery动画和停止动画实例代码
- jQuery Ajax调用WCF服务详细教程
- 详解Android开发中硬件加速支持的使用方法
- spring中ioc是什么
- monkeyrunner之电脑安装驱动(5)
其他
- pytorch实现矩阵的归一化操作
- springboot中事务的使用
- 微信小程序使用echarts的折线图
- elementui 是bigint
- springboot的yml数据库密码加密不可逆
- springboot 解析网页
- springboot整合activemq实现物联网学习资料
- logback参数由yaml定义
- java web学生成绩管理系统源代码
- docker 运行 nginx 配置 volume
- 开启diskearly失败
- three.js画多层多个的立方体
- 生成激活码 java
- C# cefsharp71 滚轮放大缩小
- 小程序 导航 获取参数
- .net core mvc 如何获取HTTP头
- js标题栏鼠标移动选项卡
- c# 动态给控件添加事件
- request 取body 第二次不行
- ubuntu20root登录不了