Tiktok practice ~ sharing module ~ copy short video link

One 、 Visible range

Save to album 、 Replication link 、 QR code It is all done by the front end

1. Publish your own short video

The short video released by myself will have “ Save to album 、 Replication link 、 QR code 、 Become private ”

2. Others post short videos

Others post short videos , I can only see “ Save to album 、 Replication link 、 QR code ”

Two 、 Source code analysis

2.1. Bottom window popup

<view>
			<!--  Bottom window 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. Implementation components uni-popup Pop-up layer

Plug in links ：https://ext.dcloud.net.cn/plugin?id=329

Component case ：

2.3. Plug ins involve components

Plugins include 4 Components ：“uni-popup-comments、uni-popup-dialog、uni-popup-message、uni-popup-share”

2.4. Component modification

uni-popup-share

2.5. pivotal api

Official website api：
uni.setClipboardData(OBJECT)

Involving key api：uni.setClipboardData(OBJECT)

• Example ：

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

• After the adjustment

		copyLink() {
    
				uni.setClipboardData({
    
					data: this.vlogUrl,
					success:()=>{
    
					  uni.showToast({
    // Tips 
						title:' Replication success '
					  })
					}
				});
			},
			

• Link after copying ：
  It can be played online in the browser

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

3、 ... and 、 Appreciation of works

3.1. Post your own video

3.2. Replication link