首先我们知道 小程序 涉及 map echart 由于 canvas 形成  ，层级真TM的 高  所以要解决 这些问题 真是蛋疼

一、我们要知道 小程序渲染机制是从上往下的  就相当于 叠层了

so 就有 先后渲染

// 模板 mpvue

 <view class="success-detail" v-if="showDetails">
        <price-detail :projectInfo="projectInfo"></price-detail>
        <history-price></history-price>
        <project-photo></project-photo>
        <base-info></base-info>
        <map-arround :projectName="projectInfo.projectName"></map-arround>
        <house-price :projectName="projectInfo.projectName"></house-price>
      </view>
    </div>
    <cover-view class="handleBtns" v-if="showBtns">
      <cover-view class="enquiry-btn" @click="handleCheckEnquiry">
        <cover-view style="line-height:92rpx;">生成并查看询价单</cover-view>
      </cover-view>
      <cover-view class="entrust-btn" @click="linkToEntrust">
        <cover-view style="line-height:92rpx;">委托业务</cover-view>
      </cover-view>
    </cover-view>

 我是由showDetails: false,  showBtns: false  控制展示的

this.showDetails = true
      this.$nextTick(() => {
        this.showBtns = true
      })

这是关键一步 先渲染 map  echart  组件
 

最后原生组件 cover-view  (position:fixed) 

定位基本功不说了

到这里基本就实现了  
 

二、 很多人涉及cover-image 图片无法展示 ，原本switch 切换成图片作为开关

无非临时路径了 ，网路路径  等等都阔以  ,在开发工具生效 但 真机 game over

 一开始我也以为只能用网络图片， 这是很不好的 操作我觉得

所以最后我就 查看dist 文件路径 是不是有问题 

果然如此

相对 static 就阔以了 真是无语到爆炸

小程序真是坑多

涉及层级  还有办法 把 canvas 转换成图片