#小程序云开发挑战赛开发文档#-IAI CDS-disassembly
发布于 4 年前 作者 juan82 5083 次浏览 来自 分享

1.项目介绍:

本项目名为:IAI CDS,中文释义是基于工业智能的组件拆解服务,主要面向不同工业应用场景下经典的工业APP典例,将这些经典案例进行功能级别的拆解,提取出每个功能中最通用的组件,让用户在案例的功能体验中学习和体验这些原子化的工业APP组件,从而帮助工业APP开发者开发和实现自己的APP。

2.应用场景:工业智能领域的不同应用场景,包括但不仅限于设备监控类和工单流程类。

3.目标用户:工业APP开发者,微信小程序学习者。

4.系统架构:

4.1前端组件化:

本项目前端主要使用微信小程序生态实现,同时采用组件化思想,提高代码的复用性,降低代码冗余和耦合度。通过使用小程序自定义组件,将项目中可复用的组件进行原子化和细粒度拆分,然后对这些组件中公用的数据和方法封装在对应的behaviors中,然后在页面中通过动态导入组件,传递数据的形式实现页面的功能拆解,同时这种组件化的思想也符合本项目的主题--工业APP组件体验和拆解服务。我们将工业APP案例中最通用和可复用的组件进行功能化拆解,包括前端UI组件,前端JS逻辑组件,算法组件和云开发相关组件等。针对每一个拆解出来的组件,通过让用户提交表单和属性选择等形式能直接体验到组件在不同数据传递的状态的切换,然后通过组件代码能学习该组件的实现过程。此外,在案例中的组件和组件库中的组件也有对应的关系,组件库中的组件具有通用性,用户在体验和学习每个组件的基本使用之后,通过了解该组件的应用场景,能跳转到实际案例中的该组件体验页面中。案例中的组件体验更具有针对性,也会更复杂。如果用户在案例的组件体验中觉得吃力,也能跳转到组件库中对应的组件,先去学习该组件的基本使用过程。


4.2功能函数封装:

在本项目中用到了很多会在不同页面多次调用的方法,为了提高方法的复用性,我们将这些功能函数封装到util.js文件中,然后在用到这些方法的js页面中,通过动态导入util文件的形式实现方法的导入和使用。



4.3 打通和其他小程序之间的连接:

针对本项目中用到的风机结冰故障预测算法模型,由于其工业建模过程中较为复杂,用户在学习这部分组件时,能通过按钮跳转到“工业预测性维护在线实验平台”小程序中,在该小程序中能让用户通过实验的形式学习建模流程。


还有针对云开发相关组件的体验,用户也能通过按钮跳转到“最简模块”小程序中,在该小程序中通过让用户体验云数据库增删改查等基础操作等形式,能学习云开发的基本使用。

4.4 第三方组件库的引用

在本项目中,使用vant weapp这个第三方UI库对页面进行布局和UI优化。此外,由于在风机APP中需要使用图表动态加载数据,所以使用Echarts中的折线图,异步加载折线图中的数据,并通过setInterval每一秒动态刷新折线图中的数据,实现折线图的实时刷新功能。

下图是本项目的结构示意图:


5.云开发

在本项目中,后端基本采用小程序云开发的模式,首先使用云数据库进行数据的存储和增删改查操作,然后使用云函数一次性读取云数据库中集合的全部数据,遇到需要调用第三方服务器API获取数据的部分,采用通过导入npm包axios向第三方服务器发送post请求,在获取到服务器的返回结果之后,在前端JS文件中,通过调用云函数相关API读取数据,然后进行数据绑定和可视化渲染。

此外,由于在本项目中,需要获取access_token这一变量作为获取第三方API的参数进行传递,而access_token具有时效性,每一个月就会失效。为了保证数据的稳定读取,在getUserToken这个获取acces_token的云函数中,通过设置config.json每两周定期触发云函数,然后通过wx.setStorageSync设置access_token数据缓存。

以下是在本项目中的云开发结构图和部分云函数截图:


6.源码链接地址:https://github.com/jiaody111/IAICDS

7.二维码:

9 回复

很棒很厉害,加油(ง •̀_•́)ง

支持支持!

对于我这种小白来说真的挺好用^O^/

回到顶部