今天完成的是手機端的開發，很簡單，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
