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

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

本帖最后由 xianting77 于 2019-3-2 16:29 编辑
. S. N4 u/ c9 E, l! |4 S2 e& _4 Y7 w2 }1 g
# t: Y# J& X+ O* x4 l9 x" ZDemo还是很精彩的,需要更多时间体会。这里讲一下CircleProgresse小应用的学习过程吧。                                       
+ s4 }: q; f2 o- H8 q9 d" q; {5 v 7.png ' m# {* c3 V! h/ k" u
/ ?1 }. v  v% [; x7 s9 P+ Y1 E  H
1. Demo代码设定这个CircleProgresse控件的最小值为0和最大值为100,好奇如果负值会怎么显示呢,然后我就在代码里加入了log
  @  O* O- r! k) t" g- i
1 q& v/ k3 U1 N$ @3 o0 {( ^9 GonShow1:function(event){! N" G7 j2 c' A% Y1 S- h0 z5 J3 ^
        var thiz = this;0 J( v# p) D0 y
        var frame = 20;
/ V3 `, S) H4 j1 {, W0 n7 ]$ C        this.timer = setInterval(function(){
  c3 a4 @$ T! o. B7 B            temp1 = Math.random()*101;
) W! e; X- g* a! |! j9 F2 U1 b            temp2 = Math.random()*101;6 |, O" U- L/ G* v: b2 U
            temp3 = Math.random()*101;7 W& y1 Z6 g' Z' }' g

" v( @, H/ W# m$ b; k            var index = 1;' {6 G9 t- M( U: S" Z4 w' r; f
            var per1 = (temp1 - thiz.num1)/frame;: }2 i) v4 G3 u$ [, U. K
            var per2 = (temp2 - thiz.num2)/frame;
  y. n% c6 R$ e' E( `7 h; l6 t; |9 o4 ?            var per3 = (temp3 - thiz.num3)/frame;
$ a+ c+ B8 o6 a( Z0 o2 \; Z/ M! D+ B+ x4 a: H# O
            if(per1 < 0 )
9 s2 H# m: `2 V( _$ ~9 b( B5 p               console.log("perl < 0: " +per1 +" num1 = "+thiz.num1);. H$ n; {6 f$ o; h0 U+ a
            if(per2 < 0 )) i9 q1 r; v% d7 M. z
               console.log("per2 < 0: " +per2 +" num2 = "+thiz.num2);
7 a, v6 t' Z9 W/ [4 g4 H7 r
( v7 x# l& b+ J4 H* m3 r: P* J" Y
( h7 N  ]) ~( u, g. C4 K% o
            thiz.framTimer =  setInterval(function()
6 p# l' K: l. c4 y/ {            {
7 X. p' K' A( o8 I/ r0 Y9 I                if(index >frame)
- U9 p. _& Q: m% n8 }                {
, r, Z5 ?7 X# `8 O, @2 }+ a                    clearInterval(thiz.framTimer);
8 Y" V& E4 P: M( @8 N! X                    return;2 J8 h; ?! S- K/ A  F! K
                }
0 N7 {+ t  b" I6 |: v& o- b/ e0 M4 t0 O
                thiz.num1 += per1;% J' T; B8 _* L8 A9 m) @- j
                thiz.num2 += per2;& o: M! ?$ b" R8 G$ y
                thiz.num3 += per3;
' s1 B  z9 u3 F6 }               // console.log("num1: ",thiz.num1); / D1 ~8 _' d% Z+ ~3 [
               // console.log("per1: ",per1);
' O  N4 _4 d0 c8 L9 \                thiz.setData({button1 : {value :  parseInt(thiz.num1).toString() }});
8 Z5 e1 D6 z* N- r) O                //thiz.setData({button1 : {value :  thiz.num1 }});% |7 `( `9 Z; K6 O" W
                thiz.setData({CircleProgress1 : { value : thiz.num1}});
; N- z* o+ Y7 @; `8 V              //  console.log("num2: ",thiz.num2);
3 I8 g- D. a  V- ]              //  console.log("per2: ",per2);
* [% p/ {' G# o- N                thiz.setData({button2 : {value :  parseInt(thiz.num2).toString() }});- v% O$ U2 j4 p7 y+ d8 m
                thiz.setData({CircleProgress2 : { value : thiz.num2}});
  v8 L1 o# k  v$ D7 d; ^4 U
2 N/ }: \0 t, `9 r: c                thiz.setData({button3 : {value :  parseInt(thiz.num3).toString()}});
$ y" A5 l1 ^, o; m0 ]                thiz.setData({CircleProgress3 : { value : thiz.num3}});
% [' R- n' }$ ~/ h! x4 k; S- x, X% k" s3 N. E
                thiz.setData({circleprogress : {refresh : true}});7 n  D4 V5 ~1 s# o7 S+ |
                index++;. ?/ @1 Y- ]( G: I! M; `- A7 f7 H
            },30); x% f2 ~" S+ Y3 ^8 u% L
        },1*1100)
5 b6 v0 p" _. J8 M! R4 @7 R! I# C; N

/ T& q. B8 j" S
虽然没有得到什么证明,看到了这样的LOG, JS的打印居然这么精确,但是如何只要小数点后两位呢?- [: t" S9 I2 q* `8 J$ s" O
之前的卡死兴许是偶发性事件,所以我把原来的问题删掉了。& A+ K. V. \9 n0 I* Q& V. y
WEIWEI7.png
0 @+ |  a. d0 [1 C' u# i大家常问的一个问题是JS为啥要that, 对应到这里 就是是为啥要 var thiz = this?
, ]; {9 M" O6 M我在群里这样答(不知道对不对):thiz是当前对象的拷贝,这里应该是page对象。JS里很容易切换对象,用默认的this很容易找不到原来的对象。通过thiz就不容易出错。- z2 G4 s0 Q8 c) F& T

6 P5 L3 \( ^/ l0 A( ]5 Y我还问了CircleProgresse,如何应对负数,得到子胥的帮忙, 这也是参与RTThread内测活动的福利,问问题,大神不管多忙都会找时间回复并帮你。, ~" S! A) {8 u# O2 Z

& v, w0 S5 v( T! O1 Q* G$ S 图4.jpg ; `- a8 H7 X: u+ l! |+ \& Y
( l4 Z' R1 Z( n$ C
图3.jpg
+ |# H( w; W; q8 q9 q
3 {$ g* P$ W. G
还有一点就是关于parseInt(thiz.num1).toString()的理解
) w8 o% T2 F( m8 a9 ]9 t0 h 图5.jpg
4 O# k8 m, s# A! J2 B' [+ R这里的parseInt(thiz.num1)并不会直接改变thiz.num1,是把他的Int数值数值返回出来,将num对象转换成int类型对象。在转换成字符串,因为button接受的是字符串输入。' A7 M4 C0 [: {# L. c" y# d8 V

! Z+ u) @' d. W1 L0 o% S# ?, ~先写这么多,遗憾不能从头到尾学习一遍demo,如果能学完DEMO,相信对柿饼JS开发会有更多的体会。9 W" ~. Y6 k$ Z' z" H; P) t: s4 f$ A
还有一个资源加载相关的问题,我也不知道怎么弄出来的,问题还在诊断中 下面是有问题界面和后台log。" I4 _) k( g4 e( L. N- z* `
个人觉得这个问题比较深,资源文件失效或者加载失败了,再重download好的GUI app 应该可以更新历史文件,然后系统再加载资源或者字体文件应该就好了。隐约觉得这里还可以做做文章
2 L! Q! K' ^; g6 N1 g# J: ^ 图.jpg       图1.jpg
, |/ K, l# D% K& u但是这个问题的work around很简单: 在mhs用命令mkfs fs就可可以了, 看到下面的界面不要担心固件坏了,是缺少GUI app, 重新通过UIbuilder下载GUI,reboot就好了
* z# s  o6 k# f& F/ ]/ ? 图2.jpg
8 H1 T9 O6 i9 J" t& s1 |这里看到柿饼的模块化设计了,应用层坏了,底层驱动和系统应用完好。
8 b' `* h" |" z' l7 k总体来说,柿饼还是蛮好玩的,平台构架很强劲,是工程,项目的好选择,也是学习的良师益友,他的后面是一群优秀的工程师。
! j" `; m0 q: R$ k5 g5 L3 s
& ~" P* b' H$ V- l# S  O& l8 T- h( h9 i2 j. O

; N. D1 O9 W$ x  B( ]  |! b3 A4 w- I7 m" k! n6 M. w
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2019-11-4 12:44:55 | 显示全部楼层
666向楼主学习
使用道具 举报 回复
发表于 前天 11:50 | 显示全部楼层
楼主牛逼啊!!!
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

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

Powered by RT-Thread

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