开启辅助访问
设为首页
收藏本站
登录
立即注册
论坛首页
BBS
开发资料
样品购买
GitHub
邀请注册
技术博客
搜索
搜索
每日签到
本版
帖子
用户
物联网开发者社区-安信可论坛
»
论坛首页
›
开源硬件
›
爱星物联IoT云平台
›
产品控制面板开发应用
返回列表
发新帖
产品控制面板开发应用
[复制链接]
954
|
8
|
2024-3-15 17:19:33
|
显示全部楼层
|
阅读模式
本帖最后由 木缘 于 2024-3-15 17:19 编辑
产品控制面板开发应用
一、
控制面板框架代码说明
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相关规范扩展:
调用方式如下:
三、
H5调用云端接口
相关
API封装在src/api/index.js下,可自行根据云端接口扩展
调用方式如下:
四、
H5控制/接收设备指令
设备控制和消息接收通过
src/api/control.js完成,内部封装了与MQTT通信逻辑和协议解析
在控制面板首页完成
MQTT初始化,根据APP传入的参数
1.
初始化
MQTT所需参数
2.
注册相关回调函数
3.
连接
MQTT服务器并监听消息回调
完成以上步骤后会自动订阅相关
Topic,在相应的回调函数中接收数据的处理逻辑:
发送控制控制指令如下:
五、
打包上传云管平台
1.
回到项目根目录执行
npm run build打包面板,将dist内部文件打包成zip文件。如下:
2.
将
“控制面板.zip”上传至云管平台-产品管理-控制面板下
3.
在云管平台
-产品管理-产品类型下,添加产品产品类型的时候引入与之匹配的控制面板。
4.
完成以上操作后,在
APP配置新设备后点击设备进入控制面板,即可查看最新面板内容,根据需求联调和控制自己的设备。
回复
使用道具
举报
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
您需要登录后才可以回帖
登录
|
立即注册
手机登录
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
木缘
14
主题
0
回帖
437
积分
中级会员
中级会员, 积分 437, 距离下一级还需 63 积分
中级会员, 积分 437, 距离下一级还需 63 积分
积分
437
加好友
发消息
回复楼主
返回列表
小安派&M61教程合集
小安派Cam
爱星物联IoT云平台
图文推荐
【板子申请流程】新进来的同学请看这里-活动已停
2023-11-08
【中奖公告】申请Ai-M61-32S-kit的同学看过来!
2024-04-29
开发板申请 | Ai-M61-32S高性能开发板来啦,共赠送200个!-活动
2024-04-18
我也领到官方免费送的AiPi-Eyes-S1开发板啦!!!
2023-09-26
【轻松上手】小安派跑个超级玛丽
2023-09-27
热门排行
1
【板子申请流程】新进来的同学请看这里-活
2
安信可社区一周年狂欢派对&抽奖盖楼活动开
3
我也领到官方免费送的AiPi-Eyes-S1开发板啦
4
优质文章有赏!现金红包+开发板无限送,冲
5
【中奖公告】申请Ai-M61-32S-kit的同学看过
6
【官方公告】关于板子申请发帖争议解释
7
【轻松上手】小安派跑个超级玛丽
8
【教程】社区发帖教程指引(尤其是图片上传
9
开发板申请 | Ai-M61-32S高性能开发板来啦
10
【电子DIY作品】+人体存在感应器+WB2+RD03