Hongmeng version of "Tiktok" is a great experience

Hello everyone , I'm Lao Wang ~

Speaking of Tiktok, no one is strange , It can be said that it is now a short video that everyone loves to brush APP, Brush before going to bed , Get up early and brush for a while .

Today Lao Wang is going to use JS Write a simple Tiktok video , You can practice with me .

One 、 Effect demonstration

This case is based on JS Language to write a simple video player , Includes video slideshow 、 Comment on 、 Distributed circulation and other functions , The effect of the project is as follows ：

1、 Video slide ： The project can adapt to horizontal and vertical

2、 Comment function ： Comments with avatars , Can add comments

3、 Distributed ： Mobile phones and mobile phones can be realized 、 Mobile phones and tablets 、 Distributed flow between mobile phones and large screens

4、 I made a video of an astronaut spinning , Ha ha ha .

Two 、 Project introduction

This project uses JS Write a distributed video player , Project UI The style is referred to in the following blog ：

#HarmonyOS Challenge phase II # Hongmeng Java UI Distributed Tiktok like video https://developer.huawei.com/consumer/cn/forum/topic/0201695357049060855?fid=0101303901040230869

You can compare the codes of our two projects , Let's see Java and JS The difference between the implementation of , Feel which of the two languages is easier to understand .

PS： I used to write Java UI, Then I got in touch JS UI, Find out JS Write HarmonyOS The amount of application code is much less , Easier, huh .

3、 ... and 、 The code analysis

1、 First , We need to write one that slides up and down , Experience a video playing page similar to Tiktok , The page also needs to add three simple buttons （ give the thumbs-up 、 Comment on 、 Share ）, And add a video introduction at the bottom of the page ：

Reading ： It's used here swiper Sliding components , To slide up and down ; Yes video Components , To achieve video playback ; Yes stack Stack layout , To implement the button （ give the thumbs-up 、 Comment on 、 Share ）、 The effect that the copy is stacked on top of the video .

The effect is as follows ：

2、 after , We implement a simple comment list ：

Reading ： It's used here if="{ { showCommentFlag }}", To pop up and hide the comment pop-up window . The user's Avatar is added to the pop-up list 、 Nicknames and comments .

The effect is as follows ：

3、 Last , We realize a sharing （ Distributed ） The function of ：

JS Distributed code is very simple , Just the following lines of code can realize the distributed function , It's simple .

The effect is as follows ：

remarks ： This code will pop up a system default pop-up window , Let the user choose the device . If you want to implement a custom pop-up window, you can , I will write the custom pop-up window for you when I am free .

Four 、 Code reference

https://gitee.com/teachers-philosophy/HarmonyOSLearning/tree/master/VideoDemo

——————

original ： Lao Wang 【 official account ： Hongmeng developer Lao Wang 】 Huawei certified lecturer / Tencent certified lecturer / Hongmeng development takes the lead