学习微信小程序day04 - 页面导航、传参、接收参数、下拉刷新

一、页面导航
二、页面传参
- 2.1 声明式导航传参
- 2.2 编程式导航传参
三、在onLoad中接收导航参数
四、页面事件
五、扩展-自定义编译模式
六、wxs-处理手机号
总结

一、页面导航

1. 认识页面导航

1.1 什么是页面导航

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

<a> 链接
location.href

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

声明式导航
●在页面上声明一个<navigator>导航组件
●通过点击<navigator>组件实现页面跳转
编程式导航
●调用小程序的导航API,实现页面的跳转

2. 声明式导航

2.1 导航到tabBar页面

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

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

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

<!--pages/home/home.wxml-->
<button type="primary">
	<navigator url="/pages/contact/contact" open-type="switchTab">
		跳转到我们-tabBar页面
	</navigator>
</button>

在这里插入图片描述

2.2 导航到非tabBar页面

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

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

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

<!--pages/home/home.wxml-->
<button type="primary">
	<navigator url="/pages/contact/contact" open-type="switchTab">
		跳转到我们-tabBar页面
	</navigator>
</button>
-------------
<button type="primary">
	<navigator url="/pages/info/info" open-type="navigate">
		导航到非tabBar页面
	</navigator>
</button>

在这里插入图片描述

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

2.3 后退导航

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

open-type的值必须是navigateBack,表示要进行后退导航
delta的值必须是数字，表示要后退的层级
示例代码如下:

<!--pages/info/info.wxml-->
<text>我是非tabBar页面info</text>
<button type="primary">
	<navigator open-type="navigateBack" delta="1">
		返回上一页
	</navigator>
</button>

在这里插入图片描述

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

3. 编程式导航

3.1 导航到tabBar页面

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

1699119392131)

示例：

//html模板
<!-- 编程式导航：跳转到tabBar页面 -->
<button type="primary" bindtap="gotoMessage">跳转到消息页面</button>

//js中的事件处理函数
//编程式导航-跳转到tabBar消息页面
gotoMessage(){
    
    
    wx.switchTab({
    
    
      url: '/pages/message/message',
    })
},

在这里插入图片描述

3.2 导航到非tabBar页面

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

   ---------------------编程式导航--------------------
<!-- 编程式导航:跳转到非tabBar页面 -->
<button type="primary" bindtap="gotoInfo">跳转到Info页面</button>

  // 编程式导航-跳转到非tabBar消息页面
    gotoInfo(){
    
    //info页面
        wx.navigateTo({
    
    
          url: '/pages/info/info',
        })
    },

在这里插入图片描述

3.3 后退导航

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

在这里插入图片描述


<!-- 编程式导航后退 -->
编程式导航后退
<button bindtap="gotoBack" type="primary">后退</button>

// 非tabBar页面后退一页-事件处理函数
gotoBack(){
    
    
    wx.navigateBack()//不使用delta，默认后退一页
    // wx.navigateBack({
    
    
    //     delta:1//指定返回层级数
    // })
}

二、页面传参

2.1 声明式导航传参

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

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

<!--html模板-->
---------------------声明式导航传参--------------------
<!-- 声明式导航传参 -->

<button type="primary">
	<navigator url="/pages/info/info?name=秦始皇&age=20">
		传参到info页面
	</navigator>
</button>

目标页面还未接收，但是参数已经传递过去：
在这里插入图片描述

2.2 编程式导航传参

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

//html模板
---------------------编程式导航传参--------------------
<!-- 编程式导航传参 -->
<button type="primary" bindtap="gotoInfo2">传参Info页面</button>

//js文件
 // 编程式导航-跳转到非tabBar消息页面-传参
 gotoInfo2(){
    
    //info页面
  wx.navigateTo({
    
    
    url: '/pages/info/info?name=张三&sex=男',
  })
},

在这里插入图片描述

三、在onLoad中接收导航参数

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


<!--html模板-->
---------------------声明式导航传参--------------------
<!-- 声明式导航传参 -->
<button type="primary">
	<navigator url="/pages/info/info?name=秦始皇&age=20">
		传参到info页面
	</navigator>
</button>

---------------------编程式导航传参--------------------
<!-- 编程式导航传参 -->

<button type="primary" bindtap="gotoInfo2">传参Info页面</button>

info.js文件中的onLoad接收参数:

 /**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
    
    
    //options就是导航传递过来的参数对象
    console.log(options);
    this.setData({
    
    
        query:options//赋值给data中的query
    })
},

在这里插入图片描述

四、页面事件

4.1 下拉刷新

4.1.1 什么是下拉刷新

定义：下拉刷新指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为；

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

4.1.2 启用下拉刷新

两种方式：

全局开启下拉刷新

在app.json的window节点中,将enablePullDownRefresh设置为true
局部开启下拉刷新

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

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

4.1.3 全局配置下拉刷新窗口的样式

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

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

在这里插入图片描述

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

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

<!--pages/message/message.wxml-->
<text>消息页面</text>
<button type="primary" bindtap="changeAddOne">点击我+1</button>
<text>当前点数：{
   
   {count}}</text>

// pages/message/message.js
    /**
     * 页面的初始数据
     */
    data: {
    
    
        count:0
    },

    // 加1按钮，事件处理函数
    changeAddOne(){
    
    
        this.setData({
    
    
            count:this.data.count+1
        })
    },

      /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
    
    
        console.log("用户下拉刷新了，我要准备刷新页面数据了！");
        this.setData({
    
    
            count:0//下拉刷新重新赋值为0
        })
        wx.stopPullDownRefresh()//当事件处理完成或数据处理完成，自动停止刷新
    },

如下测试用例：

在消息页面单独开启下拉刷新，当点击按钮+1，页面的计数器会加1，下拉刷新不会改变值；
在下拉刷新事件监听处理函数中处理数据，使count赋值为0；

4.1.5 停止下拉刷新

当处理完下拉刷新之后，下拉刷新的loading效果会一直显示，不会主动消失，需要手动隐藏关闭下拉刷新的loading效果。此时，只需要调用 wx.stopPullDownRefresh()方法即可停止下拉刷新。

   /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
    
    
        console.log("用户下拉刷新了，我要准备刷新页面数据了！");
        this.setData({
    
    
            count:0//下拉刷新重新赋值为0
        })
        wx.stopPullDownRefresh()//当事件处理完成或数据处理完成，自动停止刷新
    }

在这里插入图片描述

4.2 上拉触底

1.什么是上拉触底

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

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

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

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

<!--pages/message/message.wxml-->
<text>消息页面</text>
<button type="primary" bindtap="changeAddOne">点击我+1</button>
<text>当前点数：{
   
   {count}}</text>
<view class="box">测试上拉触底</view>

/* pages/message/message.wxss */
.box{
    
    
	height: 600px;
	background-color: bisque;
}

在这里插入图片描述

3.配置.上拉触底距离

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

{
    
    
    "usingComponents": {
    
    },
    "onReachBottomDistance": 200
}

五、扩展-自定义编译模式

这样设置之后，每次编译完成之后就不会在默认跳转到默认的首页：

在这里插入图片描述

六、wxs-处理手机号

wxml模板

<!--pages/message/message.wxml-->

<!-- 联系方式：18898367465 -->
<text>联系方式：{
   
   {phone}}</text>

<view>
	<text>联系方式(分隔测试)：{
   
   {tools.splitPhone(phone)}}</text>
</view>


<!-- 引用外联wxs脚本-->
<wxs src="../../utils/tools.wxs" module="tools"/>

wxs模板文件

// utils/tools.wxs

// 手机号分隔处理函数
function splitPhone(str) {
    
    
	// 判断手机号是不是11位
	if (str.length!=11) 	return str
	//是11位手机号，则进行分隔
	var arr = str.split('')
	// splice数组方法(索引值，要删除的元素个数，要插入的值)
	arr.splice(3,0,'-')
	arr.splice(8,0,'-')
	console.log(arr);
	// join() 方法用于把数组中的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
	return arr.join('')
}

// 向外暴露共享成员
module.exports = {
    
    
	splitPhone:splitPhone
}

wx数据js文件

// pages/message/message.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        phone:'18898367465'

    }


})

效果

在这里插入图片描述

总结

知道如何实现页面之间的导航跳转

声明式导航、编程式导航
知道如何实现下拉刷新效果

enablePullDownRefresh、 onPullDownRefresh
知道如何实现上拉加载更多效果

onReachBottomDistance、onReachBottom
知道小程序中常用的生命周期函数

应用生命周期函数: onlaunch, onShow, onHide
页面生命周期函数: onLoad, onShow, onReady, onHide, onUnload