【PersimmonUI柿饼学习营】+ A Byte of China + 平板界面

发布于 2018-09-09 03:13:44 浏览：3772 订阅该版

* 本帖最后由 ianhom 于 2018-9-11 13:39 编辑 *

第三周作业：制作平板效果

**_开发环境_**
RTT + PerimmonUI + 野火RT1052Mini + 5寸800*480触屏
![wx_camera_1535343243074.jpg](/uploads/201809/09/024423y42q4jqohzxmh780.jpg)

**_开发过程_**
本周进一步学习了PersimmonUI柿饼的控件功能，配合丰富的API，JavaScript可以方便灵活实现酷炫的效果。作业的重点：**滑动解锁，应用集成，使用新应用尝试新的API、下拉动画效果**。

滑动解锁：使用slider控件，范围拉的足够大，隐藏图片即可，滑屏成功后将数字键盘显示出来，输入密码（6666），若不正确可重新输入，若正确在进入主页面。
![TIM截图20180909025752.png](/uploads/201809/09/030612gqge44g49snk40kq.png)
![TIM截图20180909025852.png](/uploads/201809/09/030613ia56yysa6ae0hsww.png)
![TIM截图20180909025955.png](/uploads/201809/09/030614h26v1zjs6x1szzvu.png)
![TIM截图20180909030035.png](/uploads/201809/09/030614imnm4136gi00hgch.png)

应用集成：在前两周的学习中，已经完成了RT-Thread广告，计算器和2048，这里需要将这些应用集成到主页中。主页中需要增加ListCtrl作为一个大容器，实现滑动选择。然后在ListCtrl中增加若干个Panel作为小容器，在Panel中存放button和label即可，我们可以通过button来切换不同的page（即应用）。还要在每个应用中增加一个back键以便回到主页面。
![TIM截图20180909030230.png](/uploads/201809/09/030615b4j2zoxhvl8lnzoz.png)
![TIM截图20180909030344.png](/uploads/201809/09/030615gbtphexwbe4b4x5b.png)

新API：最关键的是时间API，在这次作业中新增了一个小游戏，如果选择了No，则这个No的button会跑到一个随机位置，就是傲娇地不让点，如果点击的是YES，等5秒后可以退回到主页面，这个page中没有设置back键，只能等时间到后退出。
![TIM截图20180909030555.png](/uploads/201809/09/030615gr7py4k446w7plyj.png)
详情请参考源码
```var t = 5;
var page = {
    data : {timer1 : 0, timer2 : 0},
    
    onYes : function(e)
    {
        var thiz = this;
        
        this.setData({label2 : {position : {x:268,y:79},refresh:true}})
        this.setData({page3: {refresh:true}})

this.data.timer1 = setTimeout(function()
        {
            console.log('timer1 timeout');
            clearInterval(thiz.data.timer2);
            clearTimeout(thiz.data.timer1);
            pm.navigateBack();
        }, 1000 * 5);

this.data.timer2 = setInterval(function()
        {
            console.log(t)
            t -= 1;
        }, 1000);
    },
    onNo : function(e)
    {
        var xx = Math.floor(Math.random()*600+10)
        var yy = Math.floor(Math.random()*360+100)
        console.log(xx,yy)
        this.setData({button2 : {position : {x:xx,y:yy},refresh:true}})
        this.setData({page3: {refresh:true}})
    }
};

Page(page);```

下拉动画效果：这里我们尝试使用**timer**的API和**setData position**的方式来组合一个**下拉通知栏**，定时快速修改通知栏的页面位置，实现下拉的动画效果。
![TIM截图20180909141751.png](/uploads/201809/09/141819cfmdtovge4yty4qu.png)

```var p = -470;
var q = 0;
var page = {
    data : {timer1 : 0, timer2 : 0},
    onbutton: function(e)
    {
        var thiz = this;
              
        switch(e.target.id){
            case "button1":
                pm.navigateBack();
                break;
            case "button2":
                pm.navigateTo({url: "page4/page4"});
                break;
            case "button3":
                pm.navigateTo({url: "page5/page5"});
                break;
            case "button4":
                pm.navigateTo({url: "page3/page3"});
                break;
            case "button5":
                pm.navigateTo({url: "page6/page6"});
                break;  
            case "button6":
            case "button7":
            case "button8":
            case "button9":
            case "button10":
            case "button11":
                pm.navigateTo({url: "page7/page7"});
                break;  
            case "button12":
                this.data.timer1 = setTimeout(function()
                {
                    console.log('timer1 timeout');
                    clearInterval(thiz.data.timer2);
                    clearTimeout(thiz.data.timer1);
                    p = -470
                }, 300 * 1);

this.data.timer2 = setInterval(function()
                {
                    thiz.setData({listctrl2 : {position : {x:19,y:p}}})
                    thiz.setData({listctrl2 : {refresh:true}})
                    //thiz.setData({page2: {refresh:true}})
                    p += 16;
                }, 10);
           
                this.setData({label2 : {position : {x:268,y:79},refresh:true}})
                this.setData({page3: {refresh:true}})

break;
            case "button13":
                this.data.timer1 = setTimeout(function()
                {
                    console.log('timer1 timeout');
                    clearInterval(thiz.data.timer2);
                    clearTimeout(thiz.data.timer1);
                    q = 0
                    thiz.setData({page2: {refresh:true}})

}, 300 * 1);

this.data.timer2 = setInterval(function()
                {
                    thiz.setData({listctrl2 : {position : {x:19,y:q}}})
                    thiz.setData({listctrl2 : {refresh:true}})
                    //thiz.setData({page2: {refresh:true}})
                    q -= 16;
                }, 10);
           
                this.setData({label2 : {position : {x:268,y:79},refresh:true}})
                this.setData({page3: {refresh:true}})

break;
        }      
    }
};

Page(page);
```

附件是柿饼工程，这里抛砖引玉，期待大家更完善、更有趣的版本。

**_效果展示_**
滑屏解锁，输入密码，进入应用，退出，锁屏![hw3.gif](/uploads/201809/09/024343y1btp22pbk0h2y2i.gif)

增加了一个小游戏
![hw3-1.gif](/uploads/201809/09/024343mqzqsc7svqxq3xq3.gif)

模拟下拉通知栏
![GIF.gif](/uploads/201809/11/133847f7tyaw70rknkeysa.gif)

**_总结_**
时间匆忙，还有好多控件没有试验，不过相信后面的学习中肯定会使用到。
在设计时，要考虑清楚控件之间的堆叠关系
程序中应该还有不完善的地方，期待大佬们多多指导。

柿饼工程
![hw3-1-10.rar](/uploads/201809/09/142244kmfp888mnzxxmumt.rar)