JavaScript入门
JavaScript是目前世界上最流行的编程语言之一，它也是小程序开发最重要的基础语言。要做出一个功能复杂的小程序，除了需要掌握JavaScript的基本语法，还要了解如何使用JavaScript来操作小程序（通过API接口）.
控制台Console
打开微信开发者工具，在调试器里可以看到Console、Sources、Network、Appdata、Wxml等标签，这些都是调试器的功能模块。 而控制台Console除了可以显示小程序的错误信息外，还可以用于输入和调试代码。
数学运算
Console.log打印日志
console.log打印数组Array
console.log打印对象Object
变量与赋值
JavaScript可以使用let语句声明变量，使用等号=**可以给变量赋值，等号=左侧为变量名，右侧为给该变量赋的值，变量的值可以是任何数据类型**。JavaScript常见的数据类型有：数值（Number）、字符串（String）、布尔值（Boolean）、对象（Object）、函数（Function）等。
将数据赋值给变量
变量的冲突与覆盖
操作数组
分隔符join方法
添加数组push方法
移除最后一项pop方法
技术文档：MDN数组Array
了解一下数组的concat()、reverse()、shift()、slice()、sort()、splice()、unshift()方法 -> 连接、翻转、删除第一个、浅拷贝、排序、删除或替换现有元素或者原地添加新的元素、添加一个在开头
操作对象
我们可以用点表示法访问对象的属性，通过给该属性赋值就能够添加和修改对象的属性的值了。
给对象添加属性
删除对象的某个属性 delete
更新对象的某个属性 通过重新赋值的方式来更新
常量
在前面我们知道变量的值可以通过重新赋值的方式来改变，但是有些数据我们希望是固定的（写死，不会经常改变），这个时候可以使用const声明创建一个值的只读引用。const声明和let声明挺像的。
字符串的操作
MDN文档是前端最为依赖的技术文档
技术文档：MDN技术文档之JavaScript标准库之String
Math对象
Math是一个内置对象， 它具有数学常数和函数的属性和方法，但它不是一个函数对象。
Date对象
Date 对象用于处理日期和时间。时间有年、月、日、星期、小时、分钟、秒、毫秒以及时区的概念，因此Date对象属性和方法也显得比较多。
全局对象wx
wx是小程序的全局对象，用于承载小程序能力相关 API。小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，了解网络状态等。
技术文档：API技术文档
了解网络状态
获取网络类型技术文档：wx.getNetworkType()
了解用户信息
获取用户信息技术文档：wx.getUserInfo()
获取设备信息
获取设备信息技术文档：wx.getSystemInfo()
页面链接跳转
页面跳转技术文档：wx.navigateTo()
除了可以获取到用户、设备、网络等的信息，使用控制台来调用对象的方法也可以执行一些动作，比如页面跳转。
还可以返回页面的上一层，在控制台里输入
页面返回技术文档：wx.navigateBack()
显示消息提示框
显示消息提示框技术文档：wx.showToast()
设置当前页面的标题
设置标题技术文档：wx.setNavigationBarTitle()
打开文件选择
打开文件选择技术文档：wx.chooseImage()
点击事件
事件是视图层到逻辑层的通信方式，当我们点击tap、触摸touch、长按longpress小程序绑定了事件的组件时，就会触发事件，执行逻辑层中对应的事件处理函数。
小程序框架的视图层由 WXML 与 WXSS 来编写的，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
页面滚动
函数名scrollToPosition和scrollToTop是可以自己定义的，然后我们再来在相应的js文件里要添加和函数名scrollToPosition和scrollToTop对应的事件处理函数。
当用户点击该button组件的时候会在该页面对应的Page中找到相应的事件处理函数。保存编译之后，看看是不是就有了页面滚动的效果了？原理是scrollToTop()和scrollToPosition()这两个函数实际上都是调用了同一个小程序的滚动API wx.pageScrollTo()，关于该API的具体参数信息，我们可以查阅技术文档。
滚动API技术文档：wx.pageScrollTo(Object object)
在官方文档我们可以看到wx.pageScrollTo()的作用是将页面滚动到目标位置，支持选择器和滚动距离两种方式定位
- scrollTop滚动到页面的目标位置，单位 px，值为0就是滚动到顶部；值为600就是
- duration是滚动动画的时长，单位为ms，而1秒=1000毫秒
那如何滚动到指定的选择器的位置呢？前面我们已经给view分别添
消息提示框Toast
消息提示框是移动端App、H5(WebApp)、小程序经常会使用到的一个交互界面。
消息提示技术文档：wx.showToast(Object object)
- title：为必填，提示的内容
- icon：只有三个选项，success、loading、none，大家可以自行测试一下三个不同取值的效果
- duration：提示延迟的时间，默认为1500毫秒，也就是1.5秒
模态对话框
模态对话框技术文档：wx.showModal(Object object)
千变万化之API
阅读API的技术文档，就要了解该API有哪些属性，属性代表得是什么含义，属性是什么类型（这一点非常重要），以及它的默认值是什么，可以有哪些取值。
- title属性不是必填，删除title的赋值，就不会显示标题啦；
- content属性也不是必填，为提示的内容；
- showCancel默认值就是true，意思是默认显示取消按钮，改为false就不显示了
- confirmText默认值为确定，你可以改成别的试试
编译之后点击模态框的取消和确定按钮，看打印出来什么结果。当点击确认时，res.confirm的值为true，就执行if分支里的语句；当res.cancel的值为true，就执行res.cancel的语句。在模态对话框技术文档：wx.showModal(Object object)也有object.success 回调函数的说明。
success、fail、complete回调函数 在技术文档里可以看到属性里有success和fail两个回调函数，success为接口调用成功的回调函数；fail为接口调用失败的回调函数。关于这方面的知识大家可以阅读技术文档小程序API，大致了解一下异步API与回调函数的参数，理解异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。
手机振动
手机振动API分两种，一种是长振动，一种是短振动，两个API写法大致相同.
长振动技术文档：wx.vibrateLong()
在长振动技术文档里我们再次看到API里三个回调函数，success、fail、complete。在模拟器上点击按钮时，就可以看到打印日志。console.error向控制台的console中打印 error 日志，如果不能调用长振动，那一般是手机权限的问题了
弹出操作菜单
点击按钮就会弹出显示添加照片、删除照片、更新照片、查询更多等选项的操作菜单，当然我们点击操作菜单的选项之后是没有反应的，点击之后的反应还需要我们以后来写事件处理函数才行。
success回调函数
当我们点击操作菜单的不同选项时，会返回不同的数字，这取决于success回调函数里的e.tapIndex的值。在官方文档里我们可以了解到，当用户点击的按钮序号，从上到下的顺序，从0开始，相当于对应着数组itemList的序号，这样就为我们以后根据不同的菜单选项来执行不同的操作提供了可能。
页面路由
页面路由是一个非常重要的概念，打开新页面、页面返回、Tab页面切换、页面重定向等都是也能路由的不同方式。
关于页面路由，大家可以阅读一下页面路由技术文档，页面路由我们可以简单的理解为对页面链接的管理，根据不同的url链接来显示不同的内容和页面信息。
Navigator组件与页面路由API
| 页面路由API | Navigator open-type值 | 含义 |
|---|---|---|
| redirectTo | redirect | 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 |
| navigateTo | navigate | 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 |
| navigateBack | navigateBack | 关闭当前页面，返回上一页面或多级页面。 |
| switchTab | switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
| reLaunch | reLaunch | 关闭所有页面，打开到应用内的某个页面 |
Navigator组件可以做到的事情，使用JavaScript调用小程序也能路由API也可以做到。Navigator组件的内容是写死的，而JavaScript则可以提供动态的数据。
返回上一页
点击保留页面跳转按钮以及返回上一页按钮，这样我们就可以在小程序里通过点击组件实现了页面的切换与页面的返回。而如果是使用wx.redirectTo跳转到新的页面就没法使用返回上一页了。
wx.navigateTo 是保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，且页面间存在经常切换时，推荐使用 wx.navigateTo进行跳转， 然后返回，提高加载速度。
页面渲染
将变量值渲染到页面
将变量值渲染到页面
toString()方法
技术文档：toString()方法
响应的数据绑定
逻辑层js文件里的data数据，无论是基础的字符串、数组、对象等，还是通过变量给赋的值，都可以渲染到页面。不仅如此，只要对逻辑层data里的数据进行修改，视图层也会做相应的更新，我们称之为响应的数据绑定，而这是通过Page的setData()方法来实现的。
响应的布尔操作
在前面我们已经了解到，有些组件的私有属性的数据类型为Boolean布尔值，比如视频、Swiper轮播组件是否自动播放、是否轮播，视频组件是否显示播放按钮等等，这些我们都可以使用setData将true改为false，false改为true来达到控制的目的。
在交互方面，响应的布尔操作可以用于单一属性true与false的切换，比如显示与隐藏、展开与折叠、聚焦与失焦、选中与不选中。
在开发者工具的模拟器里点击按钮，我们发现静音和取消静音都是这个按钮。这里的感叹号 !是逻辑非的意思，可以理解为not。
this.setData和 this.data都用到了一个关键字 this。 this和中文里的“这个的”有类似的指代作用，在方法中， this 指代该方法所属的对象，比如这里的是Page对象， this.data就是指Page函数对象里的data对象。
响应的数组操作
数组操作知识，push为往数组的末尾新增数据，而pop则删除数组末尾一行的数据，join为数组数据之前的连接符。
点击按钮新增一行，触发绑定的事件处理函数addLine，首先会执行extraLine数组新增一条数据“新增的内容”，但是这时extraLine和text还没有关系，这时在setData()函数里将initData和extraLine进行拼接（注意extraLine本来是一个数组，但是调用join方法后返回的是数组的值拼接好的字符串）。点击按钮删除最后一行，会先删除extraLine数组里最后一行的数据。
小任务：新增内容过于单一，我们可以给它后面添加一个随机数，将 extraLine.push(‘新增的内容’)改成 extraLine.push(‘新增的内容’+Math.random())，再来看看新增数据的效果，关于Math.random()大家可以自行去MDN查阅。大家也可以把拼接的连接符由 \n换成其他字符。
函数与调用函数
函数的作用，可以写一次代码，然后反复地重用这个代码。JavaScript的函数本身也是对象，因此可以把函数赋值给变量，或者作为参数传递给其他函数。
函数的定义和结构
我们可以使用function关键词来定义一个函数，括号()里为函数的参数，参数可以有很多个，使用逗号,隔开；函数要执行的代码（语句）使用大括号包住：
function 函数名(参数 1, 参数 2, 参数 3) {
代码块内要执行的语句
}不带参数的函数
只有一个参数的函数
下面定义了一个简单的平方函数square()，square为函数名，number为函数的参数(名称可以自定义)，使用return语句确定函数的返回值.
- 形参是在定义函数时使用的参数，目的是用来接收调用该函数时传进来的实际参数。
- 实参是在调用时传递给函数的参数
JavaScript允许传入任意个参数而不影响调用，因此传入的参数可以比定义的参数多，但是不能少。也就是说实参的数量可以多于形参但是不能少于形参。
对象的方法
在小程序里我们会经常将一个匿名函数赋值给对象的一个属性，而这个属性我们可以称之为对象的方法。
匿名函数
函数声明function在语法上是一个语句，但函数也可以由函数表达式创建，这样的函数没有函数名称（匿名）。
箭头函数
为什么叫箭头函数（Arrow Function），因为它定义一个函数用的就是一个箭头=>
const multiply = (x, y) => {
return x * y;
}
const sum = (x, y) => x + y;//连{}和return语句都可以省掉
console.log(multiply(20, 4));
console.log(sum(20, 4));在控制台我们可以看到箭头函数打印的结果。箭头函数相当于匿名函数，它没有函数名，而且也简化了函数定义。箭头函数可以只包含一个表达式，甚至连花括号和return都可以省略掉。大家可以先只需要了解这个写法就可以了，以后碰到不至于比较迷惑，见多了也试着尝试多写一下。
调用对象的方法
可以使用点表示法来调用对象的方法，这个和访问对象的属性没有区别。而调用对象的方法和调用一个函数也是大同小异。
调用对象的方法我们在前面就已经接触过大量的案例了，在前面我们已经说过，wx是小程序的全局对象，而在第一节我们打印的很多API，就是调用了wx对象里的方法。
JavaScript函数的写法
在点击事件章节里，我们创建的事件点击处理函数的写法如下：
crollToPosition() {},而在这一节我们创建的事件点击函数的写法为：
yellowTap:function(){},这两种写法都是可以执行的currentTarget事件对象
currentTarget事件对象
当点击组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象，通过 event 对象可以获取事件触发时候的一些信息，比如时间戳、 detail 以及当前组件的一些属性值集合，尤其是事件源组件的id。
当我们点击上面的tab时，触发tabClick事件处理函数，这时候事件处理函数会收到一个事件对象e，我们可以看一下控制台打印的e对象的内容，关于e对象具体属性的解释可以看技术文档。
技术文档：事件对象
currentTarget就是事件对象的一个属性，我们可以使用点表示法获取到点击的组件的Id，并将其赋值给activeIndex，所谓active就是激活的意思，也就是我们点击哪个tab，哪个tab就激活。
- 当点击的id为0，也就是第一个tab时，activeIndex的值被事件处理函数修改为0；
- activeIndex == index相同的tab，也就是激活的tab就会有weui-bar__item_on的class，也就显示为绿色
- !=是不等于操作符，activeIndex != 0显然不成立条件为false，也就是组件hidden为false，即为显示；而activeIndex != 1，2，3则都会true，hidden生效，组件不显示，于是tab的效果就有了。
当我们对字符串、Math对象、Date对象、数组对象、函数对象、事件对象所包含的信息不了解时，把他们打印出来即可。打印出来的结果基本都是字符串、列表、对象，而在前面我们已经掌握如何操作它们。通过实战，通过打印日志，既有利于我们调试代码，也加强我们对逻辑的理解。
