小程序挖坑之路

小程序出來那麼久一直沒有深刻的開發，此次藉着公司要作小程序，深刻探索了一番，結果挖坑無數，固然，僅限挖坑，並無填完。哈哈，就先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）

最後

這只是一點挖坑心得記錄而已，還有更多的坑須要繼續發掘。