关于 mpvue 开发小程序并使用 vant & echarts & mpvue-echarts & 低功耗蓝牙 爬坑

同一套代码应用到多终端（web/app/小程序/公众号等）相信是许多前端大神相同的想法

PS：最近有个小项目需要将（安卓APP：VUE+Vant+Cordova封装）的部分功能同步移植到小程序

想法是美好的

开始猛操作：构建mpvue项目、修改build脚本、cv原app代码到mpvue工程、修改项目配置文件等

问题

1. 解决原组件vant引入方式问题及小程序打包排除问题
2. 修改app（Header/Footer）等同时适配安卓/小程序环境
3. 解决this/$调用问题
4. 解决路由跳转/参数传递问题
5. 解决小程序包大小限制及分包机制问题

入坑（一）

问题：原项目在App端应用有多个数据图表（Echarts图表），相同方法在小程序中直接无法显示 Waht？一顿某度过后发现。。。小程序由于原生组件问题不支持原本的web版的Echarts 当场 。。。，继续某度发现同行同问题不少于是乎 mpvue-echarts 它来了，一顿cv npm 后，然并。。。wath？图表依旧无法显示。。。

1、尝试小程序echarts版（按某度方法）并未成功 – 放弃
2、尝试mpvue-echarts版（按某度方法）疑似成功 – 至少报错了：如下图
错误问题当场懵逼 （看上去像js编译转ES6语法问题） 没见过 某度后无果

解决：进入node_modules找到mpvue-echarts找到对应的canvas文件找到。。。删除 再编译 – 成功

入坑（二）

关于echarts canvas视图层级高于其他（自定义Header/Footer）问题（近真机可复现/开发工具正常）
PS：Footer – 使用的是 vant 组件的Tabbar – 无论怎么设置底部导航的z-index 都无法覆盖内容中的canvas视图
参见小程序官方：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
解决：据官方文档介绍 遂自定义 footer （此处并非在app.json中配置）如图

在入口框架页面引入：import FooterBar from “…/components/FooterBar”; 注意为方便测试尽量将app-footer的z-index值设大一点
注意：cover-view 不支持 css 伪类选择器（如：before/after）最后效果如下

入坑（三）

关于低功耗蓝牙对小程序内存消耗问题