微信小程序 页面跳转传递值几种方法详解

微信小程序 页面跳转传递值

微信小程序导航有两种形式：一种是在写在js中进行跳转，另一种是写在wxml页面中进行跳转。

1、js导航

（1）、wx.navigateTo(OBJECT) ：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

wx.navigateTo({
 url: 'test?id=1'
})

获取传递的值：

//test.js
Page({
 onLoad: function(option){
  console.log(option.id)
 }
})

（2）、wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
 url: 'test?id=1'
})

（3）、wx.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

2、wxml导航

navigator：页面链接。

注：navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/>的子节点背景色应为透明色

示例代码：

/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover {
  color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
  color:red;
} 
<view class="btn-area">
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>

获取页面传递的值：

// redirect.js navigator.js
Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  })
 }
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 详解微信小程序 页面跳转 传递参数

    详解微信小程序 页面跳转 传递参数

    微信小程序的页面跳转,页面之间传递参数笔记,具体如下: 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <!--index.wxml--> <view class="btn-area"> <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面&

  • 微信小程序 页面跳转如何实现传值

    微信小程序 页面跳转如何实现传值 (1)页面跳转如何传值(实现跳转到不同页面) 点击页面 WXML:加入自定义属性(data-category="{{categoryTitle}}") <view class="more" catchtap="onMoreTap" data-category="{{categoryTitle}}"> js:在event中取出category值并加到URL中 onMoreTap:fu

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

  • 微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码 微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

  • 微信小程序教程系列之页面跳转和参数传递（6）

    微信小程序教程系列之页面跳转和参数传递（6）

    关于页面的跳转,微信小程序提供了3种方法: 方法一: 使用API  wx.navigateTo()函数 示例: 首先先新建一个test页面 如何新建页面? 请到先阅读下面教程 微信小程序的新建页面 -- 微信小程序教程系列(4) index.wxml: 在index.wxml新建一个button组件,并使用bindtap事件绑定一个函数 index.js: 在index.js中的Page函数内部,添加changeToTest 函数,函数里面使用wx.navigateTo,写上需要跳转的页面,里面

  • 微信小程序 页面跳转传参详解

    微信小程序 页面跳转传参详解

    微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <view&g

  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

  • 微信小程序图片轮播组件gallery slider使用方法详解

    微信小程序图片轮播组件gallery slider使用方法详解

    本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下 先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo

  • 微信小程序 限制1M的瘦身技巧与方法详解

    微信小程序瘦身方法: 众所周知,微信小程序在发布的时候,对提交的代码有1M大小的限制!所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及这个底线了. 在设计一个小程序之初,我们就需要重点考虑这一点,采取一些方法,来避免太早的遭遇这个问题. 避免使用本地大图片.大资源文件 请避免在小程序的UI上使用大图片,应该尽可能的通过颜色样式来装点你的小程序 或者,使用小而精致的小图标来点缀 如果实在想用大图片,那请不要将图片放进小程序的本地代码中,应该采用从一个远程UR

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

随机推荐