柿饼UI贺岁公测板之互动学习

发布于 2019-02-27 23:46:48 浏览：2471 订阅该版

* 本帖最后由 xianting77 于 2019-3-2 16:29 编辑 *

Demo还是很精彩的，需要更多时间体会。这里讲一下CircleProgresse小应用的学习过程吧。                                       
![7.png](/uploads/201902/27/234834sxi2gm5i4i0q0x50.png)

1. Demo代码设定这个CircleProgresse控件的最小值为0和最大值为100，好奇如果负值会怎么显示呢，然后我就在代码里加入了log

onShow1:function(event){
        var thiz = this;
        var frame = 20;
        this.timer = setInterval(function(){
            temp1 = Math.random()*101;
            temp2 = Math.random()*101;
            temp3 = Math.random()*101;

var index = 1;
            var per1 = (temp1 - thiz.num1)/frame;
            var per2 = (temp2 - thiz.num2)/frame;
            var per3 = (temp3 - thiz.num3)/frame;

if(per1 < 0 )
               console.log("perl < 0: " +per1 +" num1 = "+thiz.num1);
            if(per2 < 0 )
               console.log("per2 < 0: " +per2 +" num2 = "+thiz.num2);

thiz.framTimer =  setInterval(function()
            {
                if(index >frame)
                {
                    clearInterval(thiz.framTimer);
                    return;
                }

thiz.num1 += per1;
                thiz.num2 += per2;
                thiz.num3 += per3;
               // console.log("num1: ",thiz.num1); 
               // console.log("per1: ",per1);
                thiz.setData({button1 : {value :  parseInt(thiz.num1).toString() }});
                //thiz.setData({button1 : {value :  thiz.num1 }});
                thiz.setData({CircleProgress1 : { value : thiz.num1}});
              //  console.log("num2: ",thiz.num2); 
              //  console.log("per2: ",per2); 
                thiz.setData({button2 : {value :  parseInt(thiz.num2).toString() }});
                thiz.setData({CircleProgress2 : { value : thiz.num2}});

thiz.setData({button3 : {value :  parseInt(thiz.num3).toString()}});
                thiz.setData({CircleProgress3 : { value : thiz.num3}});

thiz.setData({circleprogress : {refresh : true}});
                index++;
            },30)
        },1*1100)

虽然没有得到什么证明，看到了这样的LOG, JS的打印居然这么精确，但是如何只要小数点后两位呢？
之前的卡死兴许是偶发性事件，所以我把原来的问题删掉了。
![WEIWEI7.png](/uploads/201903/02/153045fond6nh69noph6d6.png)
*大家常问的一个问题是JS为啥要that, 对应到这里 就是是为啥要 var thiz = this？*
我在群里这样答（不知道对不对）：thiz是当前对象的拷贝，这里应该是page对象。JS里很容易切换对象，用默认的this很容易找不到原来的对象。通过thiz就不容易出错。

*我还问了CircleProgresse，如何应对负数，得到子胥的帮忙， 这也是参与RTThread内测活动的福利，问问题，大神不管多忙都会找时间回复并帮你。*

![图4.jpg](/uploads/201903/02/154835mdasueinmu22u9qu.jpg)

![图3.jpg](/uploads/201903/02/155051yp70gkl0txyg0p8k.jpg)

*还有一点就是关于parseInt(thiz.num1).toString()的理解*
![图5.jpg](/uploads/201903/02/154949xm00955m99004uhz.jpg)
这里的parseInt(thiz.num1)并不会直接改变thiz.num1，是把他的Int数值数值返回出来，将num对象转换成int类型对象。在转换成字符串，因为button接受的是字符串输入。

先写这么多，遗憾不能从头到尾学习一遍demo，如果能学完DEMO，相信对柿饼JS开发会有更多的体会。
还有一个资源加载相关的问题，我也不知道怎么弄出来的，问题还在诊断中 下面是有问题界面和后台log。
个人觉得这个问题比较深，资源文件失效或者加载失败了，再重download好的GUI app 应该可以更新历史文件，然后系统再加载资源或者字体文件应该就好了。隐约觉得这里还可以做做文章
![图.jpg](/uploads/201903/02/155758kjxpxuuhxwwp7vxx.jpg)     ![图1.jpg](/uploads/201903/02/155904ap1h4hjhkunbufp1.jpg)
但是这个问题的work around很简单： 在mhs用命令mkfs fs就可可以了， 看到下面的界面不要担心固件坏了，是缺少GUI app, 重新通过UIbuilder下载GUI，reboot就好了
![图2.jpg](/uploads/201903/02/160121td3ptr1w0dqrrmyr.jpg)
这里看到柿饼的模块化设计了，应用层坏了，底层驱动和系统应用完好。
总体来说，柿饼还是蛮好玩的，平台构架很强劲，是工程，项目的好选择，也是学习的良师益友，他的后面是一群优秀的工程师。