RT-Thread-柿饼派学习作业之基本作业：第五节课程demoRT-Thread问答社区

柿饼派学习作业之基本作业：第五节课程demo

发布于 2020-11-29 14:18:49 浏览：910 订阅该版

柿饼派学习笔记
2020.11.28
Javascript入门课程

Js的基础语法及其用法

语法都是基于ES5标准的

本节课程目录：
数据类型
基本语法
运算符
条件判断和循环
函数
对象

数据类型
ES5有六种数据类型
1、number---包括整型和浮点型
2、String
3、Boolean
4、Undefined
5、Null
6、Object---包括数组对象、正则对象、日记对象等等

通过typeos(x)方法来判断一个数据的数据类型

通过js和c语言的对比了解js语法

Js统一使用var来声明一个变量，而且不用说明这个变量的类型
Js语句结尾的分号可以加可以不加，不加不会报错，但是不规范
语句块也是使用大括号包裹

Js的运算符跟c的基本上是一样的---包括与运算、或运算、非运算、比较运算符、算数运算符

Js允许对任意数据类型进行比较，任意比较前需要对两边的数据先做转换再比较

Js中三个等号叫全等，是不允许做类型转换的，如果需要对全等两边的数据进行比较不仅需要数值相等，数据类型也要相等

Js运算符的比较规则
1、对象和对象比较：比较是不是同一个内存地址
2、对象和字符串比较：对象先转为字符串，再和字符串进行比较
3、对象和布尔类型比较：两边先转成数值然后再进行比较
4、对象和数字比较：先转成数字再进行比较
5、数字和布尔比较：布尔转成数字，再比较
6、数字和字符串比较：字符串转成数字，使用Number()方法，再和数字进行比较
7、布尔和数字、字符串比较：都转成数字再比较

Js的条件判断与循环
使用if-----else语句
循环使用for、do{}  while()
使用方法与c语言基本一致

在js中定义一个函数使用function关键字

两个是等价的
先声明一个匿名函数然后再把这个匿名函数赋值给abs的一个变量
使用上有一定区别：函数表达式在使用时需要先定义，而函数声明是可以先使用再定义的

Js与函数的对比
 
Js的函数与参数不必说明数据类型，不管是有返回值的函数还是没有返回值的函数统一使用相同的方式来进行定义

Js的对象：是一种无序的集合数据类型，由若干键值对组成
定义一个对象可以使用new object也可以使用大括号

本节结束

第三课：
柿饼UI常用js语法
Consol.dir：是打印对象使用的
Consol.log：是打印值使用的
不确定打印的是值还是对象时就使用consol.dir

给button调用属性创建一个绑定事件
回调函数中打印入参event的值
显示点击的类型、时间戳及控件的id
多个控件调用一个函数时可以根据id名来做不同的逻辑

快捷键：ctrl+/：注释

Page页面中的默认函数
1、onload是页面创建时系统自动创建的函数，用于初始化page，作为page的入口，加载某些资源、接受上下文面板中的value值，与onExit是成对出现的

onResume是第一次显示之后完成的，显示之后会调用这个方法，用于延后加载某些函数和底层交互，该接口的目的是为了避免等待加载某些资源影响页面刷新

onshow页面变更为显示状态时调用该函数，与onHide是成对出现的，与页面显示相关，页面每显示一次它就会触发一次

onExit：page页面关闭时触发，对象销毁前调用该函数，主要是用于page页面的资源回收，比如创建的定时器是需要手动回收的

onUpdate ：当后一页返回时触发的函数

一般定义变量建议在page对象里定义，不建议在page外定义，因为创建在外边就成为全局变量，页面每进来一次就会创建一次全局变量，上次创建的就会一直存在于内存中
导致失去控制进而影响到整体性能，增加内存泄漏的风险

函数的执行顺序依次是：

柿饼UI的专有对象
pm打头
pm.getPageName():获取当前显示的页面
pm.getPagesName():返回数组，里边包含已打开页面的名字
pm.closePage(‘page1’)

pm.navigateTo(‘page2/page2’)：第一个page2是目录，第二个page2是对应的名字
pm.navigateTo({url:”page2/page2”,value:”123”))：跳转到page2并传递一些参数过去

pm.redirectTo()：重定向导航,也有上述两种传递方式
pm.navigateBack()：页面的返回，返回到前一页
pm.navigateBack(‘123’)：返回时附带参数

这些函数在api中都有详细的说明，后面视频中也会用到相关的功能会有详细的讲解

第四课：this关键字的用法
This是js语言中的一个关键字用来指代当前的引用对象，this智能在运行期间才能决定
指向最终发起调用时关联的对象所以在使用this时一定要搞清楚它在指代谁？
柿饼UI.js中会有一个page的对象，一般情况this指代page的整个对象
不加this默认在全局变量里面找

定时器的用法
timer:0,
var that = this;
this.timer = setInterval(function(){
console.log(that.name)
},500),

柿饼简单控件的使用
本节课的目标
点击按钮时更改图片

还可以滑动下一页，拖动进度条改变文本框的值，通过输入文本框的值相应更改进度条的值

下一页计数器记录点击的次数

Card控件包含三个panel，每个panel中有不同的控件
图标控件
开关控件
输入文本框控件
标签控件
进度条控件
文本框控件
点指示器控件

接下来创建工程实现这个demo
打开帮助文档使用说明中event控件
Switch
Slider：滑条控件

先拖入card控件
非容器控件拖入自动与card控件相同大小;比如button控件拖入会自动布满整个控件
所以拖入panel这样的容器控件
接下来给每个panel容器内放入相应的控件
在card内每个panel容器加入后自动隐藏---去掉隐藏属性
textchange : function(event){
        this.setData({slider1:{value:parseInt(event.detail.value)}})
    },

sliderchange : function(event){
        this.setData({textbox1:{value:event.detail.value.toString()}})
    },