今天完成的是手机端的开发，很简单，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"
}
})
});
3.结果截图
1）两种打包方式
QQ截图20170326211112.png
2）应用截图
Screenshot_20170326-211147.png
Screenshot_20170326-211156.png
Screenshot_20170326-211738.png
4.总结
DCloud就那样，如果再让我选择一次的话，我选择APPCAN。。。
@治电小白菜20170326
