公共方法 - 剪贴板、复制文本(uni.setClipboardData、clipboard)

/* 复制 */
export function copy(text) {
	uni.setClipboardData({
		data: text,
		success: function () {
			uni.showToast({
				icon: 'none',
				title: '复制成功'
			})
		},
		fail: function () {
			uni.showToast({
				icon: 'none',
				title: '复制失败'
			})
		}
	});
}

注意:ios使用该api时,会回弹页面,用户体验感很不好
改进
使用clipboard插件

npm install clipboard --save

或者

yarn add clipboard

使用

import Clipboard from 'clipboard';
//复制文本插件
function handleClipboard (text, event, onSuccess, onError) {
  event = event || {}
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    onSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    onError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

/* 复制 */
export function copy(text) {
	const t = Vue.prototype._i18n;//多语言
	if(!text){
		//复制失败
		return;
	}
	handleClipboard(text,event,() => {
		//复制成功
	},() => {
		// 复制失败
	});
}

后来遇到一个重大问题,即ios上,有时候会复制不了,也不提示报错。
经过查询,发现是复制这个功能不能间接复制,间接复制指的是要在复制一个文本前,先请求了某个接口,从接口里拿到复制的文本,虽然也算用户触发复制,但不算直接触发,而是要经过一个接口才触发到复制,所以复制不了。
那么就要拆流程了,先拿到需要复制的文本,在让用户复制。

data(){
	return{
		copyText:''
	}
},
onLoad(){
	//先请求接口获取复制的文本
	this.getText();
},
methods:{
	//在进行复制
	copy(){
		...
	},
	//获取复制的文本
	getText(){
		...
		this.copyText = 'xxx'
	}
}
uni-app中,需要在manifest.json文件中设置剪贴板权限。具体步骤如下: 1. 打开manifest.json文件,找到“permission”字段,如果没有则需要手动添加。 2. 在“permission”字段中添加以下代码: ``` "clipboard": { "desc": "允许应用访问剪贴板" } ``` 3. 在需要使用剪贴板功能的页面中,可以通过uni.setClipboardDatauni.getClipboardData进行剪贴板的读写操作。 需要注意的是,如果应用需要在Android平台上使用剪贴板功能,还需要在AndroidManifest.xml文件中设置剪贴板权限。可以通过在App.vue文件中添加以下代码来自动设置: ``` <template> <div> <slot></slot> </div> </template> <script> export default { onLaunch: function() { #ifdef APP-PLUS plus.android.requestPermissions(["android.permission.READ_EXTERNAL_STORAGE", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.CAMERA", "android.permission.RECORD_AUDIO", "android.permission.ACCESS_COARSE_LOCATION", "android.permission.ACCESS_FINE_LOCATION", "android.permission.READ_PHONE_STATE", "android.permission.CALL_PHONE", "android.permission.READ_CONTACTS", "android.permission.WRITE_CONTACTS", "android.permission.GET_ACCOUNTS", "android.permission.ACCESS_WIFI_STATE", "android.permission.CHANGE_WIFI_STATE", "android.permission.ACCESS_NETWORK_STATE", "android.permission.CHANGE_NETWORK_STATE", "android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.REQUEST_INSTALL_PACKAGES", "android.permission.RECEIVE_BOOT_COMPLETED", "android.permission.WAKE_LOCK", "android.permission.VIBRATE", "android.permission.ACCESS_NOTIFICATION_POLICY", "android.permission.REQUEST_BACKGROUND_LOCATION", "android.permission.FOREGROUND_SERVICE", "android.permission.BLUETOOTH", "android.permission.BLUETOOTH_ADMIN", "android.permission.USE_FULL_SCREEN_INTENT"], function(e) { console.log("权限申请结果:" + JSON.stringify(e)); }); #endif } }; </script> ``` 以上代码会在应用启动时自动为应用申请所需的权限,其中包括剪贴板权限。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值