手把手教你避開組件cover-view的那些坑

以下內容轉載自微信開放社區騰訊位置服務官方文章《手把手教你避開組件cover-view的那些坑》

作者：騰訊位置服務
鏈接: https://developers.weixin.qq.com/community/develop/article/doc/00008a2e7b4270d8dad857b8f5b813
來源：微信開放社區
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

案例背景：

最近在開發城市地鐵圖項目，具體功能有規划路線、定位最近地鐵站、以及顯示整個城市的地鐵網狀圖等功能。根據需求，在實現的時候在地鐵線路圖上需要添加定位按鈕及線路彈框來展示位置信息以及地鐵站詳情信息。

遇到的問題：

在地鐵圖調研初期，原計划實現渲染方案是采用svg來繪制，但是調研后發現小程序原生API不支持svg。同時，我們在開源中找到一個svg的框架庫來實現繪制，但是開發初期發現遇到很多無法實現的需求和性能問題。在對開源庫的代碼跟蹤后，發現繪制方案也是canvas的方式，於是我們決定使用原生canvas的方案來支持地鐵圖。但是呢，又遇到一些問題，那么我們來看看幾個具體的點：

1) view在canvas上無法正常顯示。

在canvas上使用view來添加圖片和彈框時，發現圖片以及彈框在canvas的下面，不能正常顯示圖片。

查看文檔發現canvas、map、video等原生組件使用的是native實現的，默認顯示在小程序的最上層，所以就把view換成cover-view或者cover-image。

使用view效果：

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

 

 

 

替換成cover-view效果：

<!-- 線路 -->
<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>

 

 

image

但是使用cover-view又遇到了層級和樣式的問題。

2）canvas上使用cover-image添加圖片，圖片設置position：absolute；頁面上的圖片顯示在canvas畫線的下方，導致定位按鈕不能正常使用。后來把position該換成fixed解決來層級的問題。效果如下所示：

.locationIcon {
    width: 3rem;
    height: 3rem;
    position: fixed;
    bottom: 3rem;
    left: 0.7rem;
}

 

 

 

3）在頁面上實現一個彈框時，根據UI圖需要實現一個底邊線和底邊小三角形。通過border給塊級元素設置底邊線或者css實現三角箭頭，單邊border設置無效。最終采用了height為1px的cover-view或者圖片來代替。

設置單邊border效果：

<!-- 起終點設置彈框 -->
<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'>站點詳情</cover-view>
    </cover-view>
</cover-view>

 

 

 

修改后的代碼：

<!-- 起終點設置彈框 -->
<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'>站點詳情</cover-view>
    </cover-view>
    <cover-view class = "icon">
        <cover-image class = 'icArrow' src = '/static/img/ic_arrow.png'></cover-image>
    </cover-view>
</cover-view>

 

最終的效果：

 

 

踩坑總結：canvas層級較高，使用cover-view或者cover-image在canvas做操作。單邊border相關的操作使用圖片或者塊級元素來代替。

查看相關API文檔：

cover-view相關文檔：
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

歡迎體驗和吐槽："騰訊位置服務-地鐵圖"插件：
https://lbs.qq.com/miniprogram_plugin/subway.html