一

上一篇文章零妖老哥已經(jīng)通過(guò)一行代碼即 bone init 初始化了一個(gè)默認(rèn)的Web應(yīng)用，通過(guò)執(zhí)行另外一行代碼 bone start 啟動(dòng)了本地的Web服務(wù)，并且可以通過(guò)谷歌瀏覽器來(lái)查看這個(gè)網(wǎng)頁(yè)的效果。今天我們就去查找一些官方的幫助文檔，然后根據(jù)提供的例程代碼來(lái)修改為己用。

有些坑零妖已經(jīng)跳過(guò)了，所以就直接放出四個(gè)網(wǎng)址，里面都是干貨。整個(gè)物聯(lián)網(wǎng)彈幕器的項(xiàng)目中的Web應(yīng)用所遇到的問(wèn)題，都是通過(guò)瀏覽這四個(gè)網(wǎng)址來(lái)解決的。

Bone Web 的官方介紹

UI組件的詳細(xì)介紹

數(shù)據(jù)可視化組件

物聯(lián)網(wǎng)設(shè)備相關(guān)的API說(shuō)明

注意：使用一些組件的時(shí)候，要先安裝它們到電腦上。然后再修改package.json這個(gè)文件，把對(duì)這個(gè)組件的依賴添加進(jìn)去，這樣上傳到服務(wù)器之后網(wǎng)頁(yè)就會(huì)正常運(yùn)行。具體方法零妖接下來(lái)會(huì)說(shuō)。

二

我們的目標(biāo)是把設(shè)備上報(bào)的溫度數(shù)據(jù)通過(guò)儀表盤(pán)的形式顯示到網(wǎng)頁(yè)上。在網(wǎng)頁(yè)上顯示一個(gè)儀表盤(pán)的代碼最簡(jiǎn)單的做法就是去復(fù)制別人的代碼然后簡(jiǎn)單修改一下啊。我們用到的其實(shí)是一個(gè)叫做“數(shù)據(jù)可視化”的組件，這個(gè)組件零妖認(rèn)為在物聯(lián)網(wǎng)項(xiàng)目中將會(huì)經(jīng)常用到，因?yàn)榇髷?shù)據(jù)和物聯(lián)網(wǎng)無(wú)非就是一些數(shù)據(jù)的交換和顯示。

進(jìn)入查看React的官方例程代碼。

通過(guò)VSCode打開(kāi)我們已經(jīng)初始化好的那個(gè)Web應(yīng)用，零妖是直接在桌面上新建了一個(gè)叫做 Web 的文件夾，里面就是全部需要的文件。用VSCode直接打開(kāi)這個(gè)文件夾就算作打開(kāi)整個(gè)項(xiàng)目了（其實(shí)你也可以用其他文本編輯器打開(kāi)對(duì)應(yīng)的文件）。然后打開(kāi)index.js這個(gè)文件，我們將要重點(diǎn)編寫(xiě)它里面的代碼。其他沒(méi)有涉及的地方就不要管了，反正最后達(dá)到目的就行了。

三

接下來(lái)開(kāi)始復(fù)制官方代碼，先讓咱的網(wǎng)頁(yè)上顯示出一個(gè)和例程一模一樣的儀表盤(pán)再說(shuō)。

寫(xiě)代碼講究一個(gè)“穩(wěn)”字，咱們一步一步來(lái)，慎防粗心大意導(dǎo)致出錯(cuò)。先把要import的東西給復(fù)制過(guò)來(lái)，運(yùn)行一下看看會(huì)不會(huì)出錯(cuò)。

直接復(fù)制到index.js這個(gè)文件的前面，然后保存這個(gè)文件，打開(kāi)“終端”，啟動(dòng)Web服務(wù)。詳解見(jiàn)下圖。

結(jié)果就是，出錯(cuò)了。下圖這個(gè)錯(cuò)誤提示是谷歌瀏覽器直接顯示的。

遇到這種問(wèn)題，唯一的解決方案就是安裝這個(gè)組件。方法依然很簡(jiǎn)單，一行代碼搞定。打開(kāi)命令行，然后輸入如下代碼并回車即可完成 bnpm install -g viser-react 。如果你是安裝別的組件，那么后面的viser-react換成別的組件的名字即可完成。

為了完美地完成這個(gè)流程，你還需要再查看一下它的版本號(hào)，一行代碼搞定：npm list -g viser-react 。

然后用VSCode打開(kāi)package.json這個(gè)文件，添加如下內(nèi)容：

最后，在VSCode的“終端”里面，執(zhí)行一個(gè)命令來(lái)結(jié)束添加外部組件的工作： bnpm install

好了，零妖已經(jīng)教會(huì)你安裝一個(gè)外部組件的方法了，如果你遇到了別的組件不是系統(tǒng)自帶的，那么你就可以通過(guò)這種方法來(lái)安裝，是不是很簡(jiǎn)單啊。你再保存一下index.js這個(gè)文件，鍵盤(pán)快捷鍵 Ctrl+s ，那么谷歌瀏覽器就會(huì)自動(dòng)根據(jù)當(dāng)前的代碼進(jìn)行刷新，如果不出意外這次肯定沒(méi)問(wèn)題了，不過(guò)顯示的頁(yè)面還是 Hello Bone 。

四

一切OK之后，你就可以把 import 這部分內(nèi)容之后的全部代碼給刪掉了，因?yàn)闆](méi)有用啊，我們想要的是一個(gè)儀表盤(pán)。直接把儀表盤(pán)例程中，import之后的代碼復(fù)制粘貼一下，然后保存文件，那么谷歌瀏覽器會(huì)自動(dòng)刷新，見(jiàn)證奇跡吧！一個(gè)一模一樣的儀表盤(pán)哦。

然后你就不要怕犯錯(cuò)，不斷猜測(cè)某個(gè)數(shù)值可能是什么意思，然后修改它觀察顯示效果，當(dāng)然如果能參考官方說(shuō)明最好，因?yàn)橛械慕M件會(huì)做一個(gè)手冊(cè)告訴你哪些參數(shù)是什么意思。這個(gè)過(guò)程是要靠你不斷去實(shí)踐探索的，光靠看書(shū)是沒(méi)有用的。

五

這篇文章你要靠自己勤勞的雙手來(lái)完成一個(gè)儀表盤(pán)的顯示，你自己要調(diào)整一下它的大小什么的，零妖就不在這里限制你的想象力了。

其實(shí)我們更關(guān)心的是數(shù)據(jù)如何顯示到上面。下一篇文章零妖就帶你查看一下API的例程，讀取設(shè)備的溫度屬性，然后想一個(gè)簡(jiǎn)單的方法顯示到儀表盤(pán)上。

原文