前言

最近開發(fā)了一個小程序動態(tài)儀表盤組件，并以第三方小程序組件的形式發(fā)布到npm，任意小程序項目都可以安裝這個模塊，從而獲得儀表盤功能。

組件功能目前還非常簡單，先來預(yù)覽一下效果：

感興趣的直接看源碼：

https://github.com/tower1229/weapp-plugin-dashboard

下面是踩坑過程。

如何開發(fā)微信小程序自定義組件

官方提供了一個CLI工具專門用于開發(fā)小程序自定義組件，首先全局安裝這個工具：

npm install -g @wechat-miniprogram/miniprogram-cli

然后用它初始化一個自定義組件項目：

miniprogram init --type custom-component

這一步會下載一個前端工程模板到本地，這個模板是一個基于gulp的前端自動化工程，使用前需要先安裝依賴：

npm i

有可能你會像我一樣發(fā)現(xiàn)這個項目的默認(rèn)依賴版本有點老，然后習(xí)慣性的在VSCode里用Npm Dependency自動升級了一下，重新安裝，然后就傻逼了，新版babel插件會讓項目跑不起來。

還原到默認(rèn)版本重新安裝，啟動開發(fā)服務(wù)：

npm run watch

這時自動化工程會將src/里的代碼構(gòu)建到miniprogram_dev/文件夾，這里面是一個標(biāo)準(zhǔn)的小程序目錄結(jié)構(gòu)，是可以用微信開發(fā)者工具導(dǎo)入并運行的，導(dǎo)入的時候注意使用測試appId。

然后這邊我們編輯src里的源碼文件，另一邊就會同步構(gòu)建到miniprogram_dev，微信開發(fā)者工具檢測到文件變動也會自動重新編譯項目，目前為止很美好。

但就我的親身體驗來看，這個自動化工程有點小毛病，偶爾會把個別文件給編譯“丟”，比如突然樣式?jīng)]了，或者js編譯不通過，那么js文件也就沒了，微信開發(fā)者工具這邊就會報錯。

最坑的是，這個工程的編譯過程集成了eslint代碼檢查，檢查不通過js文件就不編譯，任由開發(fā)者工具報錯。默認(rèn)的eslint配置是有多變態(tài)？起碼對我來說這是個很難忘的經(jīng)歷，一下午都在咬牙切齒的查各種eslint報錯是什么意思，怎么關(guān)掉。

不過eslint也有一些有意義的要求，比如parseInt()方法的第二個參數(shù)通常我都不傳，嚴(yán)格來說這樣確實不算好的實踐。

canvas在小程序組件中的使用

開發(fā)過程中遇到最坑的問題，是我自己看文檔不仔細(xì)導(dǎo)致的，但我覺得更大的責(zé)任在于小程序官方文檔太亂了。

初始化canvas實例的wx.createCanvasContext()方法，其實有兩個參數(shù)，第二個參數(shù)通常也是都不傳，僅在組件內(nèi)使用時這個參數(shù)才需要傳this，之前一直沒在組件里用過canvas，導(dǎo)致忘了還有這么個參數(shù)，也不報錯，就是canvas死活畫不出東西，查了好半天才發(fā)現(xiàn)是這個原因。