Hello everyone, my name is Jiang Chen. This article records an issue about web-view in a real online environment. You can follow the author to see his journey.
This article was first published on WeChat public account: Wild Programmer Jiang Chen
Everyone is welcome to like, collect and follow
Problem background
The first version I made in the first half of the year was to web-viewseparate the exhibition hall page and the interactive whiteboard page (hereinafter collectively referred to as). Later, because Tencent was not satisfied with the interaction method, it emphasized that the exhibition hall page and the whiteboard page must interact on the same page. In the end, We had no idea at first, because according to the official description of the mini program, web-viewthe page does not allow any components to be superimposed. After finding a demo of the product, we found that it can be superimposed. I went to check their source code ( renderingMode: 'seperated') and finally solved the problem. , which will lead to many problems later.
Existing Problems
The existence of web-view
-
The Android update component does not take effect, such as tab switching, tab1 to tab2, does not take effect, and the content will not be updated.
-
Android update picture does not take effect
-
Android update style does not take effect
-
cover-view text disappears
-
The button response is slow, which is more obvious on mobile phones with low model performance.
Regarding question 2, the current hacksolution, which first renders a transparent image and then renders other images, can take effect.
Regarding questions 1, 2, and 3, they only appear on the Android side and are not found on Apple phones. There is currently a comparative hacksolution. By uninstalling the components and re-rendering, the purpose can be achieved, but the performance loss is relatively large and it is not good for the interactive experience. Friendly, and it also led to the fourth problem.
Regarding question 4, Android has a relatively high recurrence frequency, and Apple has appeared once.
Regarding question 5, it exists on both Android and Apple
When web-view does not exist
All normal
Tried solutions
For cover-viewtext disappearing
- Set component width and height
- Set font color and background color
- refresh
DOMNone of the above solutions work, and there is no way to view the view on the developer tools.
Console
The width and height of the element are all there, and the offset position is normal, but the text disappears.
DOM
Can't view DOM view on developer tools
Phenomenon
normal
text disappears
The width and height of this element are all there, but the text disappears.
WeChat applet architecture diagram
Zhanye Mini Program Architecture Diagram
solution
-
Everyone's video streams are no longer obtained. Instead, only four video streams are displayed. To display other people's video streams, switch the display in the member list.
-
Among the key tasks, the most effort is spent on the reconstruction of modular decoupling. Let me briefly explain the background. Because we co-constructed the code before, but because customers have many customized needs, and it is not so simple to implement these non-universal functions in an abstract way, so the solution we came up with is : Divide the small program code into key modules and make each module pluggable, so that we only need to extract the highly differentiated parts and leave them to our own development. At the same time, after this solution is implemented, if we want to develop new forms of applications in the future, we can implement a new set of application forms by implementing modules.
The total time for these optimization work took about a month. After completion, our product can currently support 20+ people making audio and video at the same time. This has been actually tested. The stability of our products is getting better and better!