微信小程序_小程序视图与逻辑

一、目标

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

二、目录

A. 页面导航
B. 页面事件
C. 生命周期
D. WXS脚本
E. 案例-本地生活（列表页面）

三、页面导航

3.1 什么是页面导航

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

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

A. 声明式导航
在页面上声明一个导航组件，通过点击组件实现页面跳转

B. 编程式导航
调用小程序的导航API，实现页面的跳转

3.3 页面导航-声明式导航

3.3.1 导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面在使用组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

A. url表示要跳转的页面的地址，必须以 / 开头
B. open-type表示跳转的方式，必须为switchTab
示例代码如下：

<navigator url="/pages/3link/3link" open-type="switchTab">跳转到[联系我们]
</navigator>

3.3.2 导航到非tabbar界面

非tabBar页面指的是没有被配置为tabBar的页面。
在使用组件跳转到普通的非tabBar页面时，则需要指定url属性和open-type属性，其中：
A. url表示要跳转的页面的地址，必须以/开头
B. open-type表示跳转的方式，必须为navigate
示例代码

<navigator url="/pages/4info/4info" open-type="navigate">跳转到[消息界面]
</navigator>

3.3.3 后退导航

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

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

示例代码如下：

<navigator open-type="navigateBack" delta="1">后退【上一级】</navigator>

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

3.4 页面导航-编程式导航

3.4.1 导航到tabbar页面

调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：
在这里插入图片描述

<button type="primary" bind:tap="goto">导航到【联系我们2】</button>

goto(){wx.switchTab({url: '/pages/3link/3link'})
},

3.4.2 导航到非tabbar页面

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

属性：

在这里插入图片描述

<button type="warn" bind:tap="goto2">导航到【消息列表】</button>

goto2(){wx.navigateTo({url: '/pages/4info/4info',})
},

3.4.3 后退导航

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

在这里插入图片描述

<button bind:tap="goback2">返回【上一级】</button>

goback2(){wx.navigateBack()
},

3.5 页面导航-导航传参

3.5.1 声明式导航传参

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

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

代码示例如下：

<navigator open-type="navigate" url="/pages/4info/4info?name=zs&age=18">声明式传参
</navigator>

在这里插入图片描述

3.5.2 编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数，代码示例如下：

<button bind:tap="goto3">编程式传参</button>

goto3(){wx.navigateTo({url: '/pages/4info/4info?name=ls&age=20',})
},

在这里插入图片描述

3.5.3 在onLoad中接收导航参数

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

/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {//options就是导航传参过来的参数对象，返回的是一个对象console.log(options);//要把返回过来的数据放在data里面this.setData({user: options});
},

要把数据放在data里面，其它的方法可能被访问

四、页面事件-下拉刷新事件

4.1 什么是下拉刷新

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

4.2 启用下拉刷新

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

A. 全局开启下拉刷新
在app.json的window节点中，将enablePullDownRefresh设置为true
B. 局部开启下拉刷新(推荐)
在页面的.json配置文件中，将enablePullDownRefresh设置为true
在实际开发中，推荐使用第二种方式，为需要的页面单独开启下拉刷新的效果

4.3 配置下拉刷新窗口的样式

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

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

在这里插入图片描述

4.4 监听页面的下拉刷新事件

在页面的.js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。例如，在页面的wxml中有如下的UI结构，点击按钮可以让count值自增+1;

页面结构：

<view>count:{{count}}</view>
<button type="primary" bind:tap="countAdd">+1</button>

js：

data: {count:0
},
countAdd(){this.setData({count:this.data.count+1});
},

在触发页面的下拉刷新事件的时候，如果要把count的值重置为0，示例代码如下：
.json
在这里插入图片描述
js

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {this.setData({count: 0})
},

4.5 停止下拉刷新

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果。此时，调用wx.stopPulldownRefresh()可以停止当前页面的下拉刷新。示例如下：

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {this.setData({count: 0})//当数据重置成功之后，调用此函数，关闭下拉刷新效果wx.stopPullDownRefresh()
},

五、上拉触底

5.1 什么是上拉触底

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

5.2 监听页面的上拉触底事件

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

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {console.log('已经触底了.......');
},

5.3 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离，可以在全局或局部的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离。
小程序默认的触底距离是50px,在实际开发中，可以根据自己的需求修改这个默认值。

六、生命周期

6.1 什么是生命周期

生命周期（Life Cycle）是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段。例如：
A. 张三出生，表示这个人生命周期的开始
B. 张三离世，表示这个人生命周期的结束
C. 中间张三的一生，就是张三的生命周期

我们可以把每个小程序运行的过程，也概括为生命周期：
A. 小程序的启动，表示生命周期的开始
B. 小程序的关闭，表示生命周期的结束
C. 中间小程序运行的过程，就是小程序的生命周期

6.2 生命周期的分类

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

A .应用生命周期
特指小程序从启动->运行->销毁的过程
B .页面生命周期
特指小程序中，每个页面的加载->渲染->销毁的过程
其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：

在这里插入图片描述

6.3 什么是生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据
注意： 生命周期强调的是时间段，生命周期函数强调的是时间点

6.4 生命周期函数的分类

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

A. 应用的生命周期函数
特指小程序从启动->运行->销毁期间依次调用的那些函数
B. 页面的生命周期函数
特指小程序中，每个页面从加载->渲染->销毁期间依次调用的那些函数

6.5 应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行申明，示例代码如下：
在这里插入图片描述

6.6 页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js文件中进行生命，示例代码如下：

Page({onLoad:function (options){}, //监听页面加载，一个页面只调用一次onShow:function (){},        //监听页面显示onReady:function (){},       //监听页面初次渲染完成，一个页面只调用一次onHide:function (){},        //监听页面隐藏onUnload:function (){}       //监听页面卸载，一个页面只调用一次
})

七、wxs脚本-概述

7.1 什么是wxs

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

7.2 wxs的应用场景

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

7.3 wxs和js的关系

虽然wxs的语法类似于JS,但是wxs和js是完全不同的两种语言：

A. wxs有自己的数据类型
number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、 regexp正则

B.wxs不支持类似于ES6及以上的语法形式
不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc
支持：var 定义变量、普通function函数等类似于ES5的语法

C. wxs遵循CommonJS规范
module对象
require()函数
Module.exports对象

7.4 wxs脚本-基础语法

7.4.1 内嵌wxs脚本

WXS代码可以编写在wxml文件中的标签内，就像JS代码可以编写在html文件中的标签内一样。wxml文件中的每个标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员

<view>~~~~~~~~~~~wxs~~~~~~~~~~~</view>
<view>信息：{{m1.message}}</view>
<view>转化为大写：{{m1.toUpper('zhangsan')}}</view>
<wxs module="m1">//静态展示文本var msg = "hello world!!!!!!!!"module.exports.message=msg;//函数module.exports.toUpper=function (str){return str.toUpperCase();}
</wxs>

在这里插入图片描述

7.4.2 定义外联的wxs脚本

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

示例代码如下：
在这里插入图片描述

7.4.3 使用外联的wxs脚本

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

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

示例代码如下：

<view>外部的wxs:{{m2.toUpper2('lisi')}}</view>
<wxs src="./tool.wxs" module="m2"></wxs>

7.5 wxs脚本-wxs的特点

7.5.1 与js不同

为了降低wxs(WeiXin Script)的学习成本，wxs语言在设计时借大量鉴了JS的语法。但是本质上，wxs和JS是完全不同的两种语言！

7.5.2 不能作为组件的事件回调

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

<view>转化为大写：{{m1.toUpper('zhangsan')}}</view>

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

<button bind:tap="m1.toUpper">按钮</button>

7.5.3 隔离性

隔离性指的是wxs的运行环境和JS代码是隔离的。体现如下两方面：
A . wxs不能调用js中定义的函数
B .wxs不能调用小程序提供的API

7.5.4 性能好

A. 在IOS设备上，小程序内的WXS会比JS代码快2-30倍
B. 在android设备上，二者的运行效率无差异

八、案例

在这里插入图片描述