如何開發第三方小程序組件

如何開發第三方小程序組件

最近開發了一個小程序動態儀表盤組件，並以第三方小程序組件的形式發佈到npm，任意小程序項目均可以安裝這個模塊，從而得到儀表盤功能。

組件功能目前還很是簡單，先來預覽一下效果：

項目源碼及使用介紹可參考項目主頁：https://github.com/tower1229/...

開發第三方小程序自定義組件的方法，微信官方文檔有一個簡單的介紹，我在開發過程當中遇到一些坑，在這裏記錄一下，但願對你們有所幫助。原文地址：https://refined-x.com/2019/07...

如何開發微信小程序自定義組件

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

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

而後用它初始化一個自定義組件項目：

miniprogram init --type custom-component

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

npm i

有可能你會像我同樣發現這個項目的默認依賴版本有點老，而後習慣性的在VSCode裏用Npm Dependency自動升級了一下，從新安裝，而後就傻逼了，新版babel插件會讓項目跑不起來。

還原到默認版本從新安裝，啓動開發服務：

npm run watch

這時自動化工程會將src/裏的代碼構建到miniprogram_dev/文件夾，這裏面是一個標準的小程序目錄結構，是能夠用微信開發者工具導入並運行的，導入的時候注意使用測試appId。

而後這邊咱們編輯src裏的源碼文件，另外一邊就會同步構建到miniprogram_dev，微信開發者工具檢測到文件變更也會自動從新編譯項目，目前爲止很美好。

但就個人親身體驗來看，這個自動化工程有點小毛病，偶爾會把個別文件給編譯「丟」，好比忽然樣式沒了，或者js編譯不經過，那麼js文件也就沒了，微信開發者工具這邊就會報錯。

最坑的是，這個工程的編譯過程集成了eslint代碼檢查，檢查不經過js文件就不編譯，任由開發者工具報錯。默認的eslint配置是有多變態？起碼對我來講這是個很難忘的經歷，一下午都在咬牙切齒的查各類eslint報錯是什麼意思，怎麼關掉。

不過eslint也有一些有意義的要求，好比parseInt()方法的第二個參數一般我都不傳，嚴格來講這樣確實不算好的實踐。

canvas在小程序組件中的使用

開發過程當中遇到最坑的問題，是我本身看文檔不仔細緻使的，但我以爲更大的責任在於小程序官方文檔太亂了。

初始化canvas實例的wx.createCanvasContext()方法，其實有兩個參數，第二個參數一般也是都不傳，僅在組件內使用時這個參數才須要傳this，以前一直沒在組件裏用過canvas，致使忘了還有這麼個參數，也不報錯，就是canvas死活畫不出東西，查了好半天才發現是這個緣由。

這種狀況徹底能夠在開發工具中給個報錯，爲何不？

查文檔的過程當中，真心以爲小程序的文檔組織太TM亂了，知識點是全的，但同一個東西的知識點散落的處處都是，好比說單獨看【框架】這個欄目的內容，你根本不可能掌握小程序框架是怎麼一回事，再看看「指南」才能知道個大概，而後再看組件和API，才能寫出個hello world項目。

就說自定義組件的開發吧，自定義組件的接口、開發、發佈、安裝每一個環節的內容，被分別散落在【框架】、【指南】、【工具】的不一樣篇幅裏，也就是第一次開發自定義組件的時候，須要把整個文檔都翻騰一遍，才能找到全部我須要知道的東西，你說扯不扯。

發佈與安裝npm包

自定義組件開發完了就要發佈到npm，發佈過程是全程最愉快的部分了，一點坑沒有，開發環境測試沒問題，運行構建命令：

npm run build

這時會產出一個miniprogram_dist/文件夾，整個項目的.gitignore和.npmignore都預置好了，若是你把代碼提交到GitHub，將只提交源碼和必要的工程文件；若是要發佈到npm，在已經登陸npm的前提下只要執行：

npm publish

就會按小程序支持的格式（包含miniprogram_dist/）將代碼發佈到npm，而後就能夠在其餘小程序項目裏安裝並使用了。

小程序項目安裝npm包有點麻煩。

首先在小程序代碼根目錄（project.config.json中miniprogramRoot配置的目錄）中依次執行：

npm init
npm i weapp-plugin-dashboard -S --production    // 此處以安裝weapp-plugin-dashboard模塊爲例

只有這樣安裝的模塊纔算數，一開始我隨手建立了個package.json文件寫上依賴包名稱，而後執行npm i，雖然模塊也下載了，但會在下一步的開發者工具中報錯，提示找不到npm包，多是由於package.json文件不規範，可是文檔沒有告知怎樣的package.json纔算規範。

安裝完畢後，在開發者工具中看不到node_modules/這個目錄，由於此時這些模塊小程序還並不支持，須要再構建一下才能用。

首先，在開發者工具的項目配置裏開啓使用npm模塊，而後執行「工具-構建npm」操做，成功後會產出一個miniprogram_npm/文件夾，這個文件夾是能夠在開發者工具中看到的，到這一步npm包纔算真的安裝成功，能夠在小程序項目中正常調用了。

最後

再放一下項目地址吧，

https://github.com/tower1229/...

歡迎感興趣的朋友一塊兒參與開發。