Skip to content

tencentyun/iotexplorer-h5-panel-demo

Repository files navigation

iotexplorer-h5-panel-demo

腾讯连连(腾讯云物联网控制端)自定义H5面板开发demo react版,

如需要 vue 框架 demo 请点击查看

使用说明

如果您还不了解 h5 面板,可以查看快速入门开发指南

开发配置

准备环境:

npm run dev # 开发默认面板
npm run dev:ble # 开发标准蓝牙面板
npm run dev:standerdBle # 开发自定义蓝牙面板
npm run dev:dualmode # 开发双路通信面板
npm run dev:wugan # 开发无感通信面板
npm run dev:cloud # 开发video面板的云存服务
npm run dev:view # sdk和小程序部分功能展示,引导用户进行面板开发

如果打包某个面板,只需要将dev改为release 即可

关于H5面板的详细原理及开发、调试流程,请参考官网文档.

Quick Start

npm install
npm run dev

启动后可通过 https://localhost:9000/index.js 来访问编译后的 JS 文件

其他问题

所需工具和实现原理: SwitchyOmega.

添加proxy ,将在浏览器中的访问的请求通过该插件代理到 127.0.0.1:8899 ,再通过 whistle 将请求代理到本地服务。

whistle

工具安装后,通过 whistle start 启动代理服务,通过 浏览器访问 127.0.0.1:8899 在 whistle 页面的,新建 rule 规则 ,配置如下:

developing.script/developing.js https://127.0.0.1:9000/index.js
developing.style/developing.css https://127.0.0.1:9000/index.css
# https://iot.cloud.tencent.com:9000 https://127.0.0.1:9000 # 用于支持HMR 可以不用

1、whistle 导入https证书通过中间人方式解决https 抓包问题。 解决方法

2、chorme 抓取https包提示不是私密链接的问题 解决方案