跳转至

柿饼M之网络

本节向大家介绍如何在JS代码中使用Http Request,除此之外柿饼M还支持Net模块(即TCP协议,如何使用请参考网络API文档)。

:与网络相关的功能,无法在PC上模拟运行,需要开发者下载至开发板中,直接调试。

首先,在上位机设计器上创建好一个新的工程,并加入一个MultiTextBox控件,用于显示开发者服务器返回的数据。再加入两个button来对MultiTextBox的内容进行控制。

requestDemo_ui

其中,把button的tap事件绑定到函数onButton

cleanBtn属性 connectBtn属性

脚本代码编辑

在设计器中双击打开JS代码文件,进行编辑。代码如下:

var page = {
    onButton: function(e) {

        var thiz = this;
        console.dir(e);
        if(e.target.id == "connect")
        {
            var rq1 = pm.request({
                //开发者服务器接口地址
                url: 'http://www.rt-thread.com/service/rt-thread.txt', 
                //请求方式  
                method : 'POST',
                //设置请求的header
                header:{
                    "Content-Type":"application/json"
                },
                //请求的参数
                data: {
                    x: '',
                    y: ''
                },
                //与开发者服务器连接成功后,执行的回调函数
                success: function(res) {      
                    console.log('request success'),
                    //从开发者服务器收到的数据类型为Buffer,可以API转换成指定编码格式
                    console.log(res.data.toString('utf8')), 
                    //从开发者服务器收到的状态码
                    console.log(res.statusCode),
                    //从开发者服务器收到的header
                    console.dir(res.header),
                    //把返回的数据显示在MultiTextBox1中        
                    thiz.setData({
                        MultiTextBox1: { value : res.data , refresh : true}
                    })   
                },
                //当http request操作完成后,执行的回调函数,无论连接成功还是失败都会执行
                complete: function(){     
                    console.log('request complete')  
                },
                //与开发者服务器连接失败后,执行的回调函数
                fail: function(){     
                    console.log('request failed'),
                    thiz.setData({
                        MultiTextBox1: { value : "connect failed" , refresh : true}
                    }) 
                }
            });
        }else if(e.target.id == "clean")
        {
            console.log("ready to clean"),
            //清除MultiTextBox1的内容
            thiz.setData({
                MultiTextBox1: { clear : true , refresh : true}
            }) 
        }

    }
};

Page(page);
  • 实际效果

    requestDemo

Sample - 天气预报

上一小节,向大家介绍了http request的基本用法。现在我们就来使用它做一个天气预报的板块。

  1. 首先,我们得找一些关于天气预报的http API。

    在接下来的Demo中,我们使用了这个API: http://mobile.weather.com.cn/data/sk/101010100.html?_=1381891661455 可以直接通过浏览器打开链接,看看能够获取什么样的数据。

    天气情况

  2. 打开我们的PersimmonUI创建工程,并完成以下UI布局,具体布局方法就不细说了,请参考之前柿饼相关教程。

    页面布局

  3. 最后,我们可以这样写JS脚本。

//定义一个全局对象,用来保存http request返回的JSON对象
var json_obj =0;
var page = {

    data : {timer : 0},     //定时器

    //更新日期,根据json_obj中日期的数据,来更新指定ImageBox的图片
    onSetDate : function(e)     
    {
        var k=10000000;
        var data ={};
        for(var i=8,j=e; i>0 ;i--)
        {
            data['number'+i] = {value: parseInt(j/k)+".png",refresh:true};
            this.setData(data);
            j=j%k;
            k=k/10;
        }
    },

    //根据json_obj中的数据,来设定对应Label的值
    onUpdate : function(){
        this.onSetDate(json_obj.sk_info.date);
        this.setData({
            temp : {value : json_obj.sk_info.temp , refresh : true}
        });
        this.setData({
            wind : {value : json_obj.sk_info.wd , refresh : true}
        });
        this.setData({
            windlevel : {value : json_obj.sk_info.ws , refresh : true}
        });
        this.setData({
            humidity : {value : json_obj.sk_info.sd , refresh : true}
        });
    },

    getSkyInfo: function(e) {
        var thiz = this;
        var str =0;

        var rq1 = pm.request
        ({
            // 获取天气预报的API,返回伪数据
            url: 'http://mobile.weather.com.cn/data/sk/101010100.html?_=1381891661455', 
            method : 'GET',
            header:{
                "Content-Type":"application/json"
            },
            //与开发者服务器连接成功后,执行的回调函数
            success: function(res) {    
                // 把data从Buffer转成string
                str = res.data.toString('utf8'); 
                //把JSON格式的string转成JSON对象,以便获取数据   
                json_obj=JSON.parse(str); 
                //更新各个控件的值  
                thiz.onUpdate();    
            },
            fail: function(){
                console.log('request failed')
            }
        });
    },

    onLoad : function(e) {
        var thiz = this;
        //设置定时器,每十秒更新天气预报数据
        this.data.timer = setInterval(function()    
        {
            console.log("update sky info");
            thiz.getSkyInfo();
        }, 1000 * 10);
    }   
};

Page(page);
  • 实际效果

    实际效果

评论