如何基于物联网开发平台 H5 SDK构建 H5 自定义面板

 下面是官方文档，写的非常详细

开发指南 - 物联网开发平台 - 文档中心 - 腾讯云 (tencent.com)https://cloud.tencent.com/document/product/1081/49028#.E6.9E.81.E9.80.9F.E6.A8.A1.E5.BC.8F

作为一个新手，记录下几个注意点吧!

一，下面以微信开发者工具进行 H5 面板 Demo 的本地调试为例，描述具体的操作步骤。

1，前提条件：进行 H5 面板开发的运行环境需包含 Node.js 和 npm。

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

        安装方法可参考：Node.js安装详细步骤教程(Windows版) - 码探长 - 博客园 (cnblogs.com)

     双击打开安装，点击下一步即可，我默认安装地址。

     安装完，打开CMD，分别输入node -v 和 npm -v 可以查看node和npm的版本号，如下图所示：

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

GitHub - tencentyun/iotexplorer-h5-panel-demo: 腾讯连连自定义 H5 面板 demohttps://github.com/tencentyun/iotexplorer-h5-panel-demo3，打开cdm“命令提示符”，进入demo的文件夹下面，如下

4，安装依赖（下载 Demo 后执行一次即可），须在iotexplorer-h5-panel-demo目录下执行命令。

我这里等待时间有点久，几分钟。。。。。。

5，安装并配置 whistle

npm install -g whistle

 启动 whistle，执行如下命令：

w2 start

其后步骤可以参考官方文档。。。。。。

6， 双击rootCA.crt之后，双击打开，需要安装根证书

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

二，相关介绍

1,H5 面板

 

 

 

 

 

 

 

 

原理

• <div id="app" > 节点，H5 面板需要渲染到该 DOM 节点下。
• H5 面板的通用组件（例如设备详情页面、模态提示框、顶部提示等），可通过 H5 SDK 调用。
• JS 文件与 CSS 文件由开发者上传。

开发者需要在 JS 文件中实现将 H5 面板渲染到 <div id="app" > 节点的逻辑，可以自行选择使用任何技术方案进行前端渲染，最终仅需输出一个 JS 文件和一个 CSS 文件（CSS 文件可选），提供给 H5 面板加载即可。

通过 H5 SDK 可获取 H5 面板所需的参数、调用 H5 面板的标准组件以及平台提供的能力。

2，微信网页开发 /web开发者工具。

        为帮助开发者更方便、更安全地开发和调试基于微信的网页，我们推出了 web 开发者工具。它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。立即下载体验。

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

3，H5 面板 Demo

        物联网开发平台提供一个 H5 面板 Demo 供开发者参考，H5 面板 Demo 以开源的方式向开发者开放，便于开发者在开发 H5 面板时进行参考。H5 面板 Demo 项目，详情请参见 iotexplorer-h5-panel-demo。