使用Persimmon UI Builder 开发的一些技巧和注意事项 -- (RT-Thread 柿饼UI)

331 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第25天,点击查看活动详情

  • 比如音乐播放器的播放按键,第一次按播放(显示播放图片),第二次按停止(显示停止图片),第三次按又播放,周而复始。对于那种需要重复点击,但是两次点击的效果也不同的(无论是显示图片还是要执行不同的代码),使用 Switch 控件可以很方便的实现。

  • 设计器自带的是点阵字体,字体大小为 16,不可更改,否则会显示错误。

  • 关于定时器的使用的注意事项(主要是要记得及时删除定时器)

    使用timer时,一般将其定义在page对象内,作为page的属性之一,这样在page退出时可以将无用的timer释放掉,防止内存泄漏。 setTimeout / clearTimeout 或者 setInterval / clearInterval 要成对使用,在合适的时刻一定要删除定时器。注意,即使是只会超时一次的 setTimeout 也一定要手动删除。否则,在页面频繁切换或其他情况下,系统会因内存泄漏完而宕机! 在代码中操作定时器变量时,切勿重新赋值。应该确保赋值之前该变量已经不持有定时器(不然就要先删除定时器) Page 退出时应该删除当前 Page 中还存在的所有 Timer。在 onExit 方法中删除即可。 ----- 来自《PersimUI 帮助手册》

  • 全局变量的定义应该放在app.js

    一般的全局变量定义在 app.js 内,在 page 文件中定义会不可控且造成内存泄漏,因为每次进入该页面加载 js 文件时,会去创建一个新的全局变量到内存中,上次进入该页面创建的该变量就会失去控制,一直存在于内存中,进而导致内存泄漏。 ----- 来自《PersimUI 帮助手册》

  • 自动整理JS代码的缩进快捷键(很方便的一个功能,省了不少排版时间) Shift + Alt + F

  • go to define 功能(跳转到函数定义处) 针对在同一页面下的函数, 按住 ctrl 键,同时鼠标放在引用的函数式子上,会有超链接编辑,然后鼠标点击可跳转。

  • 循环调用重复的控件设置不同的参数(这里以this.setData()举例) 我们一般会这样写:

this.setData({ label0: { value: 'A0'} });
this.setData({ label1: { value: 'A1'} });
this.setData({ label2: { value: 'A2'} });
this.setData({ label3: { value: 'A3'} });
this.setData({ label4: { value: 'A4'} });	

其实,我们可以这样写:

var  obj  =  { };
for  (var i = 0; i<5; i++)  {
        obj['label' + i]  = {value: 'A'+i};
}
this.setData(obj);

相当于 this.setData() 可以放入一个对象objobj就是如下形式:

{
        label0 : {value : "A0"}, 
        label1 : {value : "A1"}, 
        label2 : {value : "A2"},
        label3 : {value : "A3"},
        label4 : {value : "A4"},
}
  • 善于使用console.log() 函数 如下所示,如果你知道在某片代码段输出错误,只需通过插入console.log() 函数,当调试界面无法输出对应的console.log() 语句时,就知道是其之前的代码块出错了,能够很快的缩小范围。
console.log('------------> 1');
//代码块1
console.log('------------> 2');
//代码块2
console.log('------------> 3');
//代码块3
  • this.setData()可以同时给多个控件赋值,这样做可以减少些代码量
        this.setData({
            listctrl1: { id: 'localList' },
            label1: { id: 'locallabel' },
            Button1: { id: 'localseButton' }
        });