wx小程序起步三、四【一共四章】-优质好文_wx失败的回调函数名称-CSDN博客

本文链接：https://blog.csdn.net/weixin_52479803/article/details/128920789

页面导航

声明式导航

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

编程式导航

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

页面导航-声明式导航

导航到tabBar 页面

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

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

url 表示要跳转的页面的地址，必须以/开头

open-type 表示跳转的方式，必须为switchTab

导航到非tabBar 页面

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

url 表示要跳转的页面的地址，必须以/开头

open-type 表示跳转的方式，必须为navigate

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

后退导航

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

open-type的值必须是navigateBack，表示要进行后退导航

delta的值必须是数字，表示要后退的层级

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

页面导航-编程式导航

导航到tabBar 页面

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

属性	类型	是否必选	说明
url	string	是	需要跳转的tabBar页面的路径，路径后面不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

导航到非tabBar 页面

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

属性	类型	是否必选	说明
url	string	是	需要跳转的tabBar页面的路径，路径后面不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

后退导航

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

属性	类型	默认值	是否必选	说明
delta	number	1	是	返回的页面数，如果delta 大于现有页面数，则返回到首页
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

页面导航-导航传参

声明式导航传参

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

参数与路径之间使用?分隔

参数键与参数值用=相连

不同参数用&分隔

编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数

在onLoad中接收导航参数

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

页面事件

用下拉刷新

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

全局开启下拉刷新

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

局部开启下拉刷新

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

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

置下拉刷新窗口的样式

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

backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值

backgroundTextStyle用来配置下拉刷新loading 的样式，仅支持dark 和light

听页面的下拉刷新事件

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

关闭下拉刷新的效果

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

上拉触底事件

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

听页面的上拉触底事件

在页面的.js 文件中，通过onReachBottom() 函数即可监听当前页面的上拉触底事件

置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。可以在全局或页面的.json 配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离。小程序默认的触底距离是50px

上拉触底案例

定义获取随机颜色的方法

在页面加载时获取初始数据

渲染UI 结构并美化页面效果

上拉触底时获取随机颜色

添加loading 提示效果

对上拉触底进行节流处理

在data 中定义isloading节流阀

false 表示当前没有进行任何数据请求

true 表示当前正在进行数据请求

在getColors() 方法中修改isloading 节流阀的值

在刚调用getColors 时将节流阀设置true

在网络请求的complete 回调函数中，将节流阀重置为false

在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制

如果节流阀的值为true，则阻止当前请求

如果节流阀的值为false，则发起数据请求

生命周期

生命周期（Life Cycle）是指一个对象从创建-> 运行-> 销毁的整个阶段，强调的是一个时间段

生命周期的分类

应用生命周期

页面生命周期

生命周期函数

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

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

命周期函数的分类

应用的生命周期函数

小程序的应用生命周期函数需要在app.js 中进行声明

页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js 文件中进行声明

WXS 脚本

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

wxs 和JavaScript 的关系

wxs 有自己的数据类型

 number 数值类型、 string 字符串类型、b oolean 布尔类型、 object 对象类型
function 函数类型、 array 数组类型、 date 日期类型、regexp 正则

wxs 不支持类似于ES6 及以上的语法形式

不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...

支持：var 定义变量、普通function 函数等类似于ES5 的语法

wxs 遵循CommonJS 规范

module对象

require() 函数

module.exports 对象

WXS 脚本基础语法

内嵌wxs 脚本

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

定义外联的wxs 脚本

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

使用外联的wxs 脚本

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

module用来指定模块的名称

src用来指定要引入的脚本的路径，且必须是相对路径

WXS 脚本-WXS 的特点

JavaScript 不同

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

不能作为组件的事件回调

隔离性

隔离性指的是wxs 的运行环境和其他JavaScript 代码是隔离的。体现在如下两方面：

wxs 不能调用js 中定义的函数

wxs 不能调用小程序提供的API

性能能好

在iOS 设备上，小程序内的WXS会比JavaScript 代码快2 ~ 20 倍

自定义组件

引用组件

局部引用：组件只能在当前被引用的页面内使用

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”

全局引用：组件可以在每个小程序页面中使用

在app.json 全局配置文件中引用组件的方式，叫做“全局引用”

全局引用VS 局部引用

如果某组件在多个页面中经常被用到，建议进行“全局引用”

如果某组件只在特定的页面中被用到，建议进行“局部引用”

样式

组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI 结构

组件 A 的样式不会影响组件 C 的样式

组件 A 的样式不会影响小程序页面的样式

小程序页面的样式不会影响组件 A 和 C 的样式

组件样式隔离的注意点

app.wxss 中的全局样式对组件无效

只有class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用class 选择器，不要使用id、属性、标签选择器！

修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过styleIsolation修改组件的样式隔离选项

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用class 指定的样式将不会相互影响
apply-shared	否	表示页面wxss 样式将影响到自定义组件，但自定义组件wxss 中指定的样式不会影响页面
shared	否	表示页面wxss 样式将影响到自定义组件，自定义组件wxss 中指定的样式也会影响页面和其他设置了apply-shared 或shared 的自定义组件

数据、方法和属性

data 数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到data 节点中

methods 方法

在小程序组件中，事件处理函数和自定义方法需要定义到methods 节点中

properties 属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据

data 和properties 的区别

在小程序的组件中，properties 属性和data 数据的用法相同，它们都是可读可写的，只不过：

data 更倾向于存储组件的私有数据

properties 更倾向于存储外界传递到组件中的数据

使用setData 修改properties 的值

由于data 数据和properties 属性在本质上没有任何区别，因此properties 属性的值也可以用于页面渲染，或使用setData 为properties 中的属性重新赋值

数据监听器

什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于vue 中的watch侦听器

数据监听器的基本用法

组件的UI 结构

组件的.js 文件代码

纯数据字段

纯数据字段指的是那些不用于界面渲染的data 字段

组件的生命周期

组件全部的生命周期函数

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有3 个，分别是created、attached、detached。它们各自的特点如下：

组件实例刚被创建好的时候，created 生命周期函数会被触发

此时还不能调用setData

通常在这个生命周期函数中，只应该用于给组件的this 添加一些自定义的属性字段

在组件完全初始化完毕、进入页面节点树后，attached 生命周期函数会被触发

此时，this.data已被初始化完毕

这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

在组件离开页面节点树后，detached 生命周期函数会被触发

退出一个页面时，会触发页面内每个自定义组件的detached 生命周期函数

此时适合做一些清理性质的工作

lifetimes节点

在小程序组件中，生命周期函数可以直接定义在Component 构造器的第一级参数中，可以在lifetimes字段内进行声明（这是推荐的方式，其优先级最高）

组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

pageLifetimes节点

组件所在页面的生命周期函数，需要定义在pageLifetimes 节点中

例如：每当触发页面的show 生命周期函数的时候，我们希望能够重新生成一个随机的RGB 颜色值。

插槽

在自定义组件的wxml 结构中，可以提供一个<slot> 节点(插槽)，用于承载组件使用者提供的wxml 结构

单个插槽

在小程序中，默认每个自定义组件中只允许使用一个<slot> 进行占位，这种个数上的限制叫做单个插槽

启用多个插槽

在小程序的自定义组件中，需要使用多<slot> 插槽时，可以在组件的.js 文件中，通过如下方式进行启用

可以在组件的.wxml 中使用多个<slot> 标签，以不同的name来区分不同的插槽

在使用带有多个插槽的自定义组件时，需要用slot 属性来将节点插入到不同的<slot> 中

父子组件之间的通信

属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置JSON 兼容的数据

事件绑定

用于子组件向父组件传递数据，可以传递任意数据

获取组件实例

父组件还可以通过this.selectComponent() 获取子组件实例对象

这样就可以直接访问子组件的任意数据和方法

属性绑定详情

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件

//子组件在properties节点中声明对应的属性并使用

事件绑定详情

事件绑定用于实现子向父传值，可以传递任何类型的数据

在父组件的js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件。

在父组件的wxml 中，通过自定义事件的形式，将步骤1 中定义的函数引用，传递给子组件

在子组件的js 中，通过调用this.triggerEvent(‘自定义事件名称’, { /* 参数对象*/ })，将数据发送到父组件

在父组件的js 中，通过e.detail 获取到子组件传递过来的数据。

获取组件实例详情

可在父组件里调用this.selectComponent("id或class选择器") ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如this.selectComponent(".my-component")。

自定义组件-behaviors

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于Vue.js 中的“mixins”

创建behavior

调用Behavior(Object object)方法即可创建一个共享的behavior 实例对象，供所有的组件使用

导入并使用behavior

在组件中，使用require() 方法导入需要的behavior，挂载后即可访问behavior 中的数据或方法

behavior 中所有可用的节点

可用的节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数