Techo Youth高校公开课：腾讯连连H5设备控制面板开发实践原创

各位同学们晚上好，欢迎收看TAKE12月高校公开课。现在大家可以扫描屏幕前的二维码，添加小助手进入高校者开发。高校开发者微信群了解新最新的课程信息以及福利礼包。今天邀请到的何文东和郭帅老师都是腾讯云物联网前端开发的工程师。何老师目前负责腾讯云物联网开发平台腾讯连连小程序开发、物联网对外开放开发、开发者自定义面板的开发与管理。郭帅老师负责腾讯物联网开发平台腾讯连连H5版面的开发工作，本期课程将带领同学们了解如何基于腾讯连连物联网平台，在腾讯连连小程序中通过H5开发自定义设备控制面板。另外，大家在观看直播的过程中，如果有任何的疑问，都可以在直播页面的评论互动区进行提进行提问，老师都会一一回答。直播结束后，填写调查问卷的同学们将有机会赢取Taco use高校公开课的培训认证套餐包。那么接下来就交给老师这边了，老师哈，可以开始了。

好的。嗯，各位同学大家晚上好啊，我是来自呃，腾讯云这边的前端开发，我叫何文东。然后今天晚上呢，我会和郭帅，然后跟大家分享腾讯连连控制面板。这个整个的开发实践。然后在课程开始之前呢，呃。就是我们这个课程给大家带来一些福利，这个福利呢，就是说我们。提供了一个。特价套餐，然后是现价九块九，然后可以去购买原价261元，然后使用时长三个月，绑定设备数量2000个设备的。

开发平台的一个使用套。然后线上的同学呢，可以通过。扫描左侧的二维码，然后可以截屏啊，或者是其他的，可以搜索it小助手。然后呃，加小助手啊，添加小助手，然后进群，然后通过在线链接，然后购买了我们这个套餐了之后。然后就可以进行对应的一些物联网开发。然后前十名下单的呢，我们还会赠送一些礼品给大家。第一个呢，是物联网。使用就在开发过程中比较基础的E套六开发版，开发版呢可以进行本上所有开发，物联网开前60名的，我们还会赠送一开发的应用版啊，如果没这个开发版块还可以。呃，选择我用的那个开发过程中比较接收短视频套餐，六六开发版，开发版可优惠的一个套餐，所以基本上所有开发，呃开发在课程开始之前呢，今天晚上由我如果在这开发会大家呃分享选择过的一个开发，腾讯连连怎么去采取控司面怎么去开发，呃我会负责把整个的呃物联网开发的一些背景开始前的工，相当由我对应的一些工具链，然后工具分享一，然后一些开发方式的原理流程会给大家分享，让费来讲，我们会后续的实践开发，这部个是一步一步开发的一带带领大家然后去开发一个一个面开取控制面板，它主要是发部分的内容流层，那我们的课程呢，今天主要是为了开下的。

教啊，或者是键同时或者愿意去发自发，然后去去同学，然后去觉得这个课程方式面板，当然在这个课程呢，其实会有一些基础的要求啊，包括会需要有一些简单引言的些开发风景，说你了解这一个东西，或比是说以前是有从事过这一个开发的，第二个部分呢，就是说了解前端的一些框架，这个课程，然后包括一些开发逻辑呀，能都有部分第商家的一些，那我们今天的这个课程呢，就是向大家熟悉整个呃互联网的一些开发流程，包括设备控制的一些言的一些框架，和了解一些选头开发的一些工具，呃工具链最后呢，是带领来的，能把这一个，而且我们制定工具链的的大家所开发出来一个是互联网色彩的一些。

要背，那么本次课程也有四个章节，那我们本呃前三章的话会一步一步的带你大家去，后面呢会有一些什来做一些QA，大家没有开发出来啊，就第一个章节开发就是呃先了解一下我们从互联网的课堂背，因为我们呃这次线上的课程经天下的话会呃在线的所有的同有可能没有天单会有他大基的行为也有呃对应的互联网发的一些经验，没关系，准备了一些可先了来讲去了解的，因为我有一个基础，这是线上的任情一下的话，那这个背景阶段呢，就三个部分没有连来我们呃我们的设备怎么样去控制了一智能设备的，然后研怎么研发的，它流程是怎么，就腾讯云平台他能提供哪些东西，呃啊，然后最后是。

我们这一个控制面板，它到底是什么？三个部啊，能处理哪些问题，我们的设备啊，第一个部分就是我们的物联网或者怎么研发，然后他的整个的一个腾讯的控制流程，控制流程也就是说它的一个，然后最后是就相当于我们按照这个操作服的一个描述，处理了我们一个普通的用户的部分，是通过我们的一些交互终端。

来操作这个终端呢，有很多种，一种是像手机啊这种啊，手一个便。还有像那个TC，还有一些手持终端，比如我们有些物流，它会有一些手持设备。还有像呃超市的，或者是呃一些小店里面的一些。向端收。收款啊，收银的这些都是可以交互的终端。就是交互终端部分，就是用户操作这些交互终端，然后交互终端呢，就是说会去处理你的一些命令。

这个命令分为两个部分，就是说如果我要用我的呃，某手机里面的APP，然后来控制我的扫地机器人。那么它会进入这个呃，APP的页面里面，然后控制扫地机器人启动，或者是暂停啊，或者是扫到某个某个地方扫地。那么它会有上传一个指令，就是告诉云平台啊。我要触发哪一台设备，然后让他做什么。所以。一般的情况就是说，我会上传一个指令云平台，由平台来去分发。这个指令。直到。通过各种物联网络，然后下达到具体的物联设备上面去。啊，我把这个。激光笔。

就是物联设备收到信息。打开了啊，扫地机算它就。回传，哎，我这个扫地启动了，告诉终端里面就可以显示。某一个物联设备，它处于power。开机状态，那么就是整个的一个操控的一个流程，就是我们去控制一个远端的那。当然这种是一个远程。呃，操作方式当然还有其他的，有可能不需要。那个经过云平台有可能就只有，比如像蓝牙设备，我只是在一个。但是大致的流程都是一样的。这。整个流程里面分为两个大的主体，第一个是交互终端控制平台，这一个主体里面就是说现在啊，我们这腾讯云这边是提供了一站化的那个。

智能化的一些服务。这种服务可以更好的为那个。中小企业、个人开发者。那么像呃，物联设备啊，硬件啊，网络这一块，包括传器啊，啊这些东西就可以像啊，个人开发者啊，自由开发者像一些。生产值小的那个设备生产制造啊这些。呃，供应商来做生产和制造。个描程。啊，第一类是基于硬件就是啊。就包括芯片模组，这个意思是说啊。我们有些东西就是它是打包的，就像WiFi和蓝牙。打包成一个模组。然后包括系统怎么去设计，比如我这个产品长什么样啊。

这些硬件包括的那个应该怎么设计？然后包括通信协议应该怎么去做啊，像这一块的话，其实就是偏向于硬件开发的一些。啊。就是相关的能力，然后有力储备。然后第二块就是像云平台，云平台就是说。物理模型，然后包括设备的身份信息啊，区分了你这个是扫地机器人一还是扫地机器人二，还是说我这个是智能的一些。呃，路由。这个是有一些身份识别，然后配网，然后包括呃设备绑定归属啊这个。还有一些啊。相应的用户管理。比如一个家庭里面。啊，有丈夫有妻子，那两个人有两个不同的手机，有不同的人来啊。

要区分是谁来操作了。啊，像这些东西是云端开发，会去用后端云服务。一般是后台的开发。那我们今天要注重的就是，其实是面向。就相当于我们要做一个可视化的面向。呃，消费者或者是普通用户的一些东西，那么具体能做的是想。APP应用的一些开发小程序啊，H5面板。还有一些集成化的，可视化的一些系统。像这一个开发研发基本上就是按这个。这个来分，然后整个的一个流程，就是说硬件先做好，然后我们会来。开发对应的一些，呃。云端的一些服务，或者是配置云端的一些服务，配置好了之后，我们再会做一些对应的一些界面。这个是整个的一个设备。

啊，这里看到的，我们这里看到的只是三个啊，三个类型的一些开发，但是实际我们的那个。一个物联网设备交付的过程中呢，它其实涉及到很多，就是各个方方面面的一些东西，它整个交付流程会比较长。啊，这里我们我把那个具体的。面的列出来。这个芯片的就包括我的，呃，要做的这个产品是什么功能。啊，一般就会去的，我不会采采那个采购格过高或者是过低的，或者性能过低的一些产品啊，我选一些适配的产品。呃，或者是芯片模组来开发这一个对应的一些智能终端啊，选好了之后，包括我啊要要选系统。

然后选硬件打板。和外观样式设计。对吧，还有相应的一些。逻辑编程。啊，这个选好了之后，然后我们的智能设备就是网络，你要选择用什么样的网络去连接。接这一层就其实是连有网络，就需要对接我们对应的一些云平台，云平台其实分为两种，一种呢，像这种对外的一些。还有一些呃，稍微大点的企业的话。呃，有些是自建了自己的一些云平台，就是相当于服务。然后我们这里。是课程要讲的，其实也是在应用开发这一层，就是面向于用户。或者是产品交互，面向用户或者是使用者这一个的应用程序。这个应用程序其实是。集成的部分个应程序集成。

这整个的一个研发流程，这里看到的这个设计的一个流程还是蛮多的。第三方是。我们的物联网啊，腾讯的这个物联网平台，它提供了哪些能力。我们这个腾讯做一些的一些东西，主要品牌厂商，方案厂商，或者是一些个人开发者。或者是一些初创的一些企业做一些连接，就是我们给他提供一些基础的平台，让他可以更好的去。啊，开发对应的场景。之前我们也看到整个从一个产品。从你最初的设计选型，或者是你去探索需求的时候，到最后上线是经历一个很长的流程。啊，那我们中小企业很难去投入完整的一个产业链的一个。

开发。所以。也需要一些那个平台来帮他把相应的一些东西给抹平。那我们这里就提供了第一个从。一个是。对应的物联网操作系统啊，Tell me。OS是腾讯出的一个物联网的操作系统，然后包括一些呃，模块组件的。呃，这一个模组模组的话，就相当于我提供了一些固定的一些驱动啊连接啊。啊，这一类的东西。然后包括服务网络可以基于这个。是模组，然后去装到自己的产品里面，可以更快的去交，因为这些模组基本上都是一些标准化的。啊，专门的硬件厂商或者芯片厂商生产。第二块呢，从设备层来说就是。

嗯。腾讯云提供了一些设备连接认证啊。嗯，消息这些东西就是你的。呃，设备之间。可以去识别认证啊，当它那个激活了之后，它有对应的一些激活信息。设备的。呃，上线或者是各种状态的一些管理保存。啊，这个是相当于抹平了一些。啊。就是设备上线后的一些终端服务。那基于产品层面去做了一些基础的产品管理模型啊。产品研发的一些生命周期的一些管理。然后简单的基础服务的话就是一些。就是那个硬件的固件升级，然后设备管理，运营管理。增值的话就是相当于基于一些。软件或者AI的一些能力为大家提供了更好的一些保障性的服务。

那我们今天在这儿要讲的其实是基于asdk为第三方开发者，或者是啊，或者是其他的一些。刚入门的这些，呃，同学，然后提供一个更好的能接触到C端用户的一个相应的能力，就包括腾讯连的一些腾讯的小程序。然后呃，第三方厂商的话，可以基于腾讯连连自己OM一些小程序。一些相应的组或者厂商。啊，对于一些客户，或者是一些行业客户，那我们提供了一些行业的解决方案，就是比如某。

楼宇的管理啊，或者是园区几十栋楼的一些照明啊，交通啊，或者是规划。与物联网平台的一些联动的一些开发。那。我们刚才讲到了，其实呃。由小程序这一边的控制，那小程序这一个呢，就是腾讯云物联网平台对外的一个出口，那这个出口其实是分为两个层面。这个层面呢，就是一个配置。平台讯平台。配了一个新的产品，新的产品它会其实会映射出。可以映射出一个小程序。某一个。用户打开了微信，那里面有。

小程序，然后小程序上面去运行了，我这个设备叫什么名字，或者是有对应的一些信息，包括通信之类的。那这里为什么要这样去设计呢？第一个呢是微信，我们知道微信是有啊中国最大的一个用户群体，那用户群主很好是。基本上人手都有微信。那可以解决说。能。然后在一个地方去控制，然后抹平了一些设备之间的一些差异性的东西。啊。据全动的动物百十六个亿，如果每家公司都去开发一个APP，那其实我们切换过来也很麻烦。

所以说。基于微信生态的这种小程序，它其实有一些下载啊，即扫即用啊，要实现就是。呃，更好的连接这一个方面，其实可以更好的让消费者去实现啊，不管你买了什么品牌啊，什么品类，什么通信方式的那个设备都可以互联互通。啊，这个是我。我们基于小程序这个去做。为什么上面还要。这个也就是说你今天。开发的一个H5的控制页面啊，今天是在小程序里面用续，你可以更好的去配到，比如我在PC上用，平板上用，或者是其他的APP里面，那我其实就相当于提供一些底层能力给。

它是一个就是相当于。让厂商可以或者是开发者可以开发一个很有通用性的东西，可以在呃各个平台去运行，然后也能去适配。我的一个目标就是把所有的智能设备的一些连接都放在一个地方。这是我们的。本身来架构这个H5面板啊。然，我们的H面基程。这里啊，我们做了三个类型的。呃，面板为什么要用三个面板。因为我。因为。呃，就是大家的需求是不一样的。这个需求体现在第一个。对于标准面板的话，我们有统一的一个物理模型，比如你开发了一个设备灯具啊，灯具有开关有。有其他的。

你如果对H开发。嗯，没有前端的工程的一些基础能力，但你又可以用标准面板。就是你选择了对应的产品，那你就可以。就由呃，腾讯云这边来帮你生成一些页面的一些UI啊一样啊，这个就用这个板是最合适的。适任开发。按开发面。这个就相当于官方版的H5自定义面板。那现在基本上只有十几有十几个类别的模板了。啊，配了一些主要的设备，包括把设备的一些基础样式啊，啊物理模型啊就是。通的数据对吧的怎么制，就是包括开关东西给你好。

你选了对应的一些类别了之后，就可以自动生成啊，这个是减少我们开发。或者是开发，或者是第三方投入的时间。那如果。啊，这还有一个点是说，我们现在只有，虽然只有几个。呃，之后可能会。就是扩展到200多个，呃，模板43个品类啊，这具体的品类可以在我们的。啊。就是云平台这儿可以去查看，第三个呢，我们本次要讲的。怎么让一个开发者？这个的。能力呢，就是提供了一个。比较完善，或者是比较自由度很大的一个。开发的一种模式，那我们提供了完整的接口，允许用户啊自定义的开发和定制，这里没有什么大的限制，需要你调我们的那个对应的SDK，那其实就可以去开吧。

是啊，然后这个就是我们H控制的现在的一些基本情况。OK。然后我们物联网开发的一些背景介绍。到这儿，那我们做一个小结，小结呢，其实就是没有开发经验的一些同学呢，其实可以可以。了解一下，就是我们物联网的设备怎么样去控制的，它的研发是什么。控制流程就是比如一个用户怎么操作设备，然后去控制。我们的。智能硬件个周。它的交付流程是什么样的啊，这个就刚才都给大家做了介绍。

然后我们的。腾讯云的物联网平台是做了什么？然后它的底层架构，比如提供硬件的一些能力，系统能力。然后呃，基础的一个产品管理，包括A1啊。这些，然后包括对TOC端的一些东西。然后第五点就是我们现在的H5控制面板是什么样的，刚才也跟大家介绍了标准面板，点开发面板，还有H5自定义面板。那这个了解了这个背景之后呢。我们第二章呢，就来了解一下，就是。这个给大家普及一下。啊，第一个点呢，就是说我们的整个的一个开发原理，其实这个开发原理跟我。普通的开发一个网页。

啊，很类似。但是又有一点不一样的地方呢，是说呃。就是有哪些工具链可以用。就现在的话，其实对于前端开发而言，V都是比较好用的，大家可以去那个。使用对应的ID的一些开发工具。浏览器可以直接看。但这有一个不太一样的点是说我们有些。可能。并不是简单的。呃。就是启动起来，然后就可以看了。啊，这里有一个点，就是说有些。

只是你本地开发的时候有些接口啊或者什么的，你要线上的，就是你要把当前域名请求。不用。就是你。开发的过程中只需要代理前端的一些服务，像一些接口啊，一些web啊，或者其他的一些请求，不需要去理，就是要把它略。啊，只要页面啊，静态资源啊，那就代理到当前的服务。参。之后的一个章节里面会有郭同学给大家，大家一步一步的去实现一个这个东西，也会这个DEMO去。或者我应该怎么样去架构这个。

就是H5的面板啊，这有一个点，因为我们是基于。呃。C去入，所以我们开发什么框都无所谓，是其他的架还是静之类，其实都打资。那我们会拿到这个静态资源，用户上传，把它嵌入进去。那如果是在本地开发的。呃，Server，然后来带你或者是启动这个服务而已。然后如果不太了解，像啊，也可以用这些工具。Roll up啊，这些东西可以启动。然后开发流程就是用户开通过编辑器开发，其实是生了一个前的页面。

就是会通过那个编辑器来构建啊运行，比如像漏啊编译。然后通过浏览器去。然后加代理工具，然后访问到这个东西。其实是整个。控制面板的一个开发的一个原理。那我们实际在开发的过程中是啊。其实是分为了两个模式，一个是本地模式，一个是线上模式。啊，这两个有什么区别呢，就是说本地模式，你其实是可以去一个东西。就是说数据并不是。呃，线上的也可以就是。你的那个数据可以是本地的，也有可能是没有后台的一些请求。按你请求，就是自己的跟自己的服务去做。这里我们提供了一个开发模式。啊，这有，然后这个产品呢，需要自己创建的，因为我们这里做了一些，如果是登录了。

之后，然后会做了一些呃，产品的权限安全性的一些校验。用户访问了之后呢，其实这个页面会下两个东西，一个呢。嗯，开develop GS pcs这两个东西默认其实是你如果不起服务是没有。所以说这里要代理。是通过浏览器的代理工具，然后代理到。呃，为首啊为首，这其实是一个漏的。跨平台的一个代理工具。啊，当然跟其他的比起来。呃。像前面所说的，其实在Windows下面有加啊，或者是。Mac下面有啊这些东西啊，也可以用啊。都是工，都是相通的，只是说这个的话，其实是一个平工具，大家可能用起来会更得心应手一点。

然后会把这两个啊，不存本身不存在的一些调试的一个地址，你到本地构建的一个。所以说前端框架其实就必要了。不管你是什么框架构建出来的，其实对应的是一个两个东西，一个是G，一个C。你代理到这就相当于通过这个页面加载了你。啊，构建的资源啊，从而实现说啊，我在线上可以去调一个啊对应的一些页面，或者是啊，我可以自定义开发我的页面。啊，这是我们在开发模式下。这个开发模式呢？呃。有个好处就是啊，我我自由度很大。我可以，呃，想怎么编辑可以编辑，然后呢，也可以实时的看到我页面展示的结果。当我们一个产品上线了之后啊，可能就用这种方式就不太。

合，因为你个线上的数据，可能当要去排查或者对接的时候，我用到第。就是线上的一个。线上的调试，这又分为两个，一个是接口调试，一个是UI调试。调试的话就是相当于。我画了一个整个的流程，就是用户打开小程序。小程序选择某个商品的时候，它其实会通过一个。啊，就像类似于浏览器的一个能力就是。加的一个HTML的文件。啊，这在，但是在小程序。或者在手机里面大部分。基于APP的都是以叫web为。然后会去请求我们云端服务器，云端服务器。这个HM的一个文件返回过来，这个HTM文件里面包含几个部分，一个是基础能力这一层。我们设备S。

啊，第三个呢，这个微信JSSDK呢，是我们微信小程序的，比如你去调哎，我这上传语音啊啊呼起一切都呃。就是资源啊，或者打开相册啊，这些东西啊，都可以通过这个提供的这些基础能力来调。就相当于你不用开发一个APP，但你可以调用微信提供的能力。所以这提供的在这里就是呃，开发者嵌入的GS和CS。能力我们是没有做什么过多限制。我们都是把微。本身硬件设备或者是。是叫做腾讯云这边的能力都开放出来。就载了个操。

第四步啊。发送给我们的云服务器，云服务器收到了之后再通过路由，然后下发给。所以这里面的一个。调。开发的一部分。比如G。比如把调的从调。就是发送了一个请求，然后温度从20变25。调试的过程就是相当于第一步是跟那个云服务去对。就是说运营服务器看有没有收到这个请求，对吧，然后请求的数据对不对。然后另外一步呢，就是说云服务器下发给这个。

就是用户操作的终端的界面，那这个数据是否对齐。呃，设备返回给我的这个温度，我就显示给你。啊，这个界面就会随的去更新啊，这个更新其实里面有一个web这一个能力。他会去改变这一个的那个数据。啊，这个是。呃，我们开发的整个页面跟云服务器之间交互的一个过程，那另外一个调试呢，是说我们的设备跟服务器之间。我设备服务器之络下指我设备，我也不可能，我也上不了我当前的状。

比如我现在。关机前我应该先放一下，哎，我要关机了吧，告诉服务器我已经。离线。那这个是，呃，我们那个设备要做的。这个里面就涉及到很多，第一个设备怎么样跟服务器。连接啊，这个里面我们之前的课程有提到，呃，智能设备的一些配网应该怎么去配。可以，有兴趣的小伙伴可以搜索一下之前的一些课程。那我们下发指令，就是把相当于把对应的一些呃参数或者是指令通知到那个消费终端，把这可以这两步是可以单独去调试的云服务到设备终端。对，那我们机接口调试这个部分就是分为两步，一个是呢，跟我开发的页面是跟服务去对接。

是第二个是我的智能设备。啊，这接口调这么多，另一部分呢是UIUI调不太样，UI可。呃，这做了一个。I。就是相当于请求拦截啊，我们的本地开发比较类似。啊，用代理的一些服务啊。然后可以把。这个本身请求远程的两个GS或CS文件，然后你到本地来做。这里的话就可以去调试说我线上的一台设备，或者是某一类型的机型。比如说。啊，你之前开发的时候是用的苹果手机开发了，看UI什么啊都比较正常，但是。

那么就是我用真机调试的时候啊，就可以用这种方式。啊，来代理请求，然后去调整个页面，然后去修正本身HT的一些兼容性问题。这个调试呢，第一种呢是说。通过。呃，网络连接D。然后去。开启的某一个文件就是你本地开发的文件，或者是文件系统里面固定的文件。来替换。然后让用户。第二个呢，是。就我们这边其实有那个USB。呃的一个能力，这个能力呢，其实需要那个手机打开开发的模式，这个是主要是针对手机。

可以通过USB线连上那个。然后调试。然后包将那个页面的请求代理到本地或者是。不同的服务上面去。第三个呢，是像其他的一些代理工具。就是分啊啊叉啊的也是可以去做的。这个是UI调试，只是这个是针对线上的调试的。大概。呃，做一些小结。第一个呢，就是我们了解了我们整个的一个开发流程需要哪些工具，对吧。啊，第二部分的内容呢，就是说。

呃，像我们的一些预览。这个前端的一些技术，你要需要器，然后包括一些代理工具。来做代理。然后呃，需要知道一些。呃。的服务启动啊，或者是其他的一些服务去启动一个页面，或者是启动一个HTTP服务。然后第二个部分呢，就是我们开发模式下怎么去开发的。那个是怎么样去选前端框架或者是。怎么样去生成一个。代理这个。这是第二部分，那第三部分内容就是说我下面啊怎么去调试，刚才我讲了就从接口去调。啊，从那个UI层面怎么去调。啊，这个是针对不同的。

那个层面主要是针对于呃，网络通信呀，数据的发送请就是请求和响应的一些操作，那UI层面主要是可能会去涉及到对应的一些兼容性的一些。那么这就是第二部分的内容。呃。然后这里，嗯。再跟大家提一下，就是说我们本次的。这个在线课程的话，因为有可能有些小伴才进来的，我们这次课程的讲解期间呢，也提供了一些优惠的。那个。就是购买的一些活动福利吧，然后九块九。能买三个月2000个设备的一些，开发的一些。这个是买不了吃亏，买不了上当。个连那个设备。

然后加我们的那个小助手啊，进群前十名下单的话就会有我们的啊，可以去挑选。小助，你需要，如果是前十名下单，然后你可以，呃，你是需要一个网的开发版啊，还是说需要一个啊，我们的公。那么来，让我们可以慢慢的去进入到我们的物联网开发的世界。啊，然后这前两部分的内容呢，就这么多，然后接下来会我们的郭同学给大家去分享。呃，我们的H5开发的一个实战，大家一步一步的去了解怎么样去开发。好，下面的时间交给郭帅同学。好，感谢。听老师给我们带来的关于物联网原理和这个H5面板原理这块的一个介绍。然后我给大家分享一下怎么去开发一个H5设备面板。

嗯。然后开发一个H5设备面板的话。啊，主要是以下几个流程，第一步是创建产品和设备。第二步是设置面板类型，第三步是初始化面板项目。呃，然后。测试面板类型这块，呃，因为我们是要开发一些面板，所以说我们要在。呃，Explorer里面去把这个面板类型设置成H5面板。然后第四步的时话是配置一下代理。第五步是，呃，我们可以。配置好位这里的话，我们就可以去预览一下我们这个面板。然后可以做U。然后第六步的话是调用SDK去跟我们的呃设备去进行一个通信，去控制设备。

啊，第七步的话就是把上面的这些流程都串起来，然后进行一个真机调试。好，下面我们分别看一下每一步该怎么做。呃，增加产品设备的话。呃，其实就是在我们的，呃，物联网开发平台。呃，打开呃物联网开发平台之后，选择公共实力，然后去。呃，新建一个项目，然后像在建项目之后去新建一个产品。呃，在产品里面点进去的话，我们就可以看到这样的界面，比方说我们这个产品叫智能灯，然后它。在设备调试里面就可以去新建设备。然后新建完设备之后，呃，我们。呃，点点击这个链接，我们就可以看到设备的详情，然后这个设备详情的话，呃，主要有设备名称，然后所属产品。

然后设备必要，然后产品ID，然后等等等等。呃，我们。需要，呃，后面需要去。用到的话。就是一个是设备名称，一个是产品ID。嗯。好，当我们创建完下，呃。创建完这个设备之后呢，我们就可以去。呃，设置一个面板类型。然后设置密码类型是在呃，设备调试的前一步是在交互开发里面。我给大家演示一下。假如说我们这个产品叫智能灯。然后呃，我们的今天的产品叫智能登山。然后设备设备调试里面是有，呃，是新下的这么一个设备。

对，然后我们可以看到啊，这个设备有一些设备信息在里面。对，然后。我们切换到交互开发下啊去可以可以去配置它的面板类型。默认是标准面板，就是说不需不需要我们怎么开发的，然后我们可以把它切到H5自定义面。然后切到H5C管之后。我们可以看到它是一个表单。然后下面会有一个上传文件的一个功能。就是。这个就是需要我们把面板开发完之后，去上传一个JS文件和一个CSS文件。嗯。然后另外还需要注意的一点，就是说，在我们开发调试的阶段，是需要呃设置一下这个访问白名单，才能使用腾讯云览小程序去访问我们这个呃，预览这个码。那么怎么去设置白名单呢？其实就是在我们的小程序打开我的，然后个人信息。

可以看到我们的账号，然后复制一下天道排名当中。这样的话，我们就。配置了那个白名单。呃，我给大家演示一下。啊，首先打开我的，然后。点到个人信息，然后就看到这个账号，把这个复制一下，然后粘贴到。分析到这里面。我们就设置好了白名单，这一步很重要，就是说在我们呃，开发完面板上传之后，然后我们。使用小程序去打开，呃，就要这个白名单。然后我们设置好面板类型之后呢。就下一步就是去初始化这个面板项目。然后目前的话，初始化密码项目有两种方式，呃，一个是通过我们的get HUB代码仓库去初始化。

呃，因为他，呃，因为我们是前面也提到了，我们是提供了。呃，H5面板的DEMO，然后是开源版的。然后大家可以把这个项目下来，然后。然后去基于这个项目去修呃去修改，然后去呃去把自己的面板去。去跑起来。但是它是有一个缺点的话，就是它目前只支持react框架。对，然后有可能有用vouee的小伙伴用问了这个咱们该呃用vouee的该怎么办呢？那咱们还有第二种方式，就是说呃，用命令行出师啊。啊，当然这个命令行初始化的这种方式呢，也是支持react模板。呃，接下来我给大家演示一下这个用命令行初始化的方式。

这个命令行初始化的方式。呃，它是接收一个模板，就是我们刚才提到的这个H5PANEL template。然后结合一个项目的名称。假如说我们这个要开发的是一个灯的模板，我们就可以。设置成是let。然后我们看一下。

呃，我们先用，可以用我本地的一个模板先去出手。然后它会进入一个，呃，可以我们去设置呃，项目名称。

然后设置这个版本号和这个描述。这个我们都可以选择默认的，然后选择框架的话，我们可以选择react。然后是否安装组件库的话，因为这个目前组件库是呃，只是是react，然后如果是V同学。不要选。我们学生，呃。安装标准面板组件库这个选项。然后是否安装依赖，然后我们可以选择手动，手动安装email。接下来呃，我们看到他的一个，呃一个的这个项目已经创建好了，呃，他有。它里面有一些，呃，Read me，然后有一些案例的代码，我们先看一下read me。里面有这个的配置，然后还有怎么去初始化这个项目。

然后还有。怎么去装依赖，然后最后去怎么去跑起来对。然后src这个目录下面呢，会有会有一些呃。内置的一些组件的代码已经是在里面的。接下来我们去跑一下这个项目。我们先装一下依赖。然后我们可以看一下这个提供的目前提供的一些样本的代码，我们可以看到它引入SDK的方式是通过呃，直接从window对象上去拿这个H5判断SDK的这个对象，然后我们就可以获得一个SDK。

然后呃，他提供了一些比方说展示设备详情，然后呃提示呃展示提示，然后获取这个设备的状态。啊，等等的一些功能。然后其实都是通过我们的SDK来完成的，比方说这个，呃，展示设备状态。呃，就是SDK，点点alert就可以去展示一个设备动态。现在我们的依赖已经装好了。然后我们去。呃，跑一下这个面板。呃，我看到他跑要跑面板的话，是需要提供一个呃product ID的。然后正好我们刚才呃，创建了一个。创建了一个设备，我们去找一下它的打开ID。

他的产品ID就是这个，我们把它复制一下。好，这样其实我们就可以看到了。啊，刚才那个，呃，项目下面的代码渲染出来的东西。我们首先我们看到它其实是呃，是我们提供的一个呃链接，然后。然后我们这个普莱利会被拼到了，拼到了这个呃，URL里面。

然后呃，我们这里面它跑起来还有另外重要的一点就是说这个呃外的配置就是呃，我们要把这个developing.script。然后代理到这个我们的，呃，这个开发的这个server下面。对，假如说假如说你。呃，在打开的时候发现了白屏，那可能就要呃检查一下我们的ves的配置，或者是我们的水米GA。啊，这边的配置是不是正确。我们可以演示一下关掉水小米是什么样子。对，我们就会发现它加载不了呃，developing.css和developing.js因为它是通过vele啊，把这两个呃建材资源去代理到本地的，这样的话他才会正常工作。

我们再把它打开。然后它又它又可以正常显示了，然后。这些都是。通过调用SDK实现的一些。交互。好，接下来呃，我们把这个呃开发育良跑完了之后呢。然后我们接下来就看一下这个调用SDK这块。然后我们刚才打开了一个开发页，它其实是已经内置了那个，呃，这个我们的SDK的一个对象，然后我们可以通过这个window点H5。SDK去。

调用它的方法，或者是呃，访问套餐的属性。然后我们这边有个截图，可以看一下这个H5判断SDK下面。会挂载了，呃。啊，许多许多的方法。然后其实这些方法提供的能力大概可以分为这么五大块，呃，第一块是这个设备管理。就是它可以去呃，进行一个设备控制，然后去获得设备当前的状态呀，或者是。那设备的device ID啊，就是device啊，这些我们都可以。通过SDK来完成。然后第二部分就是界面组件，就是刚才我给大家展示了可以弹出一个toast。然后或者是一个离线提示，这个可以调用我们的SDK来完成。然后第三步的话是去呃监听设备的事件，比方说我们有一个物联网的体温计，然后他要上报一些呃数据上来，然后。

那我们就可以通过监听呃，这个事件来来拿到这个设备上报的一些数据。然后第第四部分是调用小程序的能力，就是说比方说我们这个面板页可能会加跳转到设备详情，或者是说呃，看看用户有什么反馈，这些都可以通过呃调用SDK来完成。然后。第五步的话就是蓝牙能力，就是如果我们的设备是一个蓝牙设备的话。那我们可能需要通过SDK，首先去跟这个设备去建立一个蓝牙的连接。然后再去完成这个控制。那我上面说到这些能力的，呃，相关文档呢，大家都可以通过这个，呃，我们官方的这个H5这边开发SDK这个文档去看到，然后大家也可以去参考呃，H5面板DEMO，呃，或者是H5面开发面板，然后这些。

呃，这些资源都是开源到getb城。好，呃，我们讲完SDK，呃。对，用SDK之后，其实我们就可以去，呃进行一个真机调试了，就是我们。把UI去开发完，然后把SDK呃学会调用，我们就可以去。跟设备去进行一个真机调试，那真机调试的话，有的小伙伴可能问了说我们的真机调试，呃呃。通过刚才的页面可以去呃控制设备吗？呃，当然是不可以的，因为呃增机调试会有一个更更为复杂的URL。啊。更为复杂，URL就是我们需要通过开发的模式去生成一个呃H5面板链接，然后再打开才能去控制设备。

那这个，呃。那那这个流程我也是，我们也放到下面就是。首先进入到这个连连小程序的。关于我们，然后然后长按我们的logo，然后它就会弹出一个菜单，然后我们选择进入开发模式。然后再点击我们要调试的设备，长按。就可以生成这个虚调试地址，然后生成之后。呃，通过手机啊微信，呃，微信发到我们的电脑上，再把这个地址打开。我们就可以去控制设备了。啊，那我给大家演示一下这个流程。啊，就是首先在我的里面，然后关于我们。然后腾讯聊聊，现在我已经打开开发模式了，对。

然后这边打开开发模式之后。然后比方说我们选一个设备。点击生成。必须，我们要调试地址。它就会生成一个链接。然后我们把这个链接粘贴到这里面。啊，从这个界，从这个界面上我们是看不到什么变化，但是它的呃，它的UR里面会带带带更多的参数，它这样的话它就会。去跟设备进行一个通信。好啊，我们讲完征集调试之后。啊，下面我们就开始真正的去实战一下。去呃，去完成一个面板，去控制一个，去控制一下这个设备。呃，我们的成果大概是这个样子。呃，第一步呃，我们手头没有设备的话，其实是我们是可以创建一个模拟设备，呃所谓模拟设备就是说它是一个一段程序或者是一个软件，但是它呃具备呃设备呃这个输入输出可以跟跟我的面板进行一个呃交互。

我看一下怎么去创造一个模拟设备。呃，我们，呃，点进公共实例，我们可以看到一个快速入门。呃，然后这边会会有一个引导，就是说第一步是新建设备，第二步是下载设备的DEMO。这个DEMO就是其实是一个软件，然后我们可以把它运行起来。就它就相当于一个设备，然后第三步是连接和测试。然后新建设备的话。其实我们前面讲过，新建设备的话，先需要新建项目，然后新建产品，然后再把设备建出来，然后这个页面的话，其实就相当于把前面的步骤呃，都放到放到了一起了。

那么这里可以，呃。新建一个项目叫，比方说叫体温计。然后产品也叫体温机。那设备。设备叫低位001。然后因为这个是个快速入门，所以说它的物模型是帮我们定义好的，它具有呃，开关呃，颜色和亮度呃三个属性。啊，这个我们不需要管。对，然后我们点击下一步。他就会帮我们生成呃，设备的设备的DEMO。就是Windows同学可以可以下载这个。然后呃，Linux ox可以下载。呃，对应的版本，然后呃，我这边为了演示的话，其实我已经啊下载好了这个DEMO。呃，然后下一步的话，呃，其实跑起来就是。

用这个用这个。点CH命令就可以了。那我们来把这个设备跑起来先。我看到这个DEMO下面是有。呃，有一个脚本的，我们只要直衔接这个SH脚本就可以把这个设备跑起来。

好，可以看到我们的设备已经跑起来了。然后大家可能问我们的设备信息是在哪里，设备信息其实是在这个。Device for Jason里面配置的。我们可以打开来看一下。呃。这边有设备的product ID，然后设备的名称和呃，设备的这个授权信息。然后我们可以把我们刚才创建的这个，呃，设备啊，把这个数据更新上去。我们刚才看到的设备是智能灯车。然后产品ID。

啊，可以看到他现在就是，呃这个。啊，当前的设备就是那个智能登山，那我们就可以去呃控制这个设备了。那我们就在这里面去添加一个呃面板。然后。面板的话，其实我。呃，由于时间关系，我已经把它准备好了，接下来我们看一下呃，相关的代码是怎么工作的。我们先把面板。放到这里面。然后去。去在这个组件下面去把这个面板引进来。

保存一下。然后我们看一下面板有没有更新。好，我们看到其实面板已经。已经更新了，接下来我们就讲一下啊，这个面板的代码是呃。是怎么去实现的？

首先他是，呃，他是去把我们的SDK去。呃。获取，然后这种方式的话，其实因为我们配置了web pack那个external，然后它其实也是引用的window下面的对象。就是我们在这里配置了。啊，它只像一个window的HSDK，所以说我们这种写法也是可以的。就是最终他他不会把这个包打包进去，它是会去转化成一个window。

点五判断SDK，把它复制到这个变量上。呃，然后我们看一下这个面板的实现，首先我们是去获取了一下这个SDK的device data，然后把它存到这个state下面。呃，就是这样的话，我们就会，呃就是我们的面板从下一次进去的话，我们就呃会去，呃拿到这个DC的就会恢复到我们。嗯，这个设备跟这个设备的状态会对应上。然后我们监听了一下这个，呃。WS的时间是用来去诶更新面板状态的就是。啊，我们今天这个事件的话，如果如果设备端会有事件上来，我们就可以通过这个event拿到这个设备的device ID和device data，然后如果。这个d device ID正好是我们当墙面板所对应的device ID的话啊，我们就去，呃，就去把这个面板的状态去。

更新一下，对。然后我们还实现了一个控制设备的一个方法。啊，就是说，呃。当然它也是调我们的SDK来实现的。呃，他需要提供一个K和value，就是说我们物物模型刚才看到的。啊，物模型下面啊KY流。呃，然后。然后去通过这个control device data这个方法去，呃。去控制设备控制。然后最后是一个渲染，然后。然后这里是用到了我们的那个标准面板组件库里面的一些组件。呃，包括布尔组件，还有这个。呃，数字组件和这个枚举组件。啊，这个是孤儿主线，这个是。

呃，数字组件，这个是枚举组件。接下来要给大家演示一下这个，呃，设备控制，看看是否生效了。啊，我们可以先看一下开关。我们可以看到。啊，我们的这个设备已经变成了一个lighting的状态。然后它的当前的这个color是红色，然后它的亮度是零。那我们可以去控制它的亮度。因为我们可以看到我们的设备的这个亮度已经呃变成了四格。对，然后我们可以去控制一下它的这个颜色。我们可以看到它的这个我们的设备已经变成了绿色。那么可以把它关掉。啊，它会显示这个light is off。

然后那么它这个控制的流程是什么呢？这里讲一下就是说呃，我们调这个方法的时候。呃。他就会去发一个请求到我们的云平台，然后云平台的话会会把这个消息给通通知到这个设备，然后这个设备就会做出一个更新的动作。嗯。好，这就是我们这个简单的一个。呃，DEMO实战。呃，接下来分享一下这个我们在面板开发的过程中可能会遇到的一些问题吧。啊，第一个问题就是说打开页面之后会白屏啊，刚才也提到了，就是说呃。

一般来说就是如果VE或者是switchmega配置的不正常的话导致的，会导致我们的GS和CSS。呃，请求代理不到稳定，然后他就会报错，无法渲染。然后第二个问题是打开开发页面后显示400。就是啊，就是我们看到在刚刚开发的时候，我们要去传一个product ID，如果没有传这个ID的话。我们的页面就会报，嗯。找不到这个product也是没没有办法渲染的。然后第三个问题的话是，呃，小程序打开这个。H5面板白屏。这个的话就是我们打包上传之后，呃，然后去。去。啊，去那个去。从小程序去访问这个H5面板。呃。但是显示是白屏，那可能就是因为啊，我们在刚才提到的就是配置这个账号白名单，白名单的时候啊，没有配置好，所以说就访问不了。

啊，另外一个就是说，如果是呃，如果是你是用自己的号去开发的，然后呃，然后让别人去打开，那可能也是打不开不了的，那就可以通过这个主账号生成子账号的方式来获取这个访问权限，这样的话它也就可以打开了。然后呃，第四个问题的话就是呃，小程序中获取设备调试地址。呃，访问失败，那这个这个问题的话，可能就是我们在线调试的话，这个token的有一定的有效期。可能我们需要重新获取一下，就是说你刚才在这个。开发模式下，长按获取一个链接的时候，我们可以去重新获取一下这个链接。呃，尝试。

最后演示一下我们这个在呃上传呃，在手机上预览吧。板，我们现在这个面板已经开发好了，我们可以就是。NPM拉了。这时候他就打包，打包出来两个页面。呃，两个两个文件。啊，一个是我们的呃，CSS，一个是我们的JS。对，然后我们就可以把它上传上去。

刚才是这个设备。选择上传JS。呃，这边上传CSS。最后我们来保存一下。这样的话，我们的这个H5面板就生产成功了。方案。我们后续课程的话，呃，刚才也提到了有一些，呃，包括蓝牙的一个OTA升级啊，还有蓝牙设备的H5面板怎么开发的，嗯，这些我们后续都可能。

会去安排一个专门的，因为蓝牙是一大块儿一大块儿内容，所以说。可能会，呃。安排在后续的课程里面，也希望大家关注。然后最后再提一下我们这个。呃。呃，福利，希望大家还是积极参与啊。嗯，结束了。