如何開發第三方小程式元件

雅X共賞發表於2019-07-24

最近開發了一個小程式動態儀表盤元件,並以第三方小程式元件的形式釋出到npm,任意小程式專案都可以安裝這個模組,從而獲得儀表盤功能。

元件功能目前還非常簡單,先來預覽一下效果:

專案原始碼及使用介紹可參考專案主頁:https://github.com/tower1229/weapp-plugin-dashboard

開發第三方小程式自定義元件的方法,微信官方文件有一個簡單的介紹,我在開發過程中遇到一些坑,在這裡記錄一下,希望對大家有所幫助。原文地址:https://refined-x.com/2019/07/22/weapp-plugin-dashboard/

 

如何開發微信小程式自定義元件

官方提供了一個CLI工具專門用於開發小程式自定義元件,首先全域性安裝這個工具:

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

然後用它初始化一個自定義元件專案:

 
  1. miniprogram init --type custom-component

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

 
  1. npm i

有可能你會像我一樣發現這個專案的預設依賴版本有點老,然後習慣性的在VSCode裡用Npm Dependency自動升級了一下,重新安裝,然後就傻逼了,新版babel外掛會讓專案跑不起來。

還原到預設版本重新安裝,啟動開發服務:

 
  1. 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,釋出過程是全程最愉快的部分了,一點坑沒有,開發環境測試沒問題,執行構建命令:

 
  1. npm run build

這時會產出一個miniprogram_dist/資料夾,整個專案的.gitignore.npmignore都預置好了,如果你把程式碼提交到GitHub,將只提交原始碼和必要的工程檔案;如果要釋出到npm,在已經登入npm的前提下只要執行:

 
  1. npm publish

就會按小程式支援的格式(包含miniprogram_dist/)將程式碼釋出到npm,然後就可以在其他小程式專案裡安裝並使用了。

小程式專案安裝npm包有點麻煩。

首先在小程式程式碼根目錄(project.config.json中miniprogramRoot配置的目錄)中依次執行:

 
  1. npm init
  2. 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/weapp-plugin-dashboard

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

相關文章