微信小程序跨页面传递data数据方法解析

这篇文章主要介绍了微信小程序跨页面传递data数据方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Q：小程序怎么把页面data里的数据传到另外的页面？ 或者小程序怎么吧表单里的数据传到另外的页面？

A：1、可以使用url传递数据。
例如在A页面中传递数据，需要注意的是，wx.switchTab中的url不能传参数。

wx.navigateTo（｛
url：‘../pageB/pageB?name=raymond&gender=male'
｝）

在B页面中接收数据，通过onLoad的option：

Page（｛
onLoad：function（option）｛
console.log（option.name+'is'+option.gender）；
this.setData（｛option：option｝）；
｝
｝）

2、可以使用本地缓存 示例： 在A页面将数据存入， 在B页面中使用wx.setStorageSync获取数据。

3、可以使用全局比变量保存， 在A页面的时候修改数据， 在B页面的时候可以获取到A页面的数据

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

赞 (0)

相关推荐

  • 微信小程序在其他页面监听globalData中值的变化

    微信小程序在其他页面监听globalData中值的变化

    前言 这几天去面试,多次碰到同一个知识点.而且有一次面试挺有趣的,是关于小程序的.共有3个问题. 1.小程序中Page.watch()方法是做什么用的? 2.小程序中如何在其他页面中监听到globalData中值的变化? 3.如果在app.js执行登录部分的代码,由于时序问题,如何处理其他页面请求时未获取到身份识别标记的情况.(session,userid等).(大意是:怎么能够保证其他页面请求是在登录之后?) 知识点 有经验的同学可能一下子就看出来了,这其实说的是同一个东西,那就是Object

  • 微信小程序 setData使用方法及常用错误解决办法

    微信小程序 setData使用方法及常用错误解决办法 最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元

  • 微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    本文实例讲述了微信小程序学习笔记之跳转页面.传递参数获得数据操作.分享给大家供大家参考,具体如下: 前面一篇介绍了微信小程序表单提交与PHP后台数据交互处理.现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到官方文档的一句话打消了念头,因为没有认证...... [方法一 使用navigator组件跳转传参] 前台博客列表页面data.wxml:(后台数据交互参考上一篇) <view wx:for="{

  • 微信小程序Page中data数据操作和函数调用方法

    Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js Page({ data: { text: "This is page data.", sliderOffset: 0, sliderLeft: 0, state:{ genre:[], genre_index: 0, model:[], model_index: 0, terminalStatus:'', } }, onLoad: functio

  • 微信小程序使用navigateTo数据传递的实例

    微信小程序使用navigateTo数据传递的实例 1,传递基本数据类型 index.js 发送页JS Page({ data: { testStr: '字符串str' }, onLoad: function () { }, next: function(e){ wx.navigateTo({ url: '/pages/test/test?str='+this.data.testStr, }) } }) test.js 接受页JS Page({ data:{ }, onLoad:function(

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

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

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

  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo

  • 微信小程序页面间值传递的两种方法

    微信小程序页面间值传递的两种方法

    一:url带参数传递 与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面. index.wxml: <!--index.wxml--> <view class="container"> <!-- 使用navigator组件 --> <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>

  • 详解小程序中h5页面onShow实现及跨页面通信方案

    小程序webview的现状 h5页面在小程序中的交互(跳转)场景 h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有其他业务线提供) 主要痛点 在完成相关操作后, 页面状态需要更新 ,目前常见的更新方式有如下两种: 第一种:通过url传参(如:url中加入__isonshowrefresh=1,告诉webview再次onshow时候刷

  • 微信小程序实现传递多个参数与事件处理

    前言 开发过程中经常会遇到从一个页面携带数据到另一个页面的情况,所以需要知道以下信息,什么是事件?有哪些传递方式?如果传递数组呢?如果传递对象呢? 一.事件 什么是事件 事件是视图层到逻辑层的通讯方式 事件可以将用户的行为反馈到逻辑层进行处理 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层对应的事件处理函数 事件对象可以携带额外信息,如id, dataset, touches 事件处理的使用 通过在wxml中设置bindtap.catchtap等,在js中写对应的实现方法(不过这种方式目前

随机推荐