用小程序挖坑的方法
这个小程序已经很久没有深入开发了。这一次，通过公司的小程序，我们进行了深入的探索。结果，我们挖了无数个洞。当然，我们只是挖坑，并没有完成。哈哈，先标记一下就行了。
因为公司业务需要，这个小程序是用mpvue typescript开发的。
mpvue相关的坑
关于输入
因为设计想让输入框的交互看起来像这样：
用原生输入框是满足不了的，只能自己写组件。然后，我用vue的方式写了一个组件，结果发现mpvue有很多关于输入的问题。
当使用v型输入时，闪烁组件的嵌套槽有问题。input不支持诸如：type和v-modalslot之类的标记，这些标记不支持添加类，不能编译成wxss嵌套组件。当道具修改槽有问题时，不能热更新，只能npm run dev再次更新。这是github上的相关问题：
Inout闪烁问题
嵌套组件插槽问题11
嵌套组件槽问题222
在这个问题上，尝试了以上解决方案，但是没有好的解决方案(秋季)。所以，我用原生方式重新设计了一个组件。
小程序相关的坑
本机组件的画布问题
因为公司有很多图表数据要在小程序中显示，自然需要使用cavas，而canvas是原生组件，它的z-index是无限的。当有弹出内容时，需要用gg覆盖。
其实是可以解决的，只要用cover-view作为蒙版层(一开始我觉得有必要把cover-view嵌套到原生组件的节点中)，把弹出的窗口内容放到cover-view中，但是很难实现cover-view中包含的节点问题和一些样式问题。如果弹出的内容很酷，那么我只能建议把设计改成设计稿。
view canvas canvas-ID=' test '/canvas//这是一个蒙版图层。为了覆盖原生组件(仅在1.9.0及以上版本支持)，cover-view是一个蒙版图层balabala/cover-view//demo video cover-view，官方给出的，也可以覆盖video /cover-view /videoview复制码中的内容。
封面标签应该贴在文字上，否则排版会出错。封面视图中的内容不支持设置渐变、阴影等样式。当组件嵌套在cover-view中时，自定义组件的槽及其父节点暂时不支持通过wx:if控件显示或隐藏，否则画布将不会显示在cover-view中，也无法放置在可滚动列表中。当页面滑动时，画布无法很好地与真实的机器效果进行滚动，一开始也不会滚动。如果再滚动一下，会突然消失，效果非常不好。封面图像不支持诸如bindtouchstart之类的触摸事件。一般来说，小程序的原生组件还是有很多问题的，具体实现必须在真机上测试才能看到各种问题。
使用echart-for-wx进行维修
解决弹出窗口覆盖画布的问题，方法同上：echart使用cover-view将其添加到节点ec-canvas之后，通过样式控制cover-view的对应位置。
EC-Canvas class=' Canvas ' id=' my chart-DOM-line ' Canvas-id=' my chart-line ' : EC=' ecLine '/EC-Canvas cover-view class=' cover-view ' cover-vdddddddiew/cover-view复制代码ECART以rpx为单位时存在模型适配的问题。ECART在不同型号上存在适配问题。以px为单元的时候适配是没有问题的，但是使用rpx的时候会有小模型适配的问题，而使用mpvue的时候，单元
实际效果：
预期效果：
解决方法：
在mpvue里，使用内联样式（内联样式不会把px转成rpx），最好只固定高 emmmm....结果发现，大屏小屏手机下都会有适配问题，所以不能单纯的用内联样式写死px的大小(在GitHub上提了个issue，至今未回，怕死石沉大海啦)
canvas生成图片适配问题
因为不同手机大小以及其设备像素比devicePixelRatio不一致，再来小程序还出了自己的单位rpx，所以如果生成canvas是固定写死其宽高，这样是用问题的。
基本算法是：
canvas绘制使用的是px单位，但不同设备的px是需要换算的，所以在组件中统一使用rpx单位，这里就涉及到单位怎么换算问题。 通过wx.getSystemInfoSync获取设备屏幕尺寸，从而得到比例，进而做转换，代码如下：
const sysInfo = wx.getSystemInfoSync();const screenWidth = sysInfo.screenWidth;this.factor = screenWidth / 750; // 获取比例function toPx(rpx) { // rpx转px return rpx * this.factor;}function toRpx(px) { // px转rpx return px / this.factor;},复制代码但我知道大家都很懒，有轮子干嘛不用
实在不想算，可以用现成的轮子小程序canvas生成图片
再来就是，cavans转图片的问题
需要使用canvasToTempFile方法，因为canvas节点一定要存在才能获取到canvas的上下文进行绘图，所以只能把canvas放到页面可视区域之外。而且转换成图片时，要加个神奇的setTimeout的延时。最小延时为300ms，再小就不管用了。（为什么，我也不知道，o(╥﹏╥)o）
最后
这只是一点挖坑心得记录而已，还有更多的坑需要继续发掘。
