?下面是官方文檔，寫的非常詳細(xì)

開發(fā)指南 - 物聯(lián)網(wǎng)開發(fā)平臺(tái) - 文檔中心 - 騰訊云 (tencent.com)https://cloud.tencent.com/document/product/1081/49028#.E6.9E.81.E9.80.9F.E6.A8.A1.E5.BC.8F

作為一個(gè)新手，記錄下幾個(gè)注意點(diǎn)吧!

一，下面以微信開發(fā)者工具進(jìn)行 H5 面板 Demo 的本地調(diào)試為例，描述具體的操作步驟。

1，前提條件：進(jìn)行 H5 面板開發(fā)的運(yùn)行環(huán)境需包含 Node.js 和 npm。

????????Node.js的下載地址：Download | Node.js (nodejs.org)

? ? ? ? 安裝方法可參考：Node.js安裝詳細(xì)步驟教程(Windows版) - 碼探長 - 博客園 (cnblogs.com)

? ? ?雙擊打開安裝，點(diǎn)擊下一步即可，我默認(rèn)安裝地址。

? ? ?安裝完，打開CMD，分別輸入node -v?和?npm -v?可以查看node和npm的版本號(hào)，如下圖所示：

?2，在github上下載H5 面板 Demo? ，保存到本地

GitHub - tencentyun/iotexplorer-h5-panel-demo: 騰訊連連自定義 H5 面板 demohttps://github.com/tencentyun/iotexplorer-h5-panel-demo3，打開cdm“命令提示符”，進(jìn)入demo的文件夾下面，如下

4，安裝依賴（下載 Demo 后執(zhí)行一次即可），須在iotexplorer-h5-panel-demo目錄下執(zhí)行命令。

我這里等待時(shí)間有點(diǎn)久，幾分鐘。。。。。。

5，安裝并配置 whistle

npm install -g whistle

?啟動(dòng) whistle，執(zhí)行如下命令：

w2 start

其后步驟可以參考官方文檔。。。。。。

6， 雙擊rootCA.crt之后，雙擊打開，需要安裝根證書

?安裝方法：Https · GitBook (wproxy.org)

二，相關(guān)介紹

1,H5 面板

?

?

?

?

?

?

?

?

原理

• <div id="app" >?節(jié)點(diǎn)，H5 面板需要渲染到該 DOM 節(jié)點(diǎn)下。
• H5 面板的通用組件（例如設(shè)備詳情頁面、模態(tài)提示框、頂部提示等），可通過 H5 SDK 調(diào)用。
• JS 文件與 CSS 文件由開發(fā)者上傳。

開發(fā)者需要在 JS 文件中實(shí)現(xiàn)將 H5 面板渲染到?<div id="app" >?節(jié)點(diǎn)的邏輯，可以自行選擇使用任何技術(shù)方案進(jìn)行前端渲染，最終僅需輸出一個(gè) JS 文件和一個(gè) CSS 文件（CSS 文件可選），提供給 H5 面板加載即可。

通過 H5 SDK 可獲取 H5 面板所需的參數(shù)、調(diào)用 H5 面板的標(biāo)準(zhǔn)組件以及平臺(tái)提供的能力。

2，微信網(wǎng)頁開發(fā)?/web開發(fā)者工具。

????????為幫助開發(fā)者更方便、更安全地開發(fā)和調(diào)試基于微信的網(wǎng)頁，我們推出了 web 開發(fā)者工具。它是一個(gè)桌面應(yīng)用，通過模擬微信客戶端的表現(xiàn)，使得開發(fā)者可以使用這個(gè)工具方便地在 PC 或者 Mac 上進(jìn)行開發(fā)和調(diào)試工作。立即下載體驗(yàn)。

概述 | 微信開放文檔 (qq.com)https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html

3，H5 面板 Demo

????????物聯(lián)網(wǎng)開發(fā)平臺(tái)提供一個(gè) H5 面板 Demo 供開發(fā)者參考，H5 面板 Demo 以開源的方式向開發(fā)者開放，便于開發(fā)者在開發(fā) H5 面板時(shí)進(jìn)行參考。H5 面板 Demo 項(xiàng)目，詳情請(qǐng)參見?iotexplorer-h5-panel-demo。

總結(jié)

以上是生活随笔為你收集整理的如何基于物联网开发平台 H5 SDK构建 H5 自定义面板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。