小程序出來那麼久一直沒有深入的開發，這次藉着公司要做小程序，深入探索了一番，結果挖坑無數，當然，僅限挖坑，並沒有填完。哈哈，就先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：
關於這個問題，試了上述的解決方法，但沒有很好的解決（摔）。所以，自己用原生的方式重新擼了個組件。
小程序相關的坑
原生組件 canvas 問題
因爲公司因爲，小程序裏有不少的圖表數據需要展現，自然就是需要用到 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\>
</video\>
<view\>
下面是我遇到的相關bug:
- 文本都要套上
cover-view標籤，不然排版錯誤。 cover-view裏的內容不支持設置 漸變，陰影 等樣式。- 自定義組件嵌套
cover-view時，自定義組件的slot及其父節點暫不支持通過wx:if控制顯隱，否則會導致cover-view不顯示 canvas不能放在可滾動的列表裏，在頁面滑動時，在真機效果下，canvas不能很好的跟着滾動，會出現剛開始滾動不動，再滾動就會卡着突然消失的非常糟糕的效果cover-image不支持bindtouchstart等touch事件
總的來說，小程序的原生組件問題還是很多的，具體的實現都要在真機上測試才能看出各種問題。
使用echart-for-wx 的坑
- 解決彈窗覆蓋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>
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生成圖片
再來就是， cavans 轉圖片的問題
需要使用 canvasToTempFile 方法，因爲 canvas 節點一定要存在才能獲取到 canvas 的上下文進行繪圖，所以只能把 canvas 放到頁面可視區域之外。而且轉換成圖片時，要加個神奇的 setTimeout 的延時。最小延時爲 300ms ，再小就不管用了。（爲什麼，我也不知道，o(╥﹏╥)o）
最後
這只是一點挖坑心得記錄而已，還有更多的坑需要繼續發掘。
個人博客
更多前端技術文章、美術設計、wordpress插件、優化教程、學習筆記盡在我的個人博客喵容 - 和你一起描繪生活，歡迎一起交流學習，一起進步：https://www.miaoroom.com
站內文章推薦：
原文鏈接： 小程序挖坑之路