您的当前位置:首页正文

微信小程序页面间传值与页面取值操作实例分析

2023-12-06 来源:站点网
导读前言首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数,话不多说了,来一起看看详细的介绍吧。一、navigator 跳转时wxml页面(参数多时可用“&”)<navigator url='../index/index?id=1&name=aaa'></navigator>或者添加点击事件,js用navigateTo跳转传参,两种

本文实例讲述了微信小程序页面间传值与页面取值操作。分享给大家供大家参考,具体如下:

微信小程序页面间传值

1.js页面间的传值:url: ' 路径 ? 值='+ 获取该页面取值,

实例1:

pageSkip :function(){wx.navigateTo({url: '/page/login/facte?shopsName='+this.data.shopsName,})},

实例2:

pageSkip :function(){wx.navigateTo({url: '/page/index/poer?sid=2 & shopsName='+this.data.shopsName,})},

实例3:

pageSkip :function(){wx.navigateTo({url: '/page/index/poerIndex?sid=2 & shopsName='+this.data.shopsName+'&goodsId='+thi.data.goodsId,})},

2.wxml里的传值:url=" 页面路径 ? 值=获取该页面值"

实例4:

<navigator url="/pages/admin/goodsOrder?orderNo={{item.NO}}" open-type="navigate">

实例5:

<navigator url="/pages/admin/goodsOrder?orderNo={{item.NO}}&num=5" open-type="navigate">

微信小程序页面取值

微信小程序js接受页面传值的方法:

1.本页面参数名为局部变量:onLoad: function (options) { var 本页面参数名=options.上一传值页面参数名},

实例:

onLoad: function (options) {var shopsName=options.shopsName},

2.本页面参数名为全局变量:onLoad: function (options) { 本页面参数名=options.上一传值页面参数名},

实例:

onLoad: function (options) {this.data.shopsName=options.shopsName},

注:无论上一页面是通过js传值还是通过wxml传值,本页面取值方法都如上。

希望本文所述对大家微信小程序开发有所帮助。

小编还为您整理了以下内容,可能对您也有帮助:

微信小程序实现传参数的几种方法示例

前言

首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数,话不多说了,来一起看看详细的介绍吧。

一、navigator 跳转时

wxml页面(参数多时可用“&”)

<navigator url='../index/index?id=1&name=aaa'></navigator>

或者添加点击事件,js用navigateTo跳转传参,两种效果一样

wx.navigateTo({

url: '../index/index?id=1&name=aaa',

})

js页面 在onLoad里直接获取

onLoad: function (options) {

//页面初始化 options为页面跳转所带来的参数

var id = options.id //获取值

},

二、全局变量

app.js页面

globalData:{

id:null

}

赋值:

var app = getApp();

app.globalData.id = 2

取值:

var app = getApp();

var id = app.globalData.id

三、列表index下标取值

wxml页面

<button bindtap='clickMe' data-id='1'>点击</button>

如果需要传递多个,可以写多个data-[参数]的方式进行传递

js页面

clickMe:function(e){

var id = e.currentTarget.dataset.id

console.log(id);

},

注意:通过wxml设置data-[参数名]传递参数,[参数名]只能是小写,不能有大写

四、form表单传值

form表单传值比较简单常用,就不举例了

总结

小程序页面传递数据 、传递数组对象 小程序传值

(1)使用本地缓存

(2)通过页面路由

在使用url进行参数传递时候,传递数据有字节,如果要传递对象,需要先把对象通过JSON.stringify转换成字符串,接收或再通过JSON.parse转换成对象

demo

<template is="模板名" data="数据对象" />

A页面跳转到B页面

页面传值

微信小程序 页面传值详解

一. 跨页面传值.

1 . 用 navigator标签传值或 wx.navigator, 比如

这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受.

如果需要传多个参数, 用 & 链接即可

如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递.

注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个"?"敏感吧

好, 这是第一种 依靠跳转的url带参数传值

2 . 用getCurrentPages(); 获取栈中全部页面的, 然后把数据写入相应页面

这里可以传字符串, 也能传数组等,

这样就把 address 传递并接受了

注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 onshow() 方法中接受, 因为再次返回只执行onshow()方法.

3 . 写入本地, 跨页面在取出来 wx.setStorage/wx.getStorage等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了

4 . 把 数据声明为全局变量

var detail = getApp().detail; 可在任何页面获取

二. 页内传值

1 . 设置id的方法标识跳转后传递后的参数

在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, var id = e.currentTarget.id;

2 . 设置 data-xxx 的方法来标识要传递的值

注 : 这里 data-index="{{index}}" 里的 {{index}} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标. 在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, 即 var index = e.currentTarget.dataset.index; 其他的参数取出也如此, var type = e.currentTarget.dataset.type;

3 . form表单和input输入框

方法1:A页面跳转链接添加参数,B页面onLoad 接收

方法2:设置全局变量 globalData,用的少,一般适用于全局共享的一份信息,如用户open_id等

微信小程序--如何在两个页面之间传值

你看,在这个 出发城市 和 目的地城市 这两个搜索框点击了之后都跳转了页面,这也就意味着我们在这个工程项目里要新建两个文件夹。拿 出发城市 为例,原页面名字叫 proctList.wxml ,点击了出发城市的搜索框之后跳转到出发城市的页面,名字叫 departureCity.wxml 。这是两个不同的文件夹的页面,这也意味着有两个js文件,那他们之间怎么传数据呢?我们需要把用户输入的 城市名字 传到前一个页面呀。

这样我们就把数据保存到了上一页的 data 中

departureCity.js 中我们这样写:

returnAddress 这个方法绑定了 confirm 事件,用户点击手机键盘的确定按钮就会跳转回去

这样我们的 proctList 页面就拿到了用户的输入值,这个值就储存在 proctList.js 的 data 里, this.data.inputValue 这个就是用户的输入值

微信小程序怎么把变量传到另一个页面?

1、两个页面之间传值,例如点击A页面跳转到B页面,把A页面的变量传到B页面。

2、第一种方法在button上绑定一个点击函数,代码:<button bindtap='tz'>我是A页面</button>。

2、在对应的js文件里面写上跳转代码,并携带参数ID=3。

3、点击一下A页面的button,在B页面就可以收到值了,B页面的options里面是要接收的值。

4、第二种方法就是直接跳转,携带参数直接写在里面。

站点网还为您提供以下相关内容希望对您有帮助:

小程序页面传递数据 、传递数组对象 小程序传值

1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受.如果需要传多个参数, 用 &amp; 链接即可 如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify...

微信小程序实现传参数的几种方法示例

一、navigator 跳转时wxml页面(参数多时可用“&amp;”)&lt;navigator url='../index/index?id=1&amp;name=aaa'&gt;&lt;/navigator&gt;或者添加点击事件,js用navigateTo跳转传参,两种效果一样 wx.navigateTo({ url: '../index/index...

微信小程序--如何在两个页面之间传值

returnAddress 这个方法绑定了 confirm 事件,用户点击手机键盘的确定按钮就会跳转回去 这样我们的 productList 页面就拿到了用户的输入值,这个值就储存在 productList.js 的 data 里, this.data.inputValue 这个就是用户的输...

小程序 第一个页面传递数据给第二个页面展示后如何再获取第二个页面的...

1、设置id的方法标识跳转后传递的参数值;2、通过使用data - xxxx 的方法来标识要传递的值 微信小程序设置id的方法标识来传值在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id...

微信小程序怎么把变量传到另一个页面?

1、两个页面之间传值,例如点击A页面跳转到B页面,把A页面的变量传到B页面。2、第一种方法在button上绑定一个点击函数,代码:我是A页面。2、在对应的js文件里面写上跳转代码,并携带参数ID=3。3、点击一下A页面的butto...

微信小程序如何利用getCurrentPages进行页面传值

小程序的页面间传值 , 之前处理这种例如 a页面跳转b页面,在b页面进行一波操作 回到a页面 都是把b页面的操作的数据存到本地存储wx.setStorageSync("b_data","b页面的数据")在a页面是这样的wx.getStorageSync("b_...

微信小程序实现wxml视图向js传递参数的方法(点击view带参数进入js)_百 ...

一:url带参数传递 与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面。index.wxml:效果图:二:将值存入全局变量 我们同样可以将需要的值存入全局变量中,在需要的地方...

微信小程序:详情页请求不同数据的实现原理

再将数据进行修改更新到详情页结构 details.wxml 即可。本案例中跨页面传递数据主要是利用了URL传值,在另外一个页面中接收,并将数据渲染到页面中,这个过程就需要用到生命周期函数:onLoad函数。

小程序页面间有哪些传递数据的方法?

最常见的是参数传递,也就是在地址后面加上参数,然后在onload函数里面获取参数。localstorage传递,就是把需要传递的参数保存到本地,在需要获取的页面当中获取保存的值,并且可以在不需要的时候删除。全局变量传递,就是在页面...

微信小程序页面返回传递参数

let pages = getCurrentPages();    //返回pages的所有信息;数组格式 let prevPage = pages[ pages.length - 2 ];     //返回上一个页面的所有信息  上一级为-...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top