First, the issue has been resolved
(Ⅰ) applet page flicker issue - resolved
1. phenomenon: Go to another page navigation bar from the bottom of the page, there are many pictures on the page and the results are displayed alternately black and white twinkling.
2. Solution: Baidu, community address https://cloud.tencent.com/developer/article/1379755.
3. Reason: The
question of the mode attribute of the image tag, because micro-channel mode attribute is a custom attribute, so when rendering the original page and CSS rendering is separate.
Precisely micro-channel custom properties after CSS rendering, which resulted in a number of rendering, so the situation will be flashing images, the solution is not to use the mode attribute of the image tag.
4. Solution: Remove the mode attribute of the image tag. But the picture must show a reasonable size, the image you want to write style. The following is a style for the mode = "aspectFill" of:
//给父容器设置宽高
.father{
width:70px;
height:70px;
overflow:hidden;
}
//给子元素设置object-fit
.son{
object-fit:cover;
}
5. Problem: Image on the list do not know why object-fit property has no effect.
6. to resolve: Try mode = "widthFix" instead of the original mode = "aspectFill", the results were ok, the proportion of the at least keep the originals. I do not know why the use widthFix no longer flicker problem.
Second, the optimization points (too late to do to improve the user experience)
(1) page shows a list of
list page to show, every time you load only 10 records, but not all records are loaded, to finish rendering faster interface, reducing user wait time Caton.
(2) portrait beauty features
can add some adjustable parameters, such as bokeh, big eyes, thin face and so on, with the core technology of the API documentation has written.
(3) two-dimensional code generation posters
forwarded two-dimensional code sharing poster generation, use canvas reasons, pictures posted directly onto the canvas, and then cut because the original map scale map, the situation will get rid of artwork the proportion of unsightly; two-dimensional code posters also have a better look at a variety of templates or templates generated by the user to select a more personalized poster.
(4) system design
greeting card templates can be re Some vivid, entered by the user can use the material to create other media, such as pictures become expression package, the picture becomes animated and voice into one video.
(5) UI design
interface design of the entire applet not professional.
(6) Caton
due to multiple third-party call interface receives network influence, pictures, video art process flow in many Caton
(7) caching issue
repeatedly edit content, view multiple cards details page, open the first material content will first display a greeting card when the first two cards. This is because onShow check out new content and assign cards to interface a time. Best to first display color better.