小程序-视图与逻辑

一、目标

• 能够知道如何实现页面之间的导航跳转
• 能够知道如何实现下拉刷新效果
• 能够知道如何实现上拉加载更多效果
• 能够知道小程序中常用的生命周期函数

二、目录

• 页面导航
• 页面事件
• 生命周期
• WXS脚本
• 案例-本地生活（列表页面）

页面导航

---

1.什么是页面导航

页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：

①<a>链接

②location.href

2.小程序中实现页面导航的两种方式

①声明式导航

• 在页面上声明一个<naviigator>导航组件
• 通过点击<navigator>组件实现页面跳转

②编程式导航

• 调用小程序的导航API，实现页面的跳转

①声明式导航

1.导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面。

在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

• url表示要跳转的页面的地址，必须以 / 开头
• open-type表示跳转的方式，必须为switchTab

 2.导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面

在使用<navigator>组件跳转到非tabBar页面时，需要指定url属性和open-type属性，其中：

• url表示要跳转的页面的地址，必须以 / 开头
• open-type表示跳转的方式，必须为navigator

注意：为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略 

3.后退导航

如果要后退上一页面或多级页面，则需要指定open-type属性和delta属性，其中：

• open-type的值必须是navigateBack，表示要进行后退导航
• delta的值必须是数字，表示要后退的层级

注意：为了简便，如果只是后退到上一页面，则可以省略delta属性，因为其默认值就是1 

②编程式导航

1.导航到tabBar页面

调用wx.switchTab（Object object）方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

2.导航到非tabBar页面

通用wx.navigateTo(Object object)方法，可以跳转到非tabBar的页面。其中Object参数对象的属性列表：

 3.后退导航

调用wx.navigateBack(Object object)方法，可以返回上一页或多级页面。其中Object参数对象可选的属性列表如下：

 

导航传参

---

1.声明式导航传参

navigator组件的url属性用来指定将要跳转的页面路径。同时，路径的后面还可以携带参数：

• 参数与路径之间使用？分隔
• 参数键与参数值用=相连
• 不同参数用&分隔

2.编程式导航传参

 3.在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到，示例代码如下：

 页面事件-下拉刷新

---

1.什么是下拉刷新

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

2.启用下拉刷新

启用下拉刷新有两种方式：

①全局开启下拉刷新

在app.json的window节点中，将enablePullDownRefresh设置为true

②局部开启下拉刷新

在页面的.json配置文件中，将enablePullDownRefresh设置为true

在实际开发中，推荐使用第2种方式，为需要的页面单独开启下拉刷新的效果

3.配置下拉刷新窗口的样式

在全局或页面的,json配置文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：

• backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
• backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light

4.监听页面的下拉刷新事件

在页面的.js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件

5.停止下拉刷新的效果

上拉触底事件

---

1.什么是上拉触底

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

2.监听页面的上拉触底事件

在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下：

 注意：应该在上拉触底事件中做节流处理，在一个事件没有完成之前，不会触发下一个事件

3.配置上拉触底距离

（就是下拉的时候滚动条距离底部的距离）

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离

可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离

小程序默认的触底距离是50px，在实际开发中，可以根据自己的需求修改这个默认值。

扩展

---

自定义编译模式

修改保存后跳转的页面：如果不修改，则会按照app.json中设置的首页进行显示；修改后则直接按照修改后的页面显示。

 声明周期

---

1.什么是生命周期

生命周期是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段。例如：

 2.生命周期的分类

在小程序中，生命周期分为两类，分别是：

①应用声明周期

• 特指小程序从启动->运行->销毁的过程

②页面生命周期

• 特指小程序中，每个页面的加载->渲染->销毁的过程

3.什么是生命周期函数

生命周期函数：是有小程序框架提供的内置函数，会伴随生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如：页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据

注意：生命周期强调的是时间段，生命周期函数强调的是时间点 。

5.应用的生命周期函数

小程序的应用声明周期函数需要在app.js中进行声明，示例代码如下：

 6.页面的生命周期函数

 WXS脚本

---

1.什么是WXS

WXS是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

2.WXS的应用场景

wxml中无法调用在页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”。

3.WXS和JavaScript的关系*

WXS脚本-基础语法

1.内嵌WXS脚本

wxs代码 可以编写在WXML文件中的<wxs>标签内，就像Javascript代码可以编写在html文件中的<script>标签内一样。

wxml文件中的每个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员：

2.定义外联的wxs脚本

wxs 代码还可以编写在以.wxs为后缀名的文件内，就像javascript代码可以编写在以.js为后缀名的文件中一样。

 3.使用外联的wxs脚本

在wxml中引入外联的wxs脚本时，必须为<wxs>标签添加module和src属性，其中：

• module用来指定模块的名称
• src用来指定要引入的脚本的路径，且必须是相对路径

WXS脚本-WXS的特点

---

1.与JavaScript不同

为了降低wxs（weixin Script）的学习成本，wxs语言在设计时借大量借鉴JavaScript的语法。但是本质上，wxs和Javascript是完全不同的两种语言。

2.不能作为组件的事件回调

wxs典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用，例如：

但是，在wxs中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的： 

3.隔离性

 4.性能好