小編給大家分享一下如何實(shí)現(xiàn)一個(gè)微信小程序儀表盤(pán)組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),永修網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:永修等地區(qū)。永修做網(wǎng)站價(jià)格咨詢(xún):18982081108

前言

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

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

感興趣的直接看源碼：

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

下面是踩坑過(guò)程。

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

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

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

然后用它初始化一個(gè)自定義組件項(xiàng)目：

miniprogram init --type custom-component

這一步會(huì)下載一個(gè)前端工程模板到本地，這個(gè)模板是一個(gè)基于gulp的前端自動(dòng)化工程，使用前需要先安裝依賴(lài)：

npm i

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

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

npm run watch

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

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

但就我的親身體驗(yàn)來(lái)看，這個(gè)自動(dòng)化工程有點(diǎn)小毛病，偶爾會(huì)把個(gè)別文件給編譯“丟”，比如突然樣式?jīng)]了，或者js編譯不通過(guò)，那么js文件也就沒(méi)了，微信開(kāi)發(fā)者工具這邊就會(huì)報(bào)錯(cuò)。

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

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

canvas在小程序組件中的使用

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

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

這種情況完全可以在開(kāi)發(fā)工具中給個(gè)報(bào)錯(cuò)，為什么不？

查文檔的過(guò)程中，真心覺(jué)得小程序的文檔組織太TM亂了，知識(shí)點(diǎn)是全的，但同一個(gè)東西的知識(shí)點(diǎn)散落的到處都是，比如說(shuō)單獨(dú)看【框架】這個(gè)欄目的內(nèi)容，你根本不可能掌握小程序框架是怎么一回事，再看看“指南”才能知道個(gè)大概，然后再看組件和API，才能寫(xiě)出個(gè)hello world項(xiàng)目。

就說(shuō)自定義組件的開(kāi)發(fā)吧，自定義組件的接口、開(kāi)發(fā)、發(fā)布、安裝每個(gè)環(huán)節(jié)的內(nèi)容，被分別散落在【框架】、【指南】、【工具】的不同篇幅里，也就是第一次開(kāi)發(fā)自定義組件的時(shí)候，需要把整個(gè)文檔都翻騰一遍，才能找到所有我需要知道的東西，你說(shuō)扯不扯。

發(fā)布與安裝npm包

自定義組件開(kāi)發(fā)完了就要發(fā)布到npm，發(fā)布過(guò)程是全程最愉快的部分了，一點(diǎn)坑沒(méi)有，開(kāi)發(fā)環(huán)境測(cè)試沒(méi)問(wèn)題，運(yùn)行構(gòu)建命令：

npm run build

這時(shí)會(huì)產(chǎn)出一個(gè)miniprogram_dist/文件夾，整個(gè)項(xiàng)目的.gitignore和.npmignore都預(yù)置好了，如果你把代碼提交到GitHub，將只提交源碼和必要的工程文件；如果要發(fā)布到npm，在已經(jīng)登錄npm的前提下只要執(zhí)行：

npm publish

就會(huì)按小程序支持的格式（包含miniprogram_dist/）將代碼發(fā)布到npm，然后就可以在其他小程序項(xiàng)目里安裝并使用了。
小程序項(xiàng)目安裝npm包有點(diǎn)麻煩。

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

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

只有這樣安裝的模塊才算數(shù)，一開(kāi)始我隨手創(chuàng)建了個(gè)package.json文件寫(xiě)上依賴(lài)包名稱(chēng)，然后執(zhí)行npm i，雖然模塊也下載了，但會(huì)在下一步的開(kāi)發(fā)者工具中報(bào)錯(cuò)，提示找不到npm包，可能是因?yàn)閜ackage.json文件不規(guī)范，但是文檔沒(méi)有告知怎樣的package.json才算規(guī)范。

安裝完畢后，在開(kāi)發(fā)者工具中看不到node_modules/這個(gè)目錄，因?yàn)榇藭r(shí)這些模塊小程序還并不支持，需要再構(gòu)建一下才能用。

首先，在開(kāi)發(fā)者工具的項(xiàng)目配置里開(kāi)啟使用npm模塊，然后執(zhí)行“工具-構(gòu)建npm”操作，成功后會(huì)產(chǎn)出一個(gè)miniprogram_npm/文件夾，這個(gè)文件夾是可以在開(kāi)發(fā)者工具中看到的，到這一步npm包才算真的安裝成功，可以在小程序項(xiàng)目中正常調(diào)用了。

以上是“如何實(shí)現(xiàn)一個(gè)微信小程序儀表盤(pán)組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱(chēng)：如何實(shí)現(xiàn)一個(gè)微信小程序儀表盤(pán)組件-創(chuàng)新互聯(lián)
分享URL：http://chinadenli.net/article14/dhjige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、企業(yè)網(wǎng)站制作、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)