柿饼_PersimmonUI

[柿饼派] 制作一个极简风格的桌面时钟+气象站

发布于 2019-08-30 15:51:02 浏览：5332 订阅该版

[tocm]

## [柿饼派] 制作一个极简风格的桌面时钟+气象站
什么都不要多说，直接上手设计UI界面:<br>
![mXBgL6.jpg]([url]https://s2.ax1x.com/2019/08/30/mXBgL6.jpg[/url])<br>
从图片中可以看出，这是一个可以显示实时时间，日期和城市天气信息的桌面时钟+气象站；那么应该如何获取这些信息呢？我分成两部分来做：
1. 首先是天气信息部分：通过HTTP request接口调用“心知天气”服务（不是打广告哈，因为我本人一直就用这个的免费版，不限制调用次数，但只有天气和温度两个数据，对我来说够了），返回的是json数据，稍稍处理一下下就可以拿到天气和温度两个数据了，再将其显示到屏幕的label上，同时根据天气情况可以显示对应的天气图标；我还在显示城市的地方加了一个textbox，这样整个气象站就更加灵活了，你可以不用在代码里把url写死，而可以随时触屏输入城市拼音更改你想显示的城市天气信息。
2. 第二部分是实时时钟：原本我的想法是跟获取天气一样，找个可以获取世界时间的服务接口，这样一个HTTP request就搞定一切，但是找了一圈不是要钱就是有调用次数限制，所以我另外想了一个骚操作：在esp8266上开启sntp服务，每秒获取一次实际时间；同时开启mqtt服务，将每秒获取到的时间发布到服务器，而柿饼派这边订阅相应的主题，实时接收数据，就这样假装有sntp了；然后还是处理数据，显示。<br>

上代码：

```C
var json_obj = 0;
var localname = 'shanghai';

var page = {

wifi : 0,
    time : 0,
    client : 0,
    data : {timer : 0},

getSkyInfo: function()
    {
        var that = this;
        var str =0;
    
        var rq1 = pm.request
        ({
            url: 'http://api.seniverse.com/v3/weather/now.json?key=6dxwrt9yzsyj3vmr&location=' + localname + '&language=zh-Hans&unit=c', 
            method : 'GET',
            header:{
                "Content-Type":"application/json"
            },
            success: function(res) {    
                console.log('request success'),      
                console.log(res.data),
                str = res.data.toString('utf8');  
                json_obj=JSON.parse(str);

that.setData( {local : {value : json_obj.results[0].location.name , refresh : true}}); 
                that.setData( {weather : {value : json_obj.results[0].now.text , refresh : true}}); 
                that.setData( {temp : {value : json_obj.results[0].now.temperature , refresh : true}});

switch(json_obj.results[0].now.text)
                {
                    case '晴':
                        that.setData({imagebox2 : 'sunny.png'});
                        break;
                    case '多云'||'晴间多云'||'大部多云'||'阴':
                        that.setData({imagebox2 : 'cloud.png'});
                        break;
                    case '小雨'||'中雨'||'大雨'||'暴雨'||'大暴雨'||'特大暴雨':
                        that.setData({imagebox2 : 'rain.png'});
                    default:
                        break;
                }

},
            fail: function(){
                console.log('request failed')
            }
        });
    },

onLoad:function(event){
        var that = this;

this.wifi = pm.createWifi();
        var mqttModule = require("mqtt");
        this.client = mqttModule.Client("tcp://120.76.100.197:18831");

this.client.on("message", function(topic, message) {
                    console.log(topic + " : " + message.toString("ascii"));  
                    that.time = message.toString("ascii");

var day = that.time.slice(0,3);
                    var month = that.time.slice(4,7);
                    var date = that.time.slice(8,10);
                    var year = that.time.slice(20,25);

var clock = that.time.slice(11,13);
                    var min = that.time.slice(14,16);
                    var sec = that.time.slice(17,19);

that.setData({label1 : clock});
                    that.setData({label2 : min});
                    that.setData({label3 : sec});

that.setData({label8 : month});
                    that.setData({label9 : date});
                    that.setData({label10 : year});

switch(day)
                    {
                        case 'Sun':
                            that.setData({label7 : '星期日'});
                            break;
                        case 'Mon':
                            that.setData({label7 : '星期一'});
                            break;
                        case 'Tue':
                            that.setData({label7 : '星期二'});
                            break;
                        case 'Wed':
                            that.setData({label7 : '星期三'});
                            break;
                        case 'Thu':
                            that.setData({label7 : '星期四'});
                            break;
                        case 'Fri':
                            that.setData({label7 : '星期五'});
                            break;
                        case 'Sat':
                            that.setData({label7 : '星期六'});
                            break;
                    }

that.setData({page1 : {refresh : true}});
                    });

this.client.on("connect", function() {
            console.log("the client is connected");       
            });

this.data.timer = setInterval(function()    
        {
            console.log("update sky info");
            that.getSkyInfo();
        }, 1000 * 10);
    },

/* 此方法展示窗体前发生 */
    onShow:function(event){

},

/* 此方法关闭窗体前发生 */
    onExit:function(event){
        //this.uart.close();
    },

onBtn:function(event){
        console.log('wifi');
        this.wifi.connect({  ssid: "realthread_VIP",
                            password: "1234567o"});
    },

onBtn1:function(event){
        this.client.connect();    
        this.client.subscribe("/public/TEST/Topic_1", { qos: 0 }, function() { console.log("subcribe success") }); 
    },

onTextChange : function(event)
    {    
        localname =  event.detail.value;
    }
};

Page(page);

page = 0;

```

效果：<br>
![mX4bCt.gif]([url]https://s2.ax1x.com/2019/08/30/mX4bCt.gif[/url])
[![mX5UIA.md.jpg]([url]https://s2.ax1x.com/2019/08/30/mX5UIA.md.jpg[/url])]([url]https://imgchr.com/i/mX5UIA[/url])

东西没难度，但是还挺有意思，试试看吧~