抖音实战~分享模块~复制短视频链接

gblfy

已于 2022-06-26 08:42:47 修改

阅读量2.1k

点赞数

分类专栏：抖音App 文章标签：短视频链接复制

于 2022-06-26 08:42:17 首次发布

本文链接：https://blog.csdn.net/weixin_40816738/article/details/125466474

版权

抖音App 专栏收录该内容

26 篇文章

订阅专栏

本文详细探讨了短视频平台的可见范围，包括自己和他人发布的内容操作限制。通过源码分析，揭示了uni-popup组件在分享功能中的关键作用，以及如何利用uni.setClipboardData进行链接复制。作者还展示了作品鉴赏，特别是针对发布者和观看者的不同功能体验。

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

在这里插入图片描述

文章目录

一、可见范围

保存到相册、复制链接、二维码都是前端完成的

1. 自己发布短视频

自己发布的短视频会有“保存到相册、复制链接、二维码、转为私密”

2. 其他人发布短视频

其他人发布短视频，自己只能看到“保存到相册、复制链接、二维码”

二、源码分析

2.1. 底部窗口popup

<view>
			<!-- 底部窗口popup -->
			<uni-popup ref="comment" type="comment">
				<uni-popup-comments :thisVlogerId="thisVlogerId" :thisVlogId="thisVlogId"></uni-popup-comments>
			</uni-popup>
			<uni-popup ref="share" background-color="#fff" type="share">
				<uni-popup-share :thisVlogerId="thisVlogerId" :thisVlogId="thisVlogId" :vlogUrl="thisVlog.url"
					:isPrivate="thisVlog.isPrivate"></uni-popup-share>
			</uni-popup>
		</view>

2.2. 实现组件uni-popup 弹出层

插件链接：https://ext.dcloud.net.cn/plugin?id=329
在这里插入图片描述
组件案例：

2.3. 插件涉及组件

插件包括4种组件：“uni-popup-comments、uni-popup-dialog、uni-popup-message、uni-popup-share”
在这里插入图片描述

2.4. 组件改造

uni-popup-share

2.5. 关键的api

官网api：
uni.setClipboardData(OBJECT)

涉及关键的api：uni.setClipboardData(OBJECT)
在这里插入图片描述

示例：

uni.setClipboardData({
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

调整后

		copyLink() {
				uni.setClipboardData({
					data: this.vlogUrl,
					success:()=>{
					  uni.showToast({//提示
						title:'复制成功'
					  })
					}
				});
			},

复制后链接：
在浏览器可以在线播放的

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-912ebac0-be4a-440a-be59-c5bdba836d9c/76c6e411-0309-4ace-8ac4-f8c1a6fdba68.mp4