搭建简易的物联网服务端和客户端-DCloud手机端（十）

治电小白菜

发布于 2020-08-25 11:20:13

8530

发布于 2020-08-25 11:20:13

文章被收录于专栏：技术综合技术综合

今天完成的是手机端的开发，很简单，DCloud混合开发，用ajax来获取数据，然后EChart显示数据。代码地址：https://github.com/klren0312/stm32_wifi 2017.3.26

搭建简易的物联网服务端和客户端目录

DCloud手机端

1.DCloud

主要用的是他们家的MUI。

1）介绍官方介绍：最接近原生APP体验的高性能前端框架网址：http://dev.dcloud.net.cn/mui/

2）开发工具非常好用的前端开发工具，HBuilder。

QQ截图20170326210431.png

2.相关代码

1）AJAX请求代码使用的是mui封装好的函数

mui.getJSON('http://10.127.5.188:3000/tem',function(data){
    lineChart.setOption({                              
            series: [{
            // 根据名字对应到相应的系列
                name: '温度',
                data: data
            }]
    });
    temChart.setOption({
        series:[{
            data: [{value: data[data.length-1], name: '温度'}]
        }]
    })              
});
    
mui.getJSON('http://10.127.5.188:3000/hum',function(data){
    lineChart.setOption({                              
        series: [{
            // 根据名字对应到相应的系列
            name: '湿度',
            data: data
        }]
    });
                        
    humChart.setOption({
        series:[{
            data: [{value: data[data.length-1], name: '湿度'}]
        }]
    })
});

2）创建子界面

mui.init({
    swipeBack: false,
    statusBarBackground: '#f7f7f7',
    tureConfig: {
        doubletap: true
    },
    subpages: [{
        id: 'list',
        url: 'list.html',
        styles: {
            top: '45px',
            bottom: 0,
            bounce: 'vertical'
        }
    }]
});

3）页面跳转代码

document.getElementById('device1').addEventListener('tap', function() {
    mui.openWindow({
        url:'pages/device1.html',
        id:'pages/device1.html',
        show:{
            aniShow:"pop-in"
        }
    })
});