本帖最后由 shadowliang 于 2020-2-29 17:36 编辑
最近在入门学习柿饼派,看了一遍文档中心里面的资料和视频中心里面的教程,看了之后觉得要动手练练才能真正理解,于是东拼西凑制作了一个简易的桌面时钟+疫情数据实时更新列表的示例,share 一下。话不多说,先贴两张图。

桌面时钟效果

疫情数据列表
简介 硬件:柿饼派软件:Persimmon UI Builder 数据来源:1.天气数据来自天气 api :
2.网络时钟数据来自:
http://quan.suning.com/getSysTime.do 3.疫情数据来自:
https://lab.isaaclin.cn/nCoV/api/area?latest=1&province=%E5%B9%BF%E4%B8%9C%E7%9C%81主要功能 1.可以实时更新指定地区的气象数据包括天气情况、温度、湿度2.可以通过网络校准时钟数据实时更新时钟。3.可以实时获取指定省份的最新的疫情数据。4.初次联网成功后会记录连接热点的信息,开机时自动重连。
实现过程* UI 设计部分
UI 界面采用 2个 page 页面,其中page1 中放置 DotIndicator 控件card 控件,并在 card 控件中放置 3个 panel ,panel 1 为展示桌面时钟+天气信息,panel 2 为展示 WIFI 操作页面,在 panel2 中放置 listctrl 控件展示 附近 WiFi 信息并支持按钮触发连接 WiFi的操作,进入 page2 页面输入 WiFi 密码进行联网,panel3 中放置 listctrl 控件为展示疫情信息,可以通过左右滑动切换到不同的 panel 中,page2 中主要是 wifi 联网的密码输入界面,由 page1中的 panel2 页面中按钮触发进行切换。相关的界面如下:

page1_panel1 界面

page1_panel2 界面

page1_panel3 界面
* 数据更新部分
采用定时器定时发送请求,获得原始数据,对原始数据进行解析,把解析得到的数据展示到对应的页面中。下面是获取数据的核心代码。
//1.获取天气数据
getWeathearInfo:function(event)
{
var that = this;
var str = 0;
console.log("getWeathrerInfo....")
var req1 = pm.request({
url: '/api?version=v6&appid=31972938&appsecret=e3fvZnAN&city='+localcity,
data:{
x:'',
y:''
},
header:{
"Content-Type":"application/json",
},
success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
console.log("json_par")
str = res.data.toString('utf8');
console.log(str)
json_obj = JSON.parse(str);
console.log(json_obj)
week = json_obj.week;
that.tempdataupdate();
},
complete:function()
{
console.log('request complete')
},
fail:function(){
console.log('request failed')
}
})
},
//界面上更新对应的数据
tempdataupdate:function(){
console.log("<< tempdataupdate")
this.setData({img_weather:{value:json_obj.wea_img+'.png',refresh : true}})
this.setData({hum_label :{value : json_obj.humidity,refresh : true}});
this.setData({tem_label :{value : json_obj.tem+"°C",refresh : true}});
this.setData({weather_label :{value : json_obj.wea,refresh : true}});
this.setData({week_label :{value : week,refresh : true}});
},
获取时间数据
getNetTimeInfo:function(){
var that = this;
var str = 0;
console.log("Get NetTimeInfo....")
var req1 = pm.request({
url: 'http://quan.suning.com/getSysTime.do',
data:{
x:'',
y:''
},
header:{
"Content-Type":"application/json",
},
success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
console.log("json_par")
str = res.data.toString('utf8');
console.log(str)
json_obj1 = JSON.parse(str);
console.log(json_obj1)
console.log("systemtime:"+json_obj1.sysTime2)
var temp = json_obj1.sysTime2.toString();
console.log("length:"+temp.length)
console.log(temp)
year = temp.substring(0,4);
console.log(year)
month = temp.substring(5,7);
console.log(month)
day = temp.substring(8,10);
console.log(day)
console.log(year+':'+month+':'+day);
var nethour = temp.substring(11,13);
hours = parseInt(nethour, 10);
console.log(nethour);
var netminutes = temp.substring(14,16);
minutes = parseInt(netminutes, 10);
console.log(netminutes);
var netseconds = temp.substring(17,19);
seconds = parseInt(netseconds, 10);
console.log(netseconds)
that.updateDate();
},
complete:function()
{
console.log('request complete')
},
fail:function(){
console.log('request failed')
}
})
},
//更新界面的数据
updateDate:function()
{
this.setData({year_label :{value : year,refresh : true}});
this.setData({month_label :{value : month,refresh : true}});
this.setData({day_label :{value : day,refresh : true}});
},
获取疫情数据
//获取疫情数据
getrealData:function(){
var that = this;
var str = 0;
console.log("Get RealData....")
var req1 = pm.request({
url: 'https://lab.isaaclin.cn/nCoV/api/area?latest=1&province=%E5%B9%BF%E4%B8%9C%E7%9C%81',
data:{
x:'',
y:''
},
header:{
"Content-Type":"application/json",
},
success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
str = res.data.toString('utf8');
console.log(str)
json_obj2 = JSON.parse(str);
console.log('省份'+json_obj2.results[0].provinceName)
console.log('现有确诊数量'+json_obj2.results[0].currentConfirmedCount)
console.log('累计确诊数量'+json_obj2.results[0].confirmedCount)
console.log('治愈数量'+json_obj2.results[0].curedCount)
console.log('死亡人数'+json_obj2.results[0].deadCount)
that.updataShow();
},
complete:function()
{
console.log('request complete')
},
fail:function(){
console.log('request failed')
}
})
},
// 更新UI 界面的数据
updataShow:function(){
console.log(">> updataShow" + "length="+json_obj2.length);
var dataList = new Array();
var ProvinceItem = new Object();
ProvinceItem.cityname = {value :json_obj2.results[0].provinceName };
ProvinceItem.currentConfirmedCount = { value: json_obj2.results[0].currentConfirmedCount };
ProvinceItem.confirmedCount = { value: json_obj2.results[0].confirmedCount };
ProvinceItem.curedCount = { value: json_obj2.results[0].curedCount };
ProvinceItem.deadCount = { value: json_obj2.results[0].deadCount };
dataList.push(ProvinceItem);
for(var i = 0 ; i < 20; i++)
{
var item = json_obj2.results[0].cities;
console.log(item.cityName);
var realdataItem = new Object();
realdataItem.cityname = {value : item.cityName};
realdataItem.currentConfirmedCount = {value : item.currentConfirmedCount};
realdataItem.confirmedCount = {value : item.confirmedCount};
realdataItem.curedCount = {value :item.curedCount };
realdataItem.deadCount = {value : item.deadCount};
dataList.push(realdataItem);
}
listPage.setData({listctrl1 : {empty : true}});
listPage.setData({listctrl1:{page : listPage, xml : "Panels/realdata", items : dataList, refresh:true}})
console.log("datalist refresh")
},
总结
刚开始入门学习柿饼派,深有体会的是柿饼派的 UI 真的挺方便的,上手很快,并且可以脱离板子,编译,下载,调试的苦恼,当然例如网络模块这些还是得依靠在板子上调试才可以,关于柿饼派的学习还得多熟悉文档提供的 api说明,还可以参考Persimmon UI Builder 里面帮助选项中的 online demo 中的炫酷示例进行学习。
查看更多