微信小程序实现页面导航与传参功能详解

2024-12-05 05:39:37

一、页面导航

概述

顾名思义，页面导航指的是页面之间的相互跳转，

而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数。

分类

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

编程式导航：通过调用小程序专门的导航API，实现页面之间的跳转

声明式导航

导航到tabBar页面

tabBar页面指的是被配置为底部tabBar的页面，点击实现页面间快速切换

配置步骤

声明<navigator>组件

指定URL属性，即需要跳转到的页面的路径，注意路径必须以 / 开头

指定open-type属性，即实现跳转的方式，跳转到tabBar页面该属性必须为 switchTab

示例代码

<navigator url="/pages/index/index" open-type="switchTab">导航到home首页</navigator>

导航到非tabBar页面

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

配置步骤

声明<navigator>组件
指定URL属性，即需要跳转到的页面的路径，注意路径必须以 / 开头
指定open-type属性，即实现跳转的方式，跳转到tabBar页面该属性必须为 navigator
(为了开发方便，官方规定此时open-type属性也可以省略不写)

示例代码

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

后退导航

配置步骤

声明<navigator>组件
指定open-type属性，即实现跳转的方式，后退跳转该属性必须为 navigateBack
指定delta的值，表示要后退的层级数，必须是整数

示例代码

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

编程式导航

导航到tabBar页面

配置步骤

声明一个按钮组件
为按钮绑定事件函数
在时间处理函数中调用wx.switchTab(Object object)方法
在函数体内指定url、success、fail等属性

其中object参数对象的属性列表如下：

（注意：url属性是必填项，其它是可选项）

示例代码：

.wxml

<button bindtap="gotoIndex" type="default">点击跳转到home首页</button>

.js

//按钮点击事件处理函数，实现跳转到首页
  gotoIndex(){
    wx.switchTab({
      url: '/pages/index/index',
      success:function(){
        console.log('跳转成功！')
      },
      fail:function(){
        console.log('跳转失败！')
      },
      complete:function(){
        console.log('已经触发跳转事件！')
      }
    })
  }

导航到非tabBar页面

配置步骤

声明一个按钮组件
为按钮绑定事件函数
在时间处理函数中调用wx.navigateTo(Object object)方法
在函数体内指定url、success、fail等属性

示例代码

代码与上述同理，只是调用的小程序API不同，这里需要调用wx.navigateTo(Object object)方法

后退导航

配置步骤

声明一个按钮组件
为按钮绑定事件函数
在时间处理函数中调用wx.navigateBack(Object object)方法
在函数体内指定delta、success、fail等属性

其中object参数对象的属性列表如下：

示例代码

.wxml

<button bindtap="gotoBack" type="default">点击返回上一页面</button>

.js

gotoBack(){
    wx.navigateBack({
        //delta属性默认值为1 ,所以下面语句可写可不写
        delta:1
    })
}

导航传参

声明式导航传参

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

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

示例代码

<navigator url="/pages/info/info？name=gy&number=1" open-type="navigate">导航到info页面</navigator>

传参结果

编程式导航传参

当调用wx.navigateTo(Object object)方法进行页面跳转时，也可以携带参数，与声明式导航传参同理，将参数写进url中，方法一致

示例代码

 gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=gy&number=1',
      success:function(){
        console.log('跳转成功！')
      },
      fail:function(){
        console.log('跳转失败！')
      },
      complete:function(){
        console.log('已经触发跳转事件！')
      }
    })
  }

到此这篇关于微信小程序实现页面导航与传参功能详解的文章就介绍到这了,更多相关小程序页面导航内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序链接传参并跳转新页面

像传统的传参一样,只是在微信里面的标签不一样而已,navigator标签的文档说明: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=20161122 下面是传递参数并展示新页面的一个简单栗子: 这是index.wxml代码: <navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}&quo
微信小程序页面之间传参实例详解

微信小程序传参: 实现效果图: 微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" bindreset="formReset" class="myform"> <text class="prompt">给自己起个名字吧</text> <input placeh
微信小程序页面间跳转传参方式总结

前言在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参.缓存和方法调用. URL传参这种方式是最简单也是最常用的,这里就不做过多介绍了. 缓存虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存. 使用缓存我们有两种方式:小程序自带Storage和vuex.因为我们的项目是基于mpvue的,顺带也用了vuex了 St
微信小程序实现页面导航的方法详解

目录一.页面导航二.声明式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航三.编程式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航四.导航传参 1.声明式导航传参 2.编程式导航传参 3.在onLoad中接收导航传参五.总结一.页面导航 1.什么是页面导航页面导航是指页面之间的相互跳转. 2.页面导航的两种实现方式页面导航有两种实现方式: 声明式导航方法:在页面声明一个navigator组件,通过点击这个组件来实现页面的
微信小程序url传参写变量的方法

具体代码如下所示: <navigator url="../../pages/newsDetail/newsDetail?id={{news.id}}"> <view class="list-item"> <view class="little-item"> <view class="left-box"> <image src="{{news.thumb[0]}}&
微信小程序页面传参实例详解

微信小程序页面传参微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错误,请指正. 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <span style="font-size:24px;"> <view class
微信小程序自定义组件与页面的相互传参

目录 1. 自定义组件官方文档 1.1 创建自定义组件 1.1.1 声明组件 1.1.2 编辑组件 1.2 使用自定义组件 1.3 页面向自定义组件传递数据(父传子) 1.4 组件将事件传给页面(子传父) 1. 自定义组件小程序允许我们使用自定义组件的方式来构建页面. 官方文档自定义组件是不是用的微信的组件感觉很爽啊,如果不够用怎么办? 1.1 创建自定义组件类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成 1.1.1 声明组件首先需要在json文件中进行自定义组
微信小程序实现传参数的几种方法示例

前言首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数,话不多说了,来一起看看详细的介绍吧. 一.navigator 跳转时 wxml页面(参数多时可用"&") <navigator url='../index/index?id=1&name=aaa'></navigator> 或者添加点击事件,js用navig
微信小程序中多个页面传参通信的学习与实践

前言微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路刚开始我想采用一个比较偷懒的
微信小程序实现页面导航与传参功能详解

目录一.页面导航概述分类声明式导航导航到tabBar页面导航到非tabBar页面后退导航编程式导航导航到tabBar页面导航到非tabBar页面后退导航导航传参声明式导航传参编程式导航传参一.页面导航概述顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转编程式导航:通过调用小程序专门的导航API,实现页
微信小程序学习笔记之本地数据缓存功能详解

本文实例讲述了微信小程序学习笔记之本地数据缓存功能.分享给大家供大家参考,具体如下: 前面介绍了微信小程序获取位置信息操作.这里再来介绍一下微信小程序的本地数据缓存功能. [将数据存储在本地缓存]wx.setStorage [读取本地缓存]wx.getStorage 以手机号+密码登录为例,把登录成功返回的token值存储在本地缓存中,然后读取缓存中的token: login.php: <?php header("Content-type:text/html;charset=utf-8&q
微信小程序自定义底部导航带跳转功能

本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml  <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t
微信小程序返回上一页传参并刷新过程解析

这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下问题微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了. 需求现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面. 方法一.使用到的方法是小程序的页面栈,感兴趣可以打印一下pages
微信小程序实现bindtap等事件传参

之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息. 什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将
微信小程序全屏滚动字幕的实现方法详解

目录一.实现背景二.实现代码三.滚动速度四.后续优化实现效果一.实现背景无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu
微信小程序消息推送php服务器验证实例详解

微信小程序消息推送php服务器验证实例详解微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名比如:
微信小程序视图容器和基本内容组件图文详解

目录前言一,视图容器类组件 1.1 view 1.2 srcoll-view 1.3 swiper和swiper-item 二,基本内容组件 2.1 text 2.2 rich-text 总结前言开发者可以通过运用组件快速搭建出页面结构,上一章也有对组件进行介绍,那么本文牛牛就来带大家学习小程序的组件. 我们可以将组件理解为微信内嵌的标签,它在小程序承担的作用与HTML的标签一致,不过组件的功能更加多样.具体. 事不宜迟,让我们开冲! 一,视图容器类组件 1.1 view 普通视图容器,
微信小程序本地缓存数据增删改查实例详解

微信小程序本地缓存数据增删改查实例详解数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt