uniapp 探索使用

Bonrui

已于 2024-11-04 17:11:35 修改

阅读量325

点赞数

分类专栏： uniapp 文章标签： html5

于 2022-04-18 16:55:51 首次发布

本文链接：https://blog.youkuaiyun.com/qinjm8888/article/details/124252533

版权

uniapp 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何在H5和非H5环境下实现文本复制功能，通过uni.setClipboardData接口和document.execCommand方法，确保在不同平台下都能成功复制内容，并提供了复制成功的提示反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、复制内容到剪切板

<text @longtap="copy(10)">复制</text>
// js
methods: {
    copy(value) {
		//#ifndef H5
		uni.setClipboardData({
			data: value,
			success: () => {
				uni.showToast("复制成功");
			}
		})
		//#endif
		
		// #ifdef H5
		if(!document.queryCommandSupported('copy')) {
			error('浏览器不支持')
		}
		let textarea = document.createElement("textarea")
		textarea.value = value
		textarea.readOnly = "readOnly"
		document.body.appendChild(textarea)
		textarea.select() // 选择对象
		textarea.setSelectionRange(0, value.length) //核心
		let result = document.execCommand("copy") // 执行浏览器复制命令
		if(result) {
			uni.showToast("复制成功");
		}
		textarea.remove()
		// #endif
	}
}

二、navigator标签点击有底色

跳转标签有个属性 hover-class 把值设置为 none(<navigator hover-class="none"></navigator>)可以去掉点击时的底色

三、事件方式的组件通信

// 使用事件监听$on()和发布$emit()来实现组件之间的通信，和Vue使用方法一样
// 父组件
onLoad() {
    uni.$on('env', (param) => {});
}
destroyed() {
    uni.$off('env');
}
// 子组件
uni.$emit('env', this.id);

四、var(--status-bar-height)的使用

uniapp在html标签上设置了一些属性--status-bar-height、--top-window-height、--window-left、--window-right、--window-margin、--window-top、--window-bottom、--UI-BG-1等，在css中可以通过var()来获取对应的值比如状态栏高度--status-bar-height
使用：height: calc(100dvh - 44px - 110rpx - var(--window-top) - var(--window-bottom))

五、cpu模式

manifest.json中在APP常用其他设置里可以选择支持CPU类型，如果不选x86会在一些模拟器上或者只支持x86(少数)设备上运行白屏或无法正常运行，一般只支持x86的设备市面上很少可以单独打x86包，如果同时支持APP的体积会很大，目前arm64-v8a兼容armeabi-v7a，一般选armeabi-v7a就可以适配市场主流设备