小程序挖坑之路

小程序出来那么久一直没有深刻的开发，此次借着公司要作小程序，深刻探索了一番，结果挖坑无数，固然，仅限挖坑，并无填完。哈哈，就先mark一下。

由于公司业务需求，此次小程序用的是 mpvue + typescript 进行开发。

mpvue 相关的坑

关于input问题

由于设计想把输入框的交互作成这个样子：

那用原生的输入框是知足不了的，只能本身写组件咯。那么就用vue的方式写了个组件，结果发现，mpvue关于input的问题还真很多。

• input 用v-modal输入时候闪烁
• 组件嵌套slot有问题
• input 不支持:type 和v-modal
• slot等标签不支持添加class，没法编译成wxss
• 嵌套组件，props有问题
• 修改slot时，不能热更新，只能从新npm run dev

这是github上相关的issue：

inout闪烁issue

嵌套组件slot问题11

嵌套组件slot问题222

关于这个问题，试了上述的解决方法，但没有很好的解决（摔）。因此，本身用原生的方式从新撸了个组件。

小程序相关的坑

原生组件canvas问题

由于公司业务需求，小程序里有很多的图表数据须要展示，天然就是须要用到canvas，而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>
    </video>
<view>
复制代码

下面是我遇到的相关bug:

• 文本都要套上cover-view标签，否则排版错误。
• cover-view里的内容不支持设置渐变，阴影等样式。
• 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持经过 wx:if 控制显隐，不然会致使 cover-view 不显示
• canvas不能放在可滚动的列表里，在页面滑动时，在真机效果下，canvas不能很好的跟着滚动，会出现刚开始滚动不动，再滚动就会卡着忽然消失的很是糟糕的效果
• cover-image 不支持bindtouchstart等touch事件

总的来讲，小程序的原生组件问题仍是不少的，具体的实现都要在真机上测试才能看出各类问题。

使用echart-for-wx 的坑

1. 解决弹窗覆盖canvas的问题，一样的是用上面的方法

解决方法：echart使用cover-view是要在节点ec-canvas后面添加，经过样式控制cover-view的对应位置

<ec-canvas class="canvas" id="mychart-dom-line" canvas-id="mychart-line" :ec="ecLine">
</ec-canvas>
<cover-view class="cover-view">cover-vdddddddddddddiew</cover-view>
复制代码

2. echart在使用rpx为单位时，出现机型适配问题

echart在不一样机型上适配问题，使用单位为px时，适配是没问题的，可是使用rpx时，就会出现小机型适配问题，而使用mpvue的话，单位为px会转换成rpx，就会出现以下问题：

实际效果：

预期效果：

解决方法：

在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生成图片

再来就是，canvas转图片的问题

须要使用canvasToTempFile方法，由于canvas节点必定要存在才能获取到canvas的上下文进行绘图，因此只能把canvas放到页面可视区域以外。并且转换成图片时，要加个神奇的setTimeout的延时。最小延时为300ms，再小就无论用了。（为何，我也不知道，o(╥﹏╥)o）

最后

这只是一点挖坑心得记录而已，还有更多的坑须要继续发掘。