The following content is reprinted from wechat open community Tencent location service official article “Hand to hand teach you to avoid those pits of the component cover-view”

Author: Tencent Location Service

Link: developers.weixin.qq.com/community/d…

The copyright of wechat Open Community belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

Case Background:

Recently, we are developing the urban subway map project, which can plan the route, locate the nearest subway station, and display the subway network map of the whole city. According to the requirements, positioning buttons and line pop-up boxes need to be added to the subway line map to display location information and subway station details.

Problems encountered:

In the initial stage of metro map investigation, the original rendering scheme was to use SVG to draw, but after investigation, it was found that the native API of the small program did not support SVG. At the same time, we found a SVG framework library in open source to realize drawing, but found that we encountered many requirements and performance problems that could not be realized at the beginning of development. After tracking the code of the open source library, we found that the drawing scheme is also the way of Canvas, so we decided to use the scheme of the native Canvas to support the subway map. However, there are some problems, so let’s look at some specific points:

1) View does not display properly on Canvas.

When I use view to add picture and popbox on canvas, I find that the picture and popbox are under the canvas, so the picture cannot be displayed normally.

After checking the document, I found that canvas, Map, video and other native components are implemented by native, which are displayed in the top layer of the applet by default. Therefore, I changed view into cover-view or cover-image.

Using the View effect:

<! --> <view class ="sublines sublines-icon">
<image class = 'sublinesIcon' src = "/static/img/ic_sublines.png" bindtap = 'clickSublines' wx-if = "{{lineIconShow}}" ></ image > 
</view>
Copy the code

Replace with cover-view effect:

<! --> <cover-view class ="sublines sublines-icon">
<cover-image class = 'sublinesIcon' src = "/static/img/ic_sublines.png" bindtap = 'clickSublines' wx-if ="{{lineIconShow}}"></cover-image>
</cover-view>
Copy the code

But with a cover-view there are problems of hierarchy and style.

2) Add image to canvas using cover-image and set position: Absolute; The image on the page appears below the canvas line, causing the location button to not work properly. Later, the position should be replaced with Fixed to solve the problem of hierarchy. The effect is as follows:

.locationIcon { width: 3rem; height: 3rem; position: fixed; bottom: 3rem; Left: 0.7 rem; }Copy the code

3) When a popbox is implemented on the page, a bottom line and a bottom small triangle are realized according to the NEEDS of the UI diagram. Use border to set the bottom edge of block level elements or CSS to implement triangular arrows, unilateral border setting is invalid. A cover-view or image with height of 1px was used instead.

Set unilateral border effect:

<! --> <cover-view class ="sdMark"  style =  'top:{{tapClient.y}}px; left:{{tapClient.x}}px; '  wx-if  =  "{{sdMarkShow}}">
    <cover-view class = 'sdMarkContent'>
        <cover-view class = 'sdMarkItem' bindtap = 'clickStart'</cover-view> <cover-view class ='sdMarkItem' bindtap = 'clickEnd'</cover-view> <cover-view class ='sdMarkItem' bindtap = 'clickStationDetail'> Site details </cover-view> </cover-view>Copy the code

Modified code:

<! --> <cover-view class ="sdMark" style = 'top:{{tapClient.y}}px; left:{{tapClient.x}}px; ' wx-if = "{{sdMarkShow}}">
    <cover-view class = 'sdMarkContent'>
        <cover-view class = 'sdMarkItem' bindtap = 'clickStart'</cover-view> <cover-view class ='line'></cover-view>
        <cover-view class = 'sdMarkItem' bindtap = 'clickEnd'</cover-view> <cover-view class ='line'></cover-view>
        <cover-view class = 'sdMarkItem' bindtap``= 'clickStationDetail'> Site details </cover-view> </cover-view> <cover-view class ="icon">
        <cover-image class = 'icArrow' src = '/static/img/ic_arrow.png'></cover-image>
    </cover-view>
</cover-view>
Copy the code

The end result:

Summary: Canvas level is higher, so use cover-view or cover-image to operate on canvas. Unilateral border-related operations use images or block-level elements instead.

View the relevant API documentation:

Cover – view related documents: developers.weixin.qq.com/miniprogram…

Welcome to experience and ridicule: “Tencent location services – metro map” plug-in: lbs.qq.com/miniprogram…