微信小程序之页面跳转和参数传递的实现

微信小程序之页面跳转和参数传递的实现

前言：

在微信小程序里面的跳转其实和html里的超链接a差不多，我们实现跳转可以通过标签实现，也可以通过js实现，下面一一演示给大家看一下。

在展示demo前，我们需要先简单的建好项目文件夹做好准备。如下：

标签实现

小程序里面有一个类似于a标签的navigator标签，用来做跳转处理。

index页面：

  <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</navigator>
  <navigator url="../redirect/redirect?title=我是red" redirect>跳转到当前页面</navigator>

navigator页面和redirect页面：

<view> {{title}} </view>

navigator.js页面和redirect.js页面：

Page({
 data:{
  title:''
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  this.setData({
    title:options.title
  })
 },
})

而跳转也分为两种，一是跳转到新页面url后面的路径并可以携带参数，一种是在后面加上redirect，在当前页面打开，并携带参数。

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

tips：所跳转的页面一定不要忘了在app.json里配置哟，否则会报错。

2. js实现

用js实现只需要写上跳转代码即可，其它如上。

wx.navigateTo({
 url: '../navigator/navigator?title=我是navi'
})

wx.redirectTo({
 url: '../redirect/redirect?title=我是red'
})

tips：仔细观察下面图片会发现，跳转到其他页面会带有返回按钮，在当前页面打开则不会有。

图片展示：

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序-getUserInfo回调的实例详解

    微信小程序-getUserInfo回调的实例详解

    微信小程序-getUserInfo回调的实例详解 前言: 这里就不吹嘘微信小程序有多厉害了,毕竟也不是我写的,直接谈谈我在做小程序开发时遇到的奇异Bug. getUserInfo多次调用: 对于wx.getUserInfo应该很多开发者都用过,用于获取用户基本信息,前提是需要用户授权,如果用户先前没有授权,则弹出一个提示框如下: 点击允许后,我们就能拿到用户信息,再进行后面的一系列操作.这一切看起来都是那么美好,可是在某次运行中,点允许授权后,程序并没有按照我们的预期往下执行.最后发现在其他的地

  • 微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解 前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty

  • 微信小程序getPhoneNumber获取用户手机号

    微信小程序getPhoneNumber获取用户手机号

     微信小程序getPhoneNumber获取用户手机号 小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等, 有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <button open-type="getPhoneNumber"

  • 微信小程序支付之c#后台实现方法

    微信小程序支付之c#后台实现方法

    微信小程序支付c#后台实现 今天为大家带来比较简单的支付后台处理 首先下载官方的c#模板(WxPayAPI),将模板(WxPayAPI)添加到服务器上,然后在WxPayAPI项目目录中添加两个"一般处理程序" (改名为GetOpenid.ashx.pay.ashx) 之后打开business目录下的JsApiPay.cs,在JsApiPay.cs中修改如下两处 然后在GetOpenid.ashx中加入代码如下: public class GetOpenid : IHttpHandler

  • 微信小程序 页面滑动事件的实例详解

    微信小程序--页面滑动事件 wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 10

  • java实现微信小程序登录态维护的示例代码

    相信不少喜欢开发的朋友都已经知道微信小程序是个什么物种了,楼主也是从小程序内测期间就开始关注,并且也写过几个已经上线的微信小程序.但是基本上都是写的纯前端,最近楼主从后端到前端写一个完整的小程序项目,中间碰到了一些问题,楼主会找一些个人觉得有学习价值的点不定时的拿出来跟大家分享,希望对你有一些帮助. 本次就从最基本的微信小程序登录态维护开始吧.小程序官方api文档里面有对登录态的一个完整的解释,并且有相关的代码.想看详情,可以出门右转:https://mp.weixin.qq.com/debug

  • 微信小程序组件之srcoll-view的详解

    微信小程序组件之srcoll-view的详解

    微信小程序组件之srcoll-view的详解 今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助. 首先展示一下想达到的效果.↓ vertical scroll实现上下滚动,horizontal实现左右滚动. 先附上wxml的代码. <view class="container"> <view> <text>vertical scroll</text> <scroll-view scroll-y

  • 微信小程序之页面跳转和参数传递的实现

    微信小程序之页面跳转和参数传递的实现

    微信小程序之页面跳转和参数传递的实现 前言: 在微信小程序里面的跳转其实和html里的超链接a差不多,我们实现跳转可以通过标签实现,也可以通过js实现,下面一一演示给大家看一下. 在展示demo前,我们需要先简单的建好项目文件夹做好准备.如下: 标签实现 小程序里面有一个类似于a标签的navigator标签,用来做跳转处理. index页面: <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</n

  • 微信小程序实现页面跳转传值的方法

    微信小程序实现页面跳转传值的方法 比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator> 传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1 aaa.js Page({ data: { id:'' }, onLoad: function (options){ var that = this; that.setD

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 微信小程序常见页面跳转操作简单示例

    本文实例讲述了微信小程序常见页面跳转操作.分享给大家供大家参考,具体如下: 1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ url: '页面路径', }) 实例: pageSkip :function(){ wx.navigateTo({ url: '/page/admin/details', }) }, 2.关闭当前页面,返回到上一级或多级页面:wx.navigateBack({ url: '页面路径', }) 实例: pageSkip :function(){ wx

  • 微信小程序实现页面跳转传递参数（实体，对象）

    首先我们有这么一种需求,就是我在一个列表中点击了某个item,跳转到详情界面,那么我就需要把item的实体数据从列表页面传递到详情页面,那么我们来看看微信小程序给我们提供的API: 这里大家可以清楚看到api中说到的如何传递参数,其实它这里指的参数仅仅是一些普通的数据类型,我们要传递的实体是object类型,那么我们需要先把实体转成string类型进行传递,在详情页面接受到在逆向转成实体,如下面这段示例: //这里我们跳转详情界面 queryItemClick: function (e) { v

  • 微信小程序返回箭头跳转到指定页面实例解析

    微信小程序返回箭头跳转到指定页面实例解析

    这篇文章主要介绍了微信小程序返回箭头跳转到指定页面实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 onUnload: function () { wx.reLaunch({ url: '../me/order-detail', }) }, //这里url搞相对路径 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 微信小程序判断页面是否从其他页面返回的实例代码

    微信小程序判断页面是否从其他页面返回,具体内容如下所示: 在 data 中自定义一个标记变量,在onLoad里 Page({ data: { isNewOpen: true, //判断当前页面是新打开还是从其他页面返回 list: [], page: 0 }, onLoad: function() { this.getList() }, getList () { // ... }, goDetail (e) { this.setData({ isNewOpen: false }) wx.navi

  • 10分钟彻底搞懂微信小程序单页面应用路由

    10分钟彻底搞懂微信小程序单页面应用路由

    单页面应用特征 「假设:」 在一个 web 页面中,有1个按钮,点击可跳转到站内其他页面. 「多页面应用:」 点击按钮,会从新加载一个html资源,刷新整个页面: 「单页面应用:」 点击按钮,没有新的html请求,只发生局部刷新,能营造出一种接近原生的体验,如丝般顺滑. SPA 单页面应用为什么可以几乎无刷新呢?因为它的SP--single-page.在第一次进入应用时,即返回了唯一的html页面和它的公共静态资源,后续的所谓"跳转",都不再从服务端拿html文件,只是DOM的替换操作

  • 微信小程序实现页面导航的方法详解

    微信小程序实现页面导航的方法详解

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

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

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

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

随机推荐