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

微信小程序的页面跳转,页面之间传递参数笔记，具体如下：
先上demo图:

为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面.

目录如下:

三个页面,但是代码很简单.直接上代码.

<!--index.wxml-->
<view class="btn-area">
 <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>
 <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator>
</view>

index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数.

navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.

navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.

<!--navigatort.wxml-->
<view style="text-align:center"> {{title}} </view>

在navigatort.wxml中通过js代码可以获取到title,代码如下

//navigatort.js
Page({
 onLoad: function(options) {
 this.setData({
 title: options.title
 })
 }
}) 
<!--redirect.wxml-->
<view style="text-align:center"> {{title}} </view>
//redirect.js
Page({
 onLoad: function(options) {
 this.setData({
 title: options.title
 })
 }
})

最后上两张跳转后的图.

1.跳转到新页面

2.在原来的页面打开

有没有发现一个细节,在原来的页面打开是不会出现返回按钮的,而跳转到新页面后会出返回按钮.

这是因为我写了两个页面.如果indexwxml不是一级页面,这里都会出现返回按钮.

当然返回的结果是不一样的:

1.跳转到新页面,返回是回到之前的页面;

2.在原来页面打开,返回是回到上一级页面.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

    微信小程序 页面跳转传值实现代码 微信小程序的页面路径只能是五层: 现在场景如下: 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

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

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

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

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

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

  • 详解微信小程序 同步异步解决办法

    详解微信小程序 同步异步解决办法 小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参.那是因为微信小程序函数是异步执行的.但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性. WxService.js import Tools from 'Tools' import es6 from '../assets/plugins/es6-promise' class Servic

  • 详解微信小程序审核不通过的解决方法

    详解微信小程序审核不通过的解决方法

    前言 近来,微信小程序一直活跃在开发者的眼球中.很多开发者都投身微信小程序的开发中,而这些开发者,总是需要面对最后一道难题:如何以一种优雅的姿势来通过微信官方的审核.本文基于几天前提交审核的一次总结,写得有不当的地方,请各位大佬指正. 问题描述 先上一下微信小程序平台常见拒绝情形的说明文件.由于我提交的小程序中包含了"分享群"的按钮,所以审核未通过,未通过的原因如下: 3.2.1 小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享.诱导添加.诱导关注公众号.诱导下载等,要求用户分

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

随机推荐