一种动态选择、加载APP设备控制面板UI页面和方法技术

本发明专利技术公开了一种动态选择、加载APP设备控制面板UI页面和方法，涉及计算机软件技术领域，包括以下步骤：步骤1，客户端预先支持react native、webview、以及原生native方案的面板容器，支持自动加载、更新面板内容；步骤2，客户端支持和native、服务端的双向通信，并提供通信和控制API；步骤3，客户端提供一个面板的入口，根据deviceModel的数据模型，获取对应的代码资源包和面板类型。客户端被配置为通过加载不同的面板容器，渲染不同的控制面板。deviceModel的数据模型包括uiType和uiId属性，uiType和uiId属性根据服务端的配置来标注具体的面板类型。uiType属性的类型分别为webview、react native和native。uiType属性的类型如果是webview和react native类型，客户端会根据uiId动态去服务端获取面板进行加载。

【技术实现步骤摘要】
一种动态选择、加载APP设备控制面板UI页面和方法
本专利技术涉及计算机软件
，尤其涉及一种动态选择、加载APP设备控制面板UI页面和方法。
技术介绍
随着互联网的普及以及用户体验的需要，越来越多的网站在建站过程中首先考虑的便是提供交互性更强的动态效果的同时满足大多数网页浏览器的兼容性；但是由于网页浏览器种类多样，版本纷繁复杂，所承载浏览器的设备不断更新，想要确保浏览器兼容性可谓难上加难。在移动物联网应用中，一种应对特定场景的解决方案时必须的。因为物联网设备控制界面的多样性以及多变性，导致需要经常更新APP来满足需求，并且不同的控制界面可能使用不同的技术方案来实现界面功能。那么，升级、发布面板需要更新APP，增加工作量。另外，不同的面板使用不同的技术方案，管理维护成本较大。客户端提供面板容器，支持webview、reactnatvie、原生native的面板方案，根据不同的面板类型加载不同的面板容器。对于webview、reactnative的面板，支持在线加载、和升级面板，并且后续可快速的横向扩展，以无缝的新增面板技术方案。
技术实现思路
本专利技术所述的一种动态选择、加载APP设备控制面板UI页面的方法，包括以下步骤：步骤1，客户端预先支持reactnative、webview、以及原生native方案的面板容器，支持自动加载、更新面板内容；步骤2，客户端支持和native、服务端的双向通信，并提供通信和控制API；步骤3，客户端提供一个面板的入口，根据deviceModel的数据模型，获取对应的代码资源包和面板类型。优选地，所述客户端被配置为通过加载不同的面板容器，渲染不同的控制面板。优选地，所述deviceModel的数据模型包括uiType和uiId属性，所述uiType和uiId属性根据所述服务端的配置来标注具体的面板类型。优选地，所述uiType属性的类型分别为webview、reactnative和native。优选地，所述uiType属性的类型如果是webview和reactnative类型，所述客户端会根据uiId动态去所述服务端获取面板进行加载。本专利技术还提供了一种动态选择、加载APP设备控制面板UI页面，包括reactnative模块，还包括加载模块、第一交互模块、第二交互模块和页面渲染模块，所述加载模块用于加载reactnative模块，所述第一交互模块用于与所述reactnative模块进行交互，所述第一交互模块包括导航器，所述导航器能够定位所述reactnative模块中的数据接口，使得页面能够在不同场景之间切换，所述第二交互模块用于捕捉并响应用户操作，所述第二交互模块通过所述第一交互模块获取所述react-native模块的数据接口，从而响应用户的点击操作，所述页面渲染模块用于获取来自react-native模块的数据源，对所述数据源进行解析，并根据所述解析结果渲染页面。优选地，所述加载模块被配置为设定一个与所述第一交互模块进行交互的资源定位符，然后用react-native模块的native渲染类来加载所述资源定位符所在地址的文件。优选地，所述资源定位符是本地主文件的地址或者远程服务器中与所述第一交互模块进行交互的文件的地址。优选地，所述本地主文件为本地硬盘bundle下的由后缀名为js的文件打包而成的文件。优选地，所述加载模块和第一交互模块被配置为react-native提供的数据交互接口，所述数据交互接口用于所述加载模块和所述第一交互模块的信息交互。具体实施方式下面结合具体实施方式对本专利技术做进一步描述。在本专利技术的一个较佳实施例中，客户端预先支持reactnative、webview、以及原生native方案的面板容器，支持自动加载、更新面板内容，并且支持和native、服务端的双向通信,提供通信、控制API。另外，客户端提供一个面板的入口，根据deviceModel的数据模型，获取对应的代码资源包和面板类型，通过加载不同的面板容器，渲染不同的控制面板。在本专利技术的另一个较佳实施例中，设备的模型里面有uiType、uiId属性，根据服务端配置，来标注具体的面板类型，uiType三个类型分别为H5(webview)、RN(reactnative)、NA(native)，如果是H5和RN类型，会根据uiId动态去服务端获取面板进行加载，具体见以下代码。以上详细描述了本专利技术的较佳具体实施例。应当理解，本领域的普通技术无需创造性劳动就可以根据本专利技术的构思作出诸多修改和变化。因此，凡本
中技术人员依本专利技术的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。本文档来自技高网...

【技术保护点】
1.一种动态选择、加载APP设备控制面板UI页面的方法，其特征在于，包括以下步骤：步骤1，客户端预先支持react native、webview、以及原生native方案的面板容器，支持自动加载、更新面板内容；步骤2，客户端支持和native、服务端的双向通信，并提供通信和控制API；步骤3，客户端提供一个面板的入口，根据deviceModel的数据模型，获取对应的代码资源包和面板类型。

【技术特征摘要】
1.一种动态选择、加载APP设备控制面板UI页面的方法，其特征在于，包括以下步骤：步骤1，客户端预先支持reactnative、webview、以及原生native方案的面板容器，支持自动加载、更新面板内容；步骤2，客户端支持和native、服务端的双向通信，并提供通信和控制API；步骤3，客户端提供一个面板的入口，根据deviceModel的数据模型，获取对应的代码资源包和面板类型。2.如权利要求1所述的动态选择、加载APP设备控制面板UI页面的方法，其特征在于，所述客户端被配置为通过加载不同的面板容器，渲染不同的控制面板。3.如权利要求1所述的动态选择、加载APP设备控制面板UI页面的方法，其特征在于，所述deviceModel的数据模型包括uiType和uiId属性，所述uiType和uiId属性根据所述服务端的配置来标注具体的面板类型。4.如权利要求3所述的动态选择、加载APP设备控制面板UI页面的方法，其特征在于，所述uiType属性的类型分别为webview、reactnative和native。5.如权利要求3所述的动态选择、加载APP设备控制面板UI页面的方法，其特征在于，所述uiType属性的类型如果是webview和reactnative类型，所述客户端会根据uiId动态去所述服务端获取面板进行加载。6.一种动态选择、加载APP设备控制面板UI页面，其特征在于，包括reactnative模块，加载模块、第一交互模块、第二交互模块和页面渲染模块，所...

【专利技术属性】
技术研发人员：周瑞鑫，冯晓，
申请(专利权)人：杭州涂鸦信息技术有限公司，
类型：发明
国别省市：浙江,33