小程序出來那么久一直沒有深入的開發(fā)，這次借著公司要做小程序，深入探索了一番，結(jié)果挖坑無數(shù)，當(dāng)然，僅限挖坑，并沒有填完。哈哈，就先mark一下。

因?yàn)楣緲I(yè)務(wù)需求，這次小程序用的是 mpvue + typescript 進(jìn)行開發(fā)。

mpvue 相關(guān)的坑

關(guān)于 input 問題

因?yàn)樵O(shè)計(jì)想把輸入框的交互做成這個(gè)樣子：

那用原生的輸入框是滿足不了的，只能自己寫組件咯。那么就用vue的方式寫了個(gè)組件，結(jié)果發(fā)現(xiàn)， mpvue 關(guān)于 input 的問題還真不少。

• input 用v-modal輸入時(shí)候閃爍
• 組件嵌套slot有問題
• input 不支持:type 和v-modal
• slot等標(biāo)簽不支持添加class，無法編譯成wxss
• 嵌套組件，props有問題
• 修改slot時(shí)，不能熱更新，只能重新npm run dev

這是github上相關(guān)的issue：

inout閃爍issue

嵌套組件slot問題11

嵌套組件slot問題222

關(guān)于這個(gè)問題，試了上述的解決方法，但沒有很好的解決（摔）。所以，自己用原生的方式重新擼了個(gè)組件。

小程序相關(guān)的坑

原生組件 canvas 問題

因?yàn)楣疽驗(yàn)椋〕绦蚶镉胁簧俚膱D表數(shù)據(jù)需要展現(xiàn)，自然就是需要用到 cavas ，而 canvas是屬于原生組件，它的 z-index 無限大，一出現(xiàn)有彈窗內(nèi)容需要把它覆蓋就gg。

實(shí)際上是能解決的，只要使用 cover-view 當(dāng)做遮罩層（一開始我還以為，需要把 cover-view嵌套到原生組件的節(jié)點(diǎn)里），把彈窗內(nèi)容一并放入 cover-view 里，但是很雞肋的是， cover-view 里面包含的節(jié)點(diǎn)問題，以及一些樣式問題是沒辦法實(shí)現(xiàn)。如果是彈窗內(nèi)容很酷炫的話，那我只能建議讓設(shè)計(jì)改設(shè)計(jì)稿。

<view>
    <canvas canvas-id="test"></canvas>
    // 這是一個(gè)遮罩層，為了覆蓋住原生組件（ 1.9.0及以上才支持 ）
    <cover-view>
        這是一個(gè)遮罩層balabala
    </cover-view>
    
    // 官方給的demo
    <video>
        <cover-view>
            這里也可以覆蓋video里的內(nèi)容
        </cover-view>
    </video>
<view>
復(fù)制代碼

下面是我遇到的相關(guān)bug:

• 文本都要套上 cover-view 標(biāo)簽，不然排版錯(cuò)誤。
• cover-view 里的內(nèi)容不支持設(shè)置 漸變，陰影 等樣式。
• 自定義組件嵌套 cover-view 時(shí)，自定義組件的 slot 及其父節(jié)點(diǎn)暫不支持通過 wx:if 控制顯隱，否則會(huì)導(dǎo)致 cover-view 不顯示
• canvas 不能放在可滾動(dòng)的列表里，在頁面滑動(dòng)時(shí)，在真機(jī)效果下， canvas 不能很好的跟著滾動(dòng)，會(huì)出現(xiàn)剛開始滾動(dòng)不動(dòng)，再滾動(dòng)就會(huì)卡著突然消失的非常糟糕的效果
• cover-image 不支持 bindtouchstart 等touch事件

總的來說，小程序的原生組件問題還是很多的，具體的實(shí)現(xiàn)都要在真機(jī)上測(cè)試才能看出各種問題。

使用echart-for-wx 的坑

1. 解決彈窗覆蓋canvas的問題，同樣的是用上面的方法

解決方法：echart使用 cover-view 是要在節(jié)點(diǎn) ec-canvas 后面添加，通過樣式控制 cover-view 的對(duì)應(yīng)位置

<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>
復(fù)制代碼

2. echart 在使用 rpx 為單位時(shí)，出現(xiàn)機(jī)型適配問題

echart 在不同機(jī)型上適配問題，使用單位為 px 時(shí)，適配是沒問題的，但是使用 rpx 時(shí)，就會(huì)出現(xiàn)小機(jī)型適配問題，而使用mpvue的話，單位為 px 會(huì)轉(zhuǎn)換成 rpx ，就會(huì)出現(xiàn)如下問題：

實(shí)際效果：

預(yù)期效果：

解決方法：

在 mpvue 里，使用內(nèi)聯(lián)樣式（內(nèi)聯(lián)樣式不會(huì)把 px 轉(zhuǎn)成 rpx ），最好只固定高 emmmm....結(jié)果發(fā)現(xiàn)，大屏小屏手機(jī)下都會(huì)有適配問題，所以不能單純的用內(nèi)聯(lián)樣式寫死 px 的大小(在GitHub上提了個(gè)issue，至今未回，怕死石沉大海啦)

canvas生成圖片適配問題

因?yàn)椴煌謾C(jī)大小以及其設(shè)備像素比devicePixelRatio不一致，再來小程序還出了自己的單位 rpx ，所以如果生成canvas是固定寫死其寬高，這樣是用問題的。

基本算法是：

canvas 繪制使用的是 px 單位，但不同設(shè)備的 px 是需要換算的，所以在組件中統(tǒng)一使用rpx單位，這里就涉及到單位怎么換算問題。 通過 wx.getSystemInfoSync 獲取設(shè)備屏幕尺寸，從而得到比例，進(jìn)而做轉(zhuǎn)換，代碼如下：

const sysInfo = wx.getSystemInfoSync();
const screenWidth = sysInfo.screenWidth;
this.factor = screenWidth / 750; // 獲取比例
function toPx(rpx) { // rpx轉(zhuǎn)px
    return rpx * this.factor;
}
function toRpx(px) { // px轉(zhuǎn)rpx
    return px / this.factor;
},
復(fù)制代碼

但我知道大家都很懶，有輪子干嘛不用

實(shí)在不想算，可以用現(xiàn)成的輪子 小程序canvas生成圖片

再來就是， cavans 轉(zhuǎn)圖片的問題

需要使用 canvasToTempFile 方法，因?yàn)?nbsp;canvas 節(jié)點(diǎn)一定要存在才能獲取到 canvas 的上下文進(jìn)行繪圖，所以只能把 canvas 放到頁面可視區(qū)域之外。而且轉(zhuǎn)換成圖片時(shí)，要加個(gè)神奇的 setTimeout 的延時(shí)。最小延時(shí)為 300ms ，再小就不管用了。（為什么，我也不知道，o(╥﹏╥)o）

最后

這只是一點(diǎn)挖坑心得記錄而已，還有更多的坑需要繼續(xù)發(fā)掘。