当前位置：网站首页>Tiktok practice ~ sharing module ~ generate short video QR code

Tiktok practice ~ sharing module ~ generate short video QR code

2022-06-26 19:05:00 【gblfy】

Insert picture description here

List of articles

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
Insert picture description here

Component case ：
Insert picture description here

2.3. Plug ins involve components

Insert picture description here

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 .