iotexplorer-h5-panel-template

腾讯连连(腾讯云物联网控制端)自定义H5面板开发面板demo vue 版，项目通过 CAZ template创建

如需要 react 框架版本请点击查看

使用说明

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

开始初始化面板项目

# create h5-panel apps by this template
$ npx caz tencentyun/iotexplorer-h5-panel-template my-h5-panel

# OR 如果全局安装了 caz
$ caz tencentyun/iotexplorer-h5-panel-template my-h5-panel

$ cd my-h5-panel

$ npm run dev -- --productId=your_product_id --deviceName=your_devicename # -deviceName为选填，然后会自动打开面板页面

代理配置

准备环境: Node.js (>= 12.10 required, >= 14.17 preferred), npm (>= 6.x) or yarn (>= 1.22) whistle and SwitchyOmega.

免代理模式

如果您对 whistle 不熟悉，推荐使用 免代理模式，通过在面板开发链接后面拼接&sw=true即可

- https://iot.cloud.tencent.com/h5panel/developing?productId=ABCDEFG&deviceName=dev1
+ https://iot.cloud.tencent.com/h5panel/developing?productId=ABCDEFG&deviceName=dev1&sw=true

代理模式

所需工具： SwitchyOmega浏览器插件.

通过添加 proxy SwitchyOmegachrome插件, 将在浏览器中的访问的请求通过该插件代理到 http://127.0.0.1:8899(whistle所在的 node 服务) ，再通过 whistle 将请求代理到本地开发服务器(http://localhost:9000)。

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 可以不用

常见问题

Q: 打开的页面白屏

A: 请检查 whistle 配置是否正常

Q: 打开的页面报400

A: 请在npm run dev时传入正确的 productId

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

A: 解决方法

Q、chrome 抓取https包提示不是私密链接的问题

A: 解决方案

Related

• zce/caz - A simple yet powerful template-based Scaffolding tools.

Contributing

1. Fork it on GitHub!
2. Clone the fork to your own machine.
3. Checkout your feature branch: git checkout -b my-awesome-feature
4. Commit your changes to your own branch: git commit -am 'Add some feature'
5. Push your work back up to your fork: git push -u origin my-awesome-feature
6. Submit a Pull Request so that we can review your changes.

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

License

MIT