1. Antecedents
First of all, I am actually a title party. The functions mentioned in the title are restricted by WeChat. There is no plan to directly save the video on the H5 page opened in WeChat to the local or directly share it with friends in the form of video messages. There is no such trouble for pictures, you can directly press and hold the picture, and WeChat will pop up the native menu to save or share the picture. As shown below:
How to share the video? At the beginning, we could only use a compromise solution, share the video as a link message, access the WeChat jssdk and use the video address as the link address, use the arrow on the page to prompt the user to click the upper right corner to share the address, and other users will click on the link. Open the browser to play the video directly.
2. Consequences
Obviously, this method is very frustrating. The sharer needs to be specially guided to share the link, which increases the sharing threshold. The sharer cannot save it locally, and cannot share it anytime and anywhere unless he saves the link. Moreover, what is shared is a link message, which cannot intuitively tell the person to be shared that it is a video, reducing the willingness of the person to be shared, and the same situation will reduce the willingness to share twice. So we finally wanted to find a way to share the video directly.
3. Solutions
To do things in the WeChat ecosystem, you must abide by the WeChat rules (and fill in a lot of pitfalls, which will be discussed later). Since H5 has no relevant capabilities, we have to look for it in the applet. As expected, the applet can indeed save or share videos directly.
Specific interface:
So what is at hand is how to use the ability of small programs. After research, three options were summarized as follows:
1. Embed the existing H5 in the applet
Using the open capability of the applet, the embedded webview loads the H5 page, and after getting the video URL, jumps from the webview page to the original page of the applet, displays the video and calls related capabilities to save or share the video.
There is a problem:
After embedding, due to the limitation of webview, some adaptations need to be done. For example, the existing page link sharing operation needs to be adjusted. The original jssdk interface cannot be called to share link messages, and it needs to be converted to a sharing applet card. For another example, originally scanning the code to open H5 should be adjusted to scan the code to open the applet.
advantage:
The experience is relatively coherent (compared to point 2). When sharing, you only need to do a page jump in the applet (this jump is due to the fact that the page in the applet is limited to the embedded webview and cannot directly call the native interface, so you need to jump to a Native page processing, or maybe I haven’t found a way, if so, please let me know), the workload is moderate.
2. Still use H5, only jump to the applet when sharing videos
WeChat provides the ability to directly open the applet from the H5 page, so after getting the video link, you can directly jump to the applet with parameters and call the applet ability to save and share the video.
There is a problem:
The experience is relatively fragmented, and a box will pop up to prompt a second confirmation whether to jump, and then you need to make a small program that simply shows the video and shares and saves it. I don’t know if it can pass the review.
advantage:
At present, most of the processes do not need to be adjusted, only the logic of video sharing is adjusted, and the workload is small.
3. Realize existing functions with native code of applets or cross-platform frameworks
There is a problem:
The transplant workload is heavy.
advantage:
The best experience, no need to jump to share, the smoothest experience.
4. Program selection
The choice of solution needs to be determined by evaluating the actual situation of your own project. For example, the construction period is not rushed, the page structure is simple, and the workload of transplantation is not large. Of course, choose the third solution to achieve the best solution for user experience.
But many times people are in the rivers and lakes, can’t help themselves, and it’s the same when doing projects. We finally chose option 1, because time is not very abundant, and the most important thing is that we use a third-party library Three.js for display For 3D models, the degree of support in native applets is unclear (subsequent special verification did not work, and the effect was poor). The official transplanted version has not been updated for a long time, and there are many problems. In addition, there are still some private transplanted versions with unknown effects.
So after the research, we chose option 1, with moderate workload, moderate development risk, and moderate user experience.
Five. End
When I was writing this article, I was already adjusting according to the plan. I thought that the normal process was consistent with the performance of pure H5, but found a lot of unexpected pitfalls. It is normal to open H5 in the WeChat browser. The same The code is abnormal when the webview of the applet is opened, so some records and summaries of these pits will be made later. Our front-end uses Vue development, so the follow-up summary of loading H5 embedded in the webview of the WeChat applet is also based on Vue.