Tiktok practice ~ sharing module ~ generate short video QR code

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 uQRCode

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

Component case ：

2.3. Plug ins involve components

2.4. Component modification

uQRCode be based on uqrcode.js Realization

		gotoQRCode() {
    
				uni.navigateTo({
    
					url: "/pages/qrcode/qrcode?vlogId=" + this.thisVlogId
				})
			},
			

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 => {
    
		    })
		  },

2.5. Realization principle

• 1. In fact, generating short video QR code is the release of short video ID
• 2. When wechat scanning, only the generated QR code will be displayed type and content Written content , Because there is no other operation on the text .
• 3. Let's Tiktok app When you scan the QR code , I did the following things ：
  • 3.1. The first thing is to parse the text messages behind the QR code just like wechat scanning
  • 3.2. Get short video publishing ID after , Calling the backend short video details api Interface
  • 3.3. After calling the interface , There are short video information to video processing for short video details （ It's just a preview of a short video ）, The principle is the same as that of the search page .

The implementation principle flow chart will be supplemented later , Let us know in detail

3、 ... and 、 Appreciation of works

3.1. Generate short video QR code

3.2. Wechat scanning

3.3. Tiktok scanning