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

2019-2-27 23:46 [复制链接] 3 1100

本帖最后由 xianting77 于 2019-3-2 16:29 编辑
" Z$ J$ T% Y  P( \9 d7 H0 Z+ E! |+ R
Demo还是很精彩的,需要更多时间体会。这里讲一下CircleProgresse小应用的学习过程吧。                                       
+ K# }# T7 p. a 7.png & ]% a1 l) k: y  y% M
! N8 H3 [, j! J. q: L; W
1. Demo代码设定这个CircleProgresse控件的最小值为0和最大值为100,好奇如果负值会怎么显示呢,然后我就在代码里加入了log
6 _0 ^( w  t: }7 g" U4 z/ v6 Q; J7 f( R8 [% q" [
onShow1:function(event){
4 m% y8 r' j" g" {% B        var thiz = this;
2 S4 z+ _1 L* ]7 L& w: ^+ W& G3 S: D        var frame = 20;8 y: ^* l3 _+ O  j& o4 v
        this.timer = setInterval(function(){' E& ?( T6 A5 `' p8 i0 `2 F
            temp1 = Math.random()*101;7 g* @  ?! k0 a) G, p2 q4 `
            temp2 = Math.random()*101;
/ o% V1 b% ^! X! R7 H# O! b2 f            temp3 = Math.random()*101;2 @) m% f) G( P9 O# q7 k
. W3 C8 C6 s% y5 K- j& H# P
            var index = 1;9 t4 ]0 ?: p/ U6 L: u1 V8 X
            var per1 = (temp1 - thiz.num1)/frame;
7 X) E; b; @1 S% P7 b) B* C            var per2 = (temp2 - thiz.num2)/frame;* N& Q0 H9 U8 r5 k, m7 t5 M! ]1 N
            var per3 = (temp3 - thiz.num3)/frame;
) E$ {& o* M' J: S9 h; k6 f/ L2 s. |3 T" z4 \5 H+ J
            if(per1 < 0 ); P5 g  `5 S  q; `
               console.log("perl < 0: " +per1 +" num1 = "+thiz.num1);1 K( ]" c, l) N' c! Z
            if(per2 < 0 )
: `1 J- f8 n  A               console.log("per2 < 0: " +per2 +" num2 = "+thiz.num2);
# m8 v. V8 K$ E

* o  t  g8 x; F9 \( t% H3 m5 O% c
* ^6 W/ F5 x5 O6 ]8 U) W2 I1 Q            thiz.framTimer =  setInterval(function()
1 X% [% W3 S( h( q& U7 e            {
$ a* ]: L4 d2 [. u0 q$ P                if(index >frame)
1 |) |8 l) Y; ?1 d: n                {8 Z! E3 A. i1 F0 Q) f# l
                    clearInterval(thiz.framTimer);' b1 O% I, Z/ _" C8 v2 e
                    return;
: `* P! ~$ \) g- t4 O" [1 Y: p                }$ H, ^' y+ k, ?5 H" n5 a
% d; K& ]( a; S! q8 Z8 J) S+ ?
                thiz.num1 += per1;% G0 C  C  K5 H! Y) R; H% n
                thiz.num2 += per2;, u( Y. [) |3 B+ p6 z5 X) k
                thiz.num3 += per3;0 }/ J7 i+ D( C3 V- x
               // console.log("num1: ",thiz.num1);
' [0 L. _7 K2 z+ l. X: f5 c               // console.log("per1: ",per1);
; \2 g5 c& F/ ]3 J2 e& c8 b5 G                thiz.setData({button1 : {value :  parseInt(thiz.num1).toString() }});
9 l5 h5 k$ f, x4 ]                //thiz.setData({button1 : {value :  thiz.num1 }});
/ r; E0 }4 Y2 j& @, t                thiz.setData({CircleProgress1 : { value : thiz.num1}});& j+ _8 V2 G/ y4 }
              //  console.log("num2: ",thiz.num2); ! q  ?( ~* U; A7 ^/ u& L: ~
              //  console.log("per2: ",per2); 1 M& ^) `( m) ^2 _# ^
                thiz.setData({button2 : {value :  parseInt(thiz.num2).toString() }});
" M6 Y- q2 V/ X) p5 c0 H* Z                thiz.setData({CircleProgress2 : { value : thiz.num2}});
6 q5 t- L8 d+ S: a/ z: `$ q' d* j. h( S0 C. c5 O* Z! u2 h" A3 L
                thiz.setData({button3 : {value :  parseInt(thiz.num3).toString()}});' n; @$ U) G4 b; m6 b
                thiz.setData({CircleProgress3 : { value : thiz.num3}});
$ W- Y6 f* b& L! u  `8 b! e$ Z: s# I( M2 n2 V
                thiz.setData({circleprogress : {refresh : true}});
/ Y  A6 I2 k; m                index++;
/ h4 ?9 C# Q/ v            },30)
" a4 v! f$ E, `+ o6 q' d        },1*1100)  c* L0 E* g8 h9 U: H0 |

6 g8 L& V; S$ }. D; w# M% N" y
虽然没有得到什么证明,看到了这样的LOG, JS的打印居然这么精确,但是如何只要小数点后两位呢?3 G' L8 J% F5 P) G" B" {0 A/ F. A
之前的卡死兴许是偶发性事件,所以我把原来的问题删掉了。
9 P% j7 Y* }) A2 @8 o WEIWEI7.png + n  ^! e# N; O1 E: Z
大家常问的一个问题是JS为啥要that, 对应到这里 就是是为啥要 var thiz = this?
8 j" z6 m/ h8 b" r% S我在群里这样答(不知道对不对):thiz是当前对象的拷贝,这里应该是page对象。JS里很容易切换对象,用默认的this很容易找不到原来的对象。通过thiz就不容易出错。, |* {, w9 @7 ]8 Q% d

$ y0 L- d+ p/ P: p- e, v我还问了CircleProgresse,如何应对负数,得到子胥的帮忙, 这也是参与RTThread内测活动的福利,问问题,大神不管多忙都会找时间回复并帮你。; ?7 r6 y& O" J! r, s! }
; e) a2 i+ M2 x5 w7 Y, B8 Q( f' S
图4.jpg 3 q/ z/ c5 k8 ]% y# d
) O5 k" q  I6 a, \
图3.jpg
9 x1 q: w$ V, |1 B) m; D" N0 {5 i3 U8 U4 Y, j
还有一点就是关于parseInt(thiz.num1).toString()的理解# n2 a/ a/ b* V, x0 X
图5.jpg + m$ f: B  {/ q$ M
这里的parseInt(thiz.num1)并不会直接改变thiz.num1,是把他的Int数值数值返回出来,将num对象转换成int类型对象。在转换成字符串,因为button接受的是字符串输入。
/ N$ {2 K1 i% T+ k
* Z- Z; @. k- i9 E先写这么多,遗憾不能从头到尾学习一遍demo,如果能学完DEMO,相信对柿饼JS开发会有更多的体会。
, s1 X! K7 V7 [, v9 ?
还有一个资源加载相关的问题,我也不知道怎么弄出来的,问题还在诊断中 下面是有问题界面和后台log。1 S3 _; k; d( q! O/ U1 P- m
个人觉得这个问题比较深,资源文件失效或者加载失败了,再重download好的GUI app 应该可以更新历史文件,然后系统再加载资源或者字体文件应该就好了。隐约觉得这里还可以做做文章
( E0 U. b- Q7 G9 B$ q0 v" X4 z 图.jpg       图1.jpg ! m* W7 E9 K( G
但是这个问题的work around很简单: 在mhs用命令mkfs fs就可可以了, 看到下面的界面不要担心固件坏了,是缺少GUI app, 重新通过UIbuilder下载GUI,reboot就好了
2 m+ x8 w/ G# N2 D3 P% J$ }; W 图2.jpg 7 e( |: b  b2 Q# ^
这里看到柿饼的模块化设计了,应用层坏了,底层驱动和系统应用完好。- ]0 q8 P& R2 u2 K2 l& b
总体来说,柿饼还是蛮好玩的,平台构架很强劲,是工程,项目的好选择,也是学习的良师益友,他的后面是一群优秀的工程师。' b" r* P! c, k3 _# V; \1 ?

* B" _, o' ^. l7 Q" F3 `% Y) j8 E: v+ d+ r& Y/ o
/ d# h& r2 p0 Q
1 _! i; J/ G9 C/ h! X$ `
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2019-11-4 12:44:55 | 显示全部楼层
666向楼主学习
使用道具 举报 回复
发表于 2019-11-13 11:50:41 | 显示全部楼层
楼主牛逼啊!!!
使用道具 举报 回复
发表于 6 天前 | 显示全部楼层
帅,太帅了
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|RT-Thread开发者社区 ( 沪ICP备13014002号-1

有害信息举报电话:021-31165890 手机:18930558079

© 2006-2019 上海睿赛德电子科技有限公司

Powered by RT-Thread

快速回复 返回顶部 返回列表