一

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

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

Bone Web 的官方介紹

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

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

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

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

二

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

進入查看React的官方例程代碼。

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

三

接下來開始復(fù)制官方代碼，先讓咱的網(wǎng)頁上顯示出一個和例程一模一樣的儀表盤再說。

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

直接復(fù)制到index.js這個文件的前面，然后保存這個文件，打開“終端”，啟動Web服務(wù)。詳解見下圖。

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

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

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

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

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

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

四

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

然后你就不要怕犯錯，不斷猜測某個數(shù)值可能是什么意思，然后修改它觀察顯示效果，當(dāng)然如果能參考官方說明最好，因為有的組件會做一個手冊告訴你哪些參數(shù)是什么意思。這個過程是要靠你不斷去實踐探索的，光靠看書是沒有用的。

五

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

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

原文