试图与逻辑
学习目标：
- 1.能够知道如何实现页面之间的跳转
- 2.能够知道如何实现下拉刷新的效果
- 3.能够知道如何实现上拉刷新的效果
- 4.能够知道小程序中尝试用的生命周期函数
页面导航
什么是页面导航？
页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：
- 1.<a>链接
- 2.location.href
小程序中实现页面导航的两种方式
- 声明式导航
- 在页面上声明一个
导航组件 - 通过点击
组件实现页面的跳转
- 在页面上声明一个
- 编程式导航
- 调用小程序的导航API，实现页面的跳转
声明式导航到tabBar页面
tabBar页面是指被配置为tabBar的页面。如，设置了三个页面，都集中在tabBar上，我们可以在其中一个页面，通过点击进而跳转到另一个页面。
在使用
- url表示要跳转的页面地址，必须以/开头
- open-type表示跳转的方式，必须为switchTab(当是需要跳转到tabBar页面时)，代码示例：
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
声明式导航到tabBar页面
使用声明式导航跳转到非tabBar页面(就是不被定义为tabBar的页面)
- url表示要跳转的页面地址，必须以/开头
- open-type表示跳转的方式，必须为navigator(当是需要跳转到tabBar页面时)，代码示例：
<navigator url="/pages/info/info" open-type="navigator">导航到info页面</navigator>
声明式后退导航
如果要后退到上一级或者多级页面，则需要制定open-type属性和delta属性，其中：
- open-type的值必须是navigateBack，表示要进行后退导航
- delta的值必须是数字，表示要后退的层级代码示例：
返回上一级
注意：为了简便，如果之上返回上一级，则可以可以省略delta属性，因为默认值就是1
编程式导航跳转到tabBar页面
调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：
代码示例：
编程式导航跳转到非tabBar页面
调用wx.navigateTo(Object object)方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：
代码示例：
编程式后退导航
调用wx.navigateBack(Object object)方法，可以返回上一级页面或多层页面。其中Object参数对象的属性列表如下：
代码示例：
导航传参
声明式导航传参
navigator组建的url属性用来指定跳转到的页面路径。同时，路径后面还可以携带路径参数：
- 参数、路径之间使用?分隔
- 参数键、参数值用=项链
- 不同参数用&分隔代码示例：
<navigator url="/pages/info/info?name=张三&age=21">跳转页面</navigator>
其中，name、age为参数，用&分隔，?代表要传递参数；在跳转的同时进行传参
编程式导航传参
绑定事件，出发函数，调用方法wx.navigateTo(Object object),参数书写位置与格式上面相同的，与路径一并书写
如何在onLond中接收导航参数
通过声明式导航传参与编程式导航传参所携带的参数，可以直接在onLoad中直接获取，代码示例：
用形参options接受数据，结果：
接受了数据之后，这个options只能在onLoad范围中接受访问；为了能够让其他的函数也能访问到传递过来的参数，则就需要让options中的数据变为一个可被公共访问的数据；这就需要将数据存储在跳转页面的date节点当中所以需要在date节点中定义一个变量query，这个query指向一个空对象，用于接收options的参数；接受的方法就是，在onLoad函数中利用this.setDate方法把options赋值给query(这与前面学的接收参数是同理的)
页面事件
下拉刷新
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉刷新动作，从而重新加载页面数据的行为
如何启用下拉刷新
- 全局开启下拉刷新
- 在app.json的window节点中，将enablePullDownRefresh设置为true
- 局部开启下拉刷新
- 在页面的.json配置文件中，将enablePullDownRefresh设置为true
如何配置下拉刷新窗口样式
在全或页面的.json配置文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：
- backgroundColor用来配置下拉刷新后才能港口的背景颜色，仅支持16进制的颜色值
- backgroundTextStyle来配置下拉刷新loading的样式，仅支持dark(双色闪)和light
如何监听下拉刷新事件
在页面的.js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
就是只要发生下拉刷新这个事件，就会触发onPullDownRefresh()这个函数
我们可以利用onPullDownRefresh()来做一些小练习：我们设置一个按钮和一个count值，按下按钮count值就会加1，下拉刷新后，count值就恢复到0
如何停止下拉刷新的效果
当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏。此时，我们可以调用wx.stopPullDownFEfresh()可以停止当前页面的下拉刷新。代码示例：
上拉触底事件
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
不过在实际项目中，上拉触底一般实现的是数据的分页功能()
如何监听某个页面的上拉触底时间
在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。（这就跟下拉一个道理）代码示例：
实际操作中可能会出现用户多次发出上拉请求；而且系统本身会默认再次发出请求；所以实际开发中我们要注意两点：
- 在onReachBottom()中做节流处理：首先同一时间只能发出一次请求
- 且上一个请求未完成之前，上拉请求无效
配置上拉触底的距离
上拉触底距离指的是出发上拉触底时间时，滚动条距离页面底部的距离。默认是50，就是说，当滚动条距离底部还有50px时就触发上拉事件
可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离
上拉触底案例
- 1.定义获取随机颜色的方法
- 2.在页面加载时获取初始数据
- 3.渲染UI结构并梅花页面效果
- 4.在上拉触底时调用获取随机颜色的方法
- 5.添加loading效果
- 6.对上拉触底进行节流处理(多余请求不发送；前一个请求不完成不发送)
...是展开运算符
如何在上拉触底是获取随即样式
在上面的学习中，是通过网络数据请求获取不同的颜色，而后再通过上拉触底进而不断的调用这个网络请求的函数；由于版本的问题，没有用到网络请求的函数。而是通过，绑定循环事件，将这个循环事件的行为设置为数组拼接(利用展开运算符)，而后在onReachBottom()函数中调用这个函数，以达到添加新页面的效果；从最开始colorList元素数量为10，到多次触发上来触底事件而新增为40个元素。colorList与colorList1最开始是相同的，由于colorList一直在增加，而要求其每次的增加值不变，故让其每次增加数组colorList1，而不是自己本身。结果如下：
如何添加loading提示效果
通过wx.showLoading显示 loading 提示框。需主动调用wx.hideLoading才能关闭提示框
如何对上拉触底进行截留处理
**节流处理，就是为了解决用户多次上拉发送多次请求；进而做到：
- 同一时间只能发出一次请求
- 且上一个请求未完成之前，上拉请求无效
如果当前正在请求下一页的数据，我们就需要将后续所有的请求屏蔽掉；如果当前没有请求任何数据，才允许发起下一页的请求
步骤：
- 在data 中定义isloading节流阀
1.false表示当前没有进行任何的数据请求
2.true表示当前正在进行数据请求 - 在getColors()方法中修改isloading节流阀的值
1.在公i盗用getColors时将节流阀设置为true
2.在网络请求complete回调函数中，讲解六阀重置为false - 在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制
1.如果节流阀的值为true，则组织当前请求
2.如果节流阀的值为false，则发起数据请求
我们可以看到，一旦发生上拉触底，isloading的值就发生了变化；当然我完成的过程中，我们有发送数据请求，所以isloading值的转换是很快的；但在实际项目中，如果是发送网络请求，这个值的转化是依据网速的；这样就能实现节流
自定义编译模式
每次编译之后，都跳转到挨批评.jsondate首个文件路径；自定义编译过后，就可以让每次编译都跳转到当前编译页面
- 1.在普通编译中选择添加编译模式
- 2.再启动页面中选择每次编译后启动的页面
- 3.我们可以为模式定义名称
- 4.可以传递启动参数
生命周期
生命周期指的是一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段。例如：
- 张三出生，是生命周期的开始
- 张三离世，是生命周期的结束
- 张三的一生，就是张三的生命周期
小程序的运行过程，也可以概括为生命周期：
- 小程序的启动，生命周期的开始
- 小程序的关闭，生命周期的结束
- 运行过程，就是生命周期
生命周期的分类
在小程序中，生命周期分为两类，分别是：
- 应用生命周期
特质小程序从启动-运行-销毁的过程 - 页面生命周期
特指小程序中，每个页面的加载-渲染-销毁的过程
其中，页面的生命周期范围较小，应用程序的生命周期范围较大：
小程序启动——页面A的生命周期——页面B的生命周期——etc...——小程序结束
生命周期函数
生命名周期函数：是有效程序框架提供的内置函数，会伴随着生命周期，自动按顺序依次执行。
生命周期函数的作用：允许程序员在特定的时间，执行某些特定的操作。例如：
页面刚刚加载的时候，可以在onload生命周期函数中初始化页面的数据
注意：生命周期强调的是时间段，而生命周期函数强调的是时间点
生命周期函数分类
- 应用的生命周期函数
特质小程序从启动——运行——销毁期间依次调用的那些函数 - 页面生命周期函数
特指页面从加载——渲染——销毁需要依次调用的函数
应用的生命周期函数
小程序的应用生命周期函数需要在app.js中进行声明
APP函数框架自动生成onLaunch、onShow、onHide函数；onLaunch函数一般用于整个程序的数据初始化(比如会从本地存储中读取一些数据，然后加载到小程序里面；所以读取本地数据的代码就可以写在onlaunch函数中)
onShow、onHide函数：
先了解以下后台、前台的概念：
处于小程序页面时，就是前台；未关闭而是切换到其他应用，就是后台，而这两个函数，就是在小程序在两个状态下转换时所会触发的函数
页面的生命周期函数
小程序的页面生命周期函数需要在页面的.js文件中声明
在Page函数中声明五个生命周期函数
onLoad：监听页面加载（初始化页面数据，转存页面携带的参数）
onReady：监听页面初次渲染完成（比如页面标题的修改，利用wx.setNavigationBarTitle()）
onShow：监听页面显示
onHide：监听页面隐藏
onUnload：监听页面卸载
WXS脚本
WXS
WXS(WeiXin Script)是小程序独有的一套脚本语言，结合WXML，可以构造出页面的UI结构
wxs的应用场景
wsml中无法调用在页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。因此，小程序中的wxs的典型场景就是过滤器。
wxs与javaScript的关系
虽然说wxs的语法类似于javaScript，但是wxs与javaScript是完全不同的两种语言：
- wxs有自己的数据类型
number：数值类型、string：字符串类型、boolean：布尔类型、object：对象类型
function：函数类型、array：数组类型、date：日期类型、regexp：正则 - wxs不支持类似于ES6及以上的语法形式
不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、ect...
支持：var定义变量、普通function函数等类似于ES5的语法 - wxs遵循CommonJS规范
module对象
require()函数，通过这个函数导入模块对象
module.exports()对象，对外共享成员
wxs脚本基本语法
内嵌wxs脚本
wxs代码可以编写在wxml文件中的<wxs>标签内，就像JavaScript代码可以编写在html文件中的<script>标签内一样
wxml文件中的每个
比如，我们定义了一个方法，在一个名为m1的模块中，将这个方法共享到外面；那么外界就可以调用这个方法；
通过：模块名.模块中方法名(参数)；就可以调用这个方法
特别注意：调用模块时的方法名，下面写的是toUpper，而不是toUpperCase
结果：
外联wxs脚本代码编写
wxs代码还可以写在以.wxs为后缀的文件内，就像javascript代码可以编写在以.js为后缀名的文件中一样
如何使用外联式wxs脚本
在wxml中引入wxs脚本时，必须为
1.module属性用来指定模块的名称
2.src用来指定要引入的脚本路径，且必须是相对路径
结果：
wxs的特点
与JavaScript不同
1.为了减低学习成本，wxs语言在设计上大量借鉴了JavaScript的语法。但是本质上，wxs和JavaScript是完全不同的两种语言
2.必能作为组建的事件回调：首先，wxs典型的应用场景就是过滤器，经常配合Mustache语法进行使用，例如：上面案例用到的调用模块中函数的语句；但是在wxs中定义的函数不能作为组建的事件回调函数，例如：<button bindtap="m2.toLower">按钮</button>
3.隔离性：指的是，wxs的运行环境和其它JavaScript代码是隔离的。体现在如下两个方面：1.wxs不能调用js文件中所调用的函数；2.wxs不能调用小程序中的API
4.性能好：在ios设备上，小程序内的WXS会比JavaScript代码快2~20倍；在android设备上，两者无差异
案例-本地生活(列表页面)
1.演示效果及其功能：
- 页面导航并传参
- 上拉触底施加在下一页数据
- 下拉刷新列表
1.创建商铺列表页面
2.将九宫格的每一项都改造成为navigator组件
3.点击项的名称传递到商铺列表页面的标题
4.点击项的id也要传进去，为的是能够显示特定的列表
(1)导航跳转和传参
1.创建商铺列表页面
2.将九宫格每一项改造为navigator组件(支持跳转行为)
3.给navigator添加url属性，添加跳转路径，以及传递参数id和标题名称
(2)动态设置页面标题
这时不能在shoplist.json文件中设置navigationBarTitleText了，否则就把标题设置死了
wx.setNavigationBarTitle()：动态设置页面的标题(通过调用API)
思考：标题动态设置的时机，就是页面刚刚加载的时候；因此可以在合适的页面生命周期函数中调用API
wx.setNavigationBarTitle()在onReady函数中调用
onLoad()函数是用于接收页面参数；而我们知道，函数的形参是由作用域的只能在函数的范围内；而在这个页面中我们还需要其他函数(onReady()函数)调用这些参数，所以我们在date中定义变量，存储这些参数以供其他函数使用
列表页面的API接口
1.以分页的形式，加载自定分类下商铺列表的数据：
（要加载的数据，存放在网络上，需要用API接口获取）接口地址：(一般根据自己的网站获取，格式如下)
- https://www.escook.cn/categories/:cate_id/shops
- url地址中的:cate_id是动态参数，表示分类的id
2.请求方式：GET
3.请求参数： - _page表示请求第几页的数据
- _limit表示每页请求几条数据
如何判断下一页是否还有数据
页码值每页显示多少条数据>=总数据条
pagepageSize>=total
当没有数据时，再次触发上拉事件，需要显示提示框提示用户，利用wx.showToast(Object object)
属性值title意为提示的文本内容，icon（success）意为提示图标一个对勾，不展示图标为none
开启下拉刷新
在页面.json文件，添加配置节点enablePullDownRefresh属性值设置为true
注意：下拉刷新以后，不仅仅要定义一些函数，还要特别注意一些关键数据的重置，比如，pageNum，数组当中的元素数
补充回到函数概念。
对手机号的处理
将123456修改为12-345-6的形式，通过wxs(过滤器)进行处理
