柿饼_PersimmonUI

柿饼UI -- 登录界面

发布于 2019-03-11 21:28:43 浏览：3202 订阅该版

* 本帖最后由 Glen_Young 于 2019-3-11 21:31 编辑 *

周末闲着就利用柿饼模组做了一个简单的登录界面，由于时间有限，没有加入注册功能，之后再加。
   界面如下：
![截图1.png](/uploads/201903/10/232906im6tyo6at22drtby.png)

使用到的控件如下框框所标数字：
![截图2.png](/uploads/201903/10/232914h8qzrqoqdmqjdwo8.png)
  其中
  序号1使用的是Textbox控件。（官方文档：Textbox控件是文本输入框控件，由label和键盘组成。当用户点击Textbox时，能够自动跳转到键盘输入界面，并能够修改文本内容。目前Textbox仅支持输入ASCII码字符。）
  通过js代码获取输入到Textbox控件的数据，代码如下：
 
``` onTextChange1 : function(event){
      text1 = event.detail.value; //获取Textbox的当前文本内容
    },

onTextChange2 : function(event){
      text2 = event.detail.value; //获取Textbox的当前文本内容
    },```
  序号2是Button控件，Button是按钮控件。当该控件被触碰到时，能够触发相应的事件。 我们在触发事件中比较输入的用户名和密码与预设的是否相同，相同则进入主界面，否则提示错误。
js代码如下：
```/*button1  触发事件函数 */
    onMain:function(event){
   if((text1 == "rtt") && (text2 == "young"))
  {
        pm.navigateTo('page2/page2');//跳转到页面2，主界面
  }
  else
  {
     pm.navigateTo('page4/page4');//跳转到页面4，错误提示界面
  } ```  序号3只是个图片控件，放入的是RT-Thread的log。

具体的效果如下gif所示，其实效果还是蛮清晰的，只是经过手机拍摄和格式转换之后，效果有些模糊和残影。
  输入错误的结果：
![Video_20190311211953.gif](/uploads/201903/11/212121d1ol1lpbrsythsyh.gif)

输入成功：
  ![VID_20190311_212219_20190311212543.gif](/uploads/201903/11/212640uj0b82bijl85ullb.gif)

吐槽一下：传大点的gif不成功，说好的大小不限制的呢？
  ![截图12.png](/uploads/201903/11/212735gaozyp7uflfgaami.png)

工程文件：![TitanUI.7z](/uploads/201903/11/213128mxy45m55udp1i0cy.attach)