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

如下內容轉載自微信開放社區騰訊位置服務官方文章《手把手教你避開組件cover-view的那些坑》
做者： 騰訊位置服務
連接: https://developers.weixin.qq....
來源：微信開放社區
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

案例背景：

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

遇到的問題：

在地鐵圖調研初期，原計劃實現渲染方案是採用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>

可是使用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