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

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

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

开发指南 – 物联网开发平台 – 文档中心 – 腾讯云 (tencent.com)如何基于物联网开发平台 H5 SDK构建 H5 自定义面板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)如何基于物联网开发平台 H5 SDK构建 H5 自定义面板

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

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

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

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

GitHub – tencentyun/iotexplorer-h5-panel-demo: 腾讯连连自定义 H5 面板 demo如何基于物联网开发平台 H5 SDK构建 H5 自定义面板https://github.com/tencentyun/iotexplorer-h5-panel-demo3,打开cdm“命令提示符”,进入demo的文件夹下面,如下

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

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

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

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

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

5,安装并配置 whistle

npm install -g whistle

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

 启动 whistle,执行如下命令:

w2 start

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

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

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

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

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

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

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

二,相关介绍

1,H5 面板

 

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

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

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

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

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

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

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

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

 

 

 

原理

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

  •  节点,H5 面板需要渲染到该 DOM 节点下。
  • H5 面板的通用组件(例如设备详情页面、模态提示框、顶部提示等),可通过 H5 SDK 调用。
  • JS 文件与 CSS 文件由开发者上传。
  • 开发者需要在 JS 文件中实现将 H5 面板渲染到 

     节点的逻辑,可以自行选择使用任何技术方案进行前端渲染,最终仅需输出一个 JS 文件和一个 CSS 文件(CSS 文件可选),提供给 H5 面板加载即可。

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

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

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

    概述 | 微信开放文档 (qq.com)如何基于物联网开发平台 H5 SDK构建 H5 自定义面板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。


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

    0

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

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

    5

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

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

    0

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

专栏目录




iotexplorer-weapp-sdk-plugin-demo:腾讯云物联网开发平台 IOT Exploerer 插件 DEMO
05-29
iotexplorer-weapp-sdk-plugin-demo
demo指引
搜索设备
pages/index
指定连接某个设备
pages/connect
进行实时音视频拨打通话
pages/trtcCall

uniapp APP和H5使用百度地图,cover-image有时不显示,标准基座模拟器地图不显示,H5动态加载百度地图sdk,微信小程序使用百度地图
最新发布
weixin_43965143的博客
11-16
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
303
【代码】uniapp APP和H5使用百度地图,cover-image有时不显示,标准基座模拟器地图不显示,H5动态加载百度地图sdk
物联网控制APP入门专题(一)—做物联网APP的几个模式简介
ieeee.blog.csdn.net
12-29
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
5327
摘要:物联网设备场合需要提供移动端APP,对于找工作的同学而言,能够制作APP可以让你找工作更加容易,对于小公司而言,能够不依赖第三方提供物联网APP,也能极大地节约研发成本。本文就简介当前几种物联网控制APP的几个模式,让大家了解几种不同的技术的技术路线。后续的文章,将重点对IOT STUDIO移动可视化模式和android studio模式进行详细讲解,一步步带您做出自己的物联网APP。
html5全屏物联网平台数据统计图表展示页面模板
11-22
html5全屏物联网平台数据统计图表展示页面模板

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

微信小程序控制硬件第17篇 : 腾讯连连小程序通过LLSync蓝牙协议控制安信可PB-02模组,无需网络实现蓝牙本地通讯。(附带源码)
徐宏的博客 | 修身齐家治国平天下
02-07
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
3087
文章目录前言一、注册腾讯物联开发平台设备新建项目新建产品创建数据模板选择设备开发方式交互开发配置新建设备二、设备端操作硬件简介与连接准备软件环境工程目录烧录步骤三、腾讯连连小程序调试本人开源微信物联网控制一览表另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈!
      微信物联网生态主要分在微信硬件开发平台与腾讯物联开发平台,前者已经停止维护,但依然有着很大的学习价值,而后者作为主推的平台,集成很多功能,包括从微信小程序实现配网到
腾讯连连H5面板开发
dear_Wally的博客
07-05
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
1293
一、开发环境搭建

安装node.js,可以按照下面链接教程安装
https://www.cnblogs.com/aizai846/p/11441693.html

二、开始

参考腾讯官方文档

https://cloud.tencent.com/document/product/1081/49028#h5-dev-local

1、按照腾讯教程提供的链接下载H5面板SDK,解压到自己的开发目录下
https:…

H5+SDK
weixin_30782293的博客
08-30
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
2475
1、(个人猜测): SDK是写在容器(手机操作系统上的webview组件)上的应用,对H5应用暴露规定的API接口。相当于浏览器的开发者,给浏览器中新增了某些方法,js直接通过接口就可以调用的。
  这个要区别于使用ocx控件,ock控件中的方法,浏览器是没有的。所以需要引入外部程序(使用object标签引入),才能使用。而SDK不需要,因为它相当于在浏览器层面上修改了浏览器的API接…
html5游戏sdk开发,自用游戏HTML5 sdk技术设计手册
weixin_30359737的博客
05-30
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
248
1、概述1.1.目的指导合作伙伴的HTML5工程师开发集成sgt平台开放能力。2、准备2.1.技术架构使用jQuery库2.2.引用jQuery和jsonrpc2.02.2.定义变量var sgth5={Appid:null,//zsd_sgp 应用标识Appgateway:‘http://…………/route‘,//网关Approutedata:null,//节点nodechannelId:nu…
h5接微信js-sdk的详细步骤
weixin_45291798的博客
09-12
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
1606
h5页面接入js-sdk
h5中使用C语言sdk开发包,Android H5+SDK插件开发
weixin_39844515的博客
05-22
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
293
前言:阅读该文档需要Android和前端H5两种技术支持,使用Android Studio和HBuilder两个开发工具.工作中有H5+SDK插件开发的需求,于是通过查看DCloud官网,自己总结出了关于H5+SDK插件开发的详细步骤;看过DCloud官网的文档的同学肯定都会骂gf,看DCloud官网的文档简直就是一种摧残,当你第一遍看完文档,根本不知道写的是什么,也看不明白说的是什么意思,于是,…
Android封装sdk页面为h5,Android/H5混合 SDK 集成文档
weixin_33942142的博客
05-26
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
431
Android /H5 混合SDKSDK用于Android Hybrid 模式下,H5页面的以下情形:* 用户以app或单个设备为单位,进行H5页面的试验* 离线缓存模式H5页面的试验SDK的使用方法如下:导入SDK将下载得到的 SDK JAR拖入到的AndroidStudio / Eclipse 工程根目录libs中(没有则新建),右键Add as Library添加到库:(示意图,实际包名以…
腾讯云物联网开发平台 IoT Explorer 全面指引
IoT小能手
03-13
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
5187
腾讯云 IoT Explorer 是腾讯云主推的一站式物联网开发平台,所谓一站式,就是包含了设备侧到应用侧安卓iOS app,甚至小程序的全链条开发支持。

IoT小能手在这一系列文章中将会按照 设备侧开发平台功能操作、应用侧开发 三个部分来进行分享,这也是端到端开发必要的

【阿里云生活物联网架构师专题 ④】如何在天猫精灵IOT开放平台二次开发智能设备的 H5控制面板
徐宏的博客 | 修身齐家治国平天下
10-11
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
4420
本系列博客学习由非官方人员 半颗心脏 潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途。如有不对之处,请留言,本人及时更改。

1、esp32接入阿里云物联网平台,实现天猫精灵语音控制;
2、esp8266直连接入阿里云物联网平台,实现天猫精灵找队友零配网功能和语音控制;
3、esp32 sdk 直连接入天猫精灵IOT开放平台,实现天猫精灵找队友零配网功能和语音控制;
文章目录

推荐几个H5、app制作开发工具
热门推荐
侯正海
05-22
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
7万+

我们已经进入移动互联网时代,而app是移动互联网的载体。传统app开发面临成本高、周期长等问题,因此各类快速生成app的工具层出不穷。企业拥有了app才能实现互联网营销和互联网推广。中国有近7000万传统中小型企业,app会帮助这些企业实现互联网转型。下面就由小编我来为大家一一介绍四大最好用的app制作开发工具!

即速应用

即速应用是由咫尺网络开发的一款新产品,完全免费,上线之后短时间内已…

H5 工业组态 工业物联网IOT 助力 智能制造 实现数字孪生
BluePanther的专栏
08-31
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
374
数字化孪生的概念:

1、工业4.0:美国国家科学基金会在2006年创造了信息物理系统(Cyber-PhysicalSystems,CPS)的概念,CPS实现计算、通信与物理系统的有机融合与深度协作。德国于2011年利用该概念提出了工业4.0 (Industrie 4.0)。

2、数字孪生:数字孪生(Digital Twin)是CPS体系的关键组成部分,以数字化方式创建物理实体的虚拟模型,借助数据模拟物理实体在现实环境中的行为。

3、数字孪生价值:数字孪生技术帮助企业在实际投入生产之前即能在虚拟..

论坛怎么实现html5,这样的panel请问如何实现比较好?
weixin_36057482的博客
06-05
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
76
实现步骤:1、定义一个Item,界面分两层(可用两个Sprite进行划分)class Item extends ui.itemUI {private state = 0;constructor() {super();//点击最先出来的按钮,会显示下一层界面,同时隐藏自己this.btnFirst.on(Laya.Event.CLICK, this, this.change, [0]);//点击上面…
h5移动端配合微信sdk常用的9个工具函数
Mr__proto__的博客
06-21
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
223
h5yidongdau8n配合微信常用的9个工具函数
企业微信h5开发(即JS-SDK),一不小心,就会掉进坑,进入死胡同
guixin12345的博客
09-20
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
1727
企业微信h5开发(即JS-SDK),一不小心,就会掉进坑,进入死胡同
android手游h5sdk demo
10-08
1:本项目使用到了2个接口(登录、注册),具体来说是 玩Android网站 开放API,项目源码没有涉及任何商业机密,所以请放心学习研究使用!
用ts接第三方h5sdk时,简单书写第三方sdk的(.d.ts)声明文件
xzl159的专栏
12-15
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
3003
1.我们在用ts开发项目时,什么时候我们需要自己写(.d.ts)声明文件:

(1).d.ts文件是什么:可以这么说,它是js代码的声明文件,比如我们用js写了一个类,然后我们用这个类,但是js里的变量没有智能提示,但是ts的代码就会智能提示,这个时候,我们就给我们的js文件再写一个.d.ts结尾的文件,里面是对我们js文件里类的声明,这个时候,我们在访问这个类时,就会有智能提示了

.d.ts文件只是个声明文件,它不会被编译进你的代码里,发布代码的时候只会把你的原js代码编译进去

它就是在我们用ts项目

TP yansongda 支付 支付宝(H5)支付 微信支付(H5)支付
qq_34596127的博客
01-13
如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
2252
TP yansongda 支付 支付宝(H5)支付 微信支付(H5)支付

“相关推荐”对你有帮助么?

  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    非常没帮助
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    没帮助
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    一般
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    有帮助
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    非常有帮助

提交
©️2022 CSDN
皮肤主题:大白
设计师:CSDN官方博客

返回首页


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

138
原创
2万+
周排名
1万+
总排名
22万+
访问

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

等级
2222
积分
166
粉丝
102
获赞
19
评论
672
收藏
私信
关注


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

热门文章

  • DCDC电源中同步与异步的区别
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    8277

  • 放大器增益
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    7271

  • Quartus II13.1破解
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    6610

  • win10 系统下 Python2.7.18下载安装
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    6287

  • STC15W408AS单片机使用CH340下载工具下载程序一直停留在检测单片机型号
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    5954

分类专栏

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

    数字信号处理

    10篇

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

    stm32f767

    18篇

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

    matlab

    1篇

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

    个人感悟

    5篇

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

    TencentOS Tiny

    8篇

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

    S32K144

    6篇

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

    CAN总线

    8篇

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

    PCB

    15篇

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

    电路

    8篇

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

    物联网

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

    超声波探伤仪

    8篇

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

    Android

    31篇

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

    RVB2601

    8篇

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

    X3派

    7篇

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

    linux

    19篇

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

    LVGL

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

    ESP8266/ESP32

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

    LPC2148

    10篇

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

    RTOS

    4篇

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

    MT6735

    15篇

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

    python

    1篇

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

    放大器

    4篇

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

    stm32L151

    2篇

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

    KEA128

    2篇

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

    C语言

    4篇

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

    FPGA

    7篇

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

    单片机

    13篇

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

最新评论

  • 【地平线旭日X3派试用体验】从开机到点灯(第一节)

    zhengyad123:
    先检查USB to UART驱动装好没,另外SD质量差的不行,还有就是电源最好3A的,注意这几项就没别的了

  • 【地平线旭日X3派试用体验】从开机到点灯(第一节)

    胖子是支潜力股:
    大佬,我也买了一个,但就是Silicon Labs CP210x USB to UART Bridge,一直没有响应,不知道怎么搞,可能sd卡买的64gb太大了

  • MCUXpresso IDE新建工程

    GZxxykj:
    第二步SDK哪里可以下载呀/

  • 调试stc8a8k64d4单片机485通信总结

    zhengyad123:
    初始化程序可以参考STC下载软件里面的参考程序,可以先调通串口试试。我遇到得问题主要是485总线上下拉电阻选的不合适

  • 调试stc8a8k64d4单片机485通信总结

    桂涛123:
    可以发一下串口初始化程序,我也遇到了一样的问题

您愿意向朋友推荐“博客详情页”吗?

  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    强烈不推荐
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    不推荐
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    一般般
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    推荐
  • 如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    如何基于物联网开发平台 H5 SDK构建 H5 自定义面板
    强烈推荐

提交

最新文章

  • 加速度频域积分的实现及其局限性分析
  • 频域积分频域积分
  • 动态加速度信号的时频域积分方法
2023年4篇
2022年109篇
2021年51篇
2020年30篇
2019年3篇
2018年13篇


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

目录



本文章来源于互联网,如有侵权,请联系删除!

相关推荐: 物联网最佳实践:环境监测设备接入涂鸦物联网开发平台

小熊牌物联网开发板接入涂鸦物联网开发平台,实现植物环境监控。 物联网这个概念其实十几二十年前就有了。随着人工智能、大数据和云计算的发展,越来越多的物联网项目已经正式商业化,如自行车共享和共享汽车、全屋智能家居等等。 如今国内物联网生态可谓百花齐放,不乏一线厂商…