开启辅助访问
设为首页收藏本站
搜索
物联网开发者社区-安信可论坛»论坛首页 › 开源硬件 › 爱星物联IoT云平台 › 产品控制面板开发应用

产品控制面板开发应用

[复制链接]
查看874 | 回复8 | 2024-3-15 17:19:33 | 显示全部楼层 |阅读模式
本帖最后由 木缘 于 2024-3-15 17:19 编辑

产品控制面板开发应用
一、控制面板框架代码说明
图片1.png dist:打包后目录
node_modules:依赖包目录
public：静态资源目录
src：源码目录
src/api:访问第三方JS封装
src/components：组件目录
src/config:全局配置目录
src/directives:指令目录
src/lang:国际化目录
src/mixins:混合mixin目录
src/mock:接口模拟目录
src/router:路由目录
src/styles:样式目录
src/util:工具包目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
babel.config.js:babel配置文件
postcss.config:自适应规则配置文件

控制面板使用vue 2.x全家桶、Less、VantUI、antv/f2、animate、postcss-px-to-viewport等技术实现，开发简单，效率更高。

二、H5调用APP原生方法
相关方法封装在src/api/cordova.js下，可自行根据cordova相关规范扩展：
图片2.png

调用方式如下：
图片3.png


三、H5调用云端接口
相关API封装在src/api/index.js下，可自行根据云端接口扩展
图片4.png

调用方式如下：
图片5.png

四、H5控制/接收设备指令
设备控制和消息接收通过src/api/control.js完成，内部封装了与MQTT通信逻辑和协议解析
图片6.png
在控制面板首页完成MQTT初始化，根据APP传入的参数
1. 初始化MQTT所需参数
2. 注册相关回调函数
3. 连接MQTT服务器并监听消息回调
图片7.png

完成以上步骤后会自动订阅相关Topic，在相应的回调函数中接收数据的处理逻辑：
图片8.png

发送控制控制指令如下：
图片9.png
五、打包上传云管平台

1. 回到项目根目录执行npm run build打包面板，将dist内部文件打包成zip文件。如下： 图片10.png

2. 将“控制面板.zip”上传至云管平台-产品管理-控制面板下
图片11.png

3. 在云管平台-产品管理-产品类型下，添加产品产品类型的时候引入与之匹配的控制面板。
图片12.png

4. 完成以上操作后，在APP配置新设备后点击设备进入控制面板，即可查看最新面板内容，根据需求联调和控制自己的设备。
图片13.png





回复

使用道具 举报

1084504793 | 2024-3-15 17:30:55 | 显示全部楼层
赞
回复

使用道具 举报

bzhou830 | 2024-3-15 17:43:58 | 显示全部楼层
选择去发光，而不是被照亮
回复

使用道具 举报

1055173307 | 2024-3-16 09:58:59 | 显示全部楼层
学习
回复

使用道具 举报

物联网 | 2024-3-16 10:13:01 | 显示全部楼层
赞一下
回复

使用道具 举报

wurong | 2024-3-16 10:58:25 | 显示全部楼层
回复

使用道具 举报

timo | 2024-3-16 15:31:12 | 显示全部楼层
赞
回复

使用道具 举报

7788 | 2024-3-16 20:27:59 | 显示全部楼层
赞一下
回复

使用道具 举报

望风阁 | 2024-5-28 23:32:46 | 显示全部楼层
大佬，赞
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

木缘

10

主题

0

回帖

325

积分

中级会员

积分
325
回复楼主 返回列表