抖音实战~分享模块~生成短视频二维码

一、可见范围

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

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>
1
2
3
4
5
6
7
8
9
10

2.2. 实现组件uQRCode

插件链接：https://ext.dcloud.net.cn/plugin?id=1287

组件案例：

2.3. 插件涉及组件

2.4. 组件改造

uQRCode基于uqrcode.js实现

		gotoQRCode() {
				uni.navigateTo({
					url: "/pages/qrcode/qrcode?vlogId=" + this.thisVlogId
				})
			},
			
1
2
3
4
5
6

onReady() {
			var vlogId = this.vlogId;
			var content = {
				type: "vlog",
				content: vlogId
			};
			var contentStr = JSON.stringify(content);
		    uQRCode.make({
		        canvasId: 'qrcode',
		        componentInstance: this,
		        size: 170,
		        margin: 10,
		        text: contentStr,
		        backgroundColor: '#ffffff',
		        foregroundColor: '#0f0827',
		        fileType: 'png',
		        errorCorrectLevel: uQRCode.errorCorrectLevel.H
		    })
		    .then(res => {
		    })
		  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.5. 实现原理

• 1.其实生成短视频二维码就是短视频的发布ID
• 2.当微信扫描只会显示二维码生成的type和content文字内容，是因为没有对文字进行其他的操作。
• 3.咱们抖音app当你扫描二维码时，做了以下几件事：
  • 3.1. 第一件事和微信扫描一样解析二维码后面的文字信息
  • 3.2. 获取短视频发布ID后，调用了后端短视频详情的api接口
  • 3.3.调用完接口后，有对短视频详情进行了短视频信息转视频的处理（其实就是预览短视频而已），和搜索页面实现的原理是一样的。

后期会补充实现原理流程图，为大家详细揭晓

三、作品鉴赏

3.1. 生成短视频二维码

3.2. 微信扫描

3.3. 抖音扫描