微信小程序--常用的页面传值方式

记录小程序中常用的几种页面传值方式

一、storage

wx.setStorage({
     key: "key",
     data: value
 })

通过getStorage回调方式获取data值,或者通过wx.getStorageSync(key) 同步获取key对应的data值

#### 二、url传值

url传值也是经常都能用到的

##### 1、url传递通过字符串拼接传递key=value形式的参数

wx.navigateTo({ url: ‘/pages/index/index?id=1111111111&...‘, })

在跳转后的页面的onLoad生命周期函数中接受一个options参数,可以通过console.log(options.id)获取到url传递的id值

2、url传递对象形式的参数

假设需要传递的参数形式为:{key,value,key2:value2},这时候通过以上方式传递在option中打印出来会是一个object类型,([object object]) ,并不能真实获取参数。因此需要使用JSON.stringify()转化成json字符串再通过以上方式将参数传过去。页面中获取option的值,需要通过JSON.parse()转化成原本的json格式。

三、页面栈传值

小程序中wx.navigateBack()方法可以返回上级页面

var pages = getCurrentPages(); // 获取页面栈
 var Page = pages[pages.length - 1]; //当前页
 var prevPage = pages[pages.length - 2]; //上一个页面

通过prevPage.setData({ key: value})可以改变上一个页面的data内容,key为上一个页面data中的值,value为需要传递(改变)的值

通过wx.navigateBack({delta: 1}) 返回上级页面

四、获取、改变app.js中data的值

app.js中可以保存一个全局的属性,和storage类似

globalData是一个全局属性,里面声明的data值可以在所有页面中使用。

使用场景,存储用户信息、控制页面刷新

globalData: {
  userInfo: null
}

页面中的js需要const app = getApp() ,通过app.globalData.userInfo 获取globalData中userInfo的值,直接赋值即可修改: app.globalData.userInfo= ‘haha‘

原文地址:https://www.cnblogs.com/sevenbreey/p/10214345.html

时间: 2024-10-10 23:39:57

微信小程序--常用的页面传值方式的相关文章

完整微信小程序授权登录页面教程

完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方法.在参考了网路上各种方案之后,实现了用户在授权之后跳转到小程序首页的授权登录页面. 2.实现效果 3.实现思路 在进入小程序时先对授权情况进行判断,若已经过授权则直接跳转到首页,若还未经过授权则进入授权页面,点击页面的授权按钮会弹出选择框,选择"拒绝"则不进行跳转,选择"允许&

微信小程序详解——页面之间的跳转方式【路由】和参数传递

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navi

微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // 源页面A相关代码 wx.navigateTo({ url: "/pages/mypage/mypage?a=1&b=2" }) // 目标页面B相关代码 Page({ onLoad: function (options) { var a = options.a; // 值:1 va

微信小程序(2)——新建页面

在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入"pages/index/index" 后,小程序的编辑工具会自动在根目录建立 pages文件夹 index文件夹 index命名的.js  .json  .wxss  .wxml 文件  app.json介绍 app.json是每个小程序必有切唯一的. 使用app.json文件来对微信小程序进

微信小程序--更改启动页面

在微信小程序中,如果想把子页面设置成打开程序的第一眼页面而不是首页,只需要在公共json文件中的pages里面的第一位设置成你想要的页面路径即可: "pages":[ "pages/index/index",//把要放在启动第一位显示的页面路径放在此处. "pages/logs/logs", "pages/news/news", "pages/products/products", "pages/

微信小程序使用content-type等于x-www-form-urlencoded方式使用request请求数据

因为服务器只能接收x-www-form-urlencoded方式接收前端收到的数据 所以微信小程序开发的时候,必须鼓捣这个问题. 微信默认使用content-type是 application/json 用wx.request方法改掉header为x-www-form-urlencoded比较简单 wx.request({ 'content-type': 'application/x-www-form-urlencoded' }) 这么干就可以了. 但问题是,微信小程序,似乎不会把我们的数据自动

微信小程序 跳转页面

1.wx.navigateTo  跳转页面(不销毁当前页面) wx.redictTo跳转页面(销毁当前页面会触发onUnload事件)wx.switchTab只能跳转tab页面(tab页面之前的页面全部销毁触发onUnload事件) 2.微信小程序页面分为普通页面跟tab页面  tab页面需要在app.json中设置,默认页面下面有导航栏(最高优先级) 3.unload事件是在页面销毁之后触发 原文地址:https://www.cnblogs.com/gpzhen/p/11603464.html

微信小程序跳转页面时参数过长导致参数丢失

问题描述: 微信小程序:跳转页面时传参,参数过长导致参数丢失 跳转到文章详情页时,使用的文章链接e.currentTarget.dataset.id过长导致参数丢失 handleClickArticle: function (e) { wx.navigateTo({ url: '/pages/index/articleinfo/articleinfo?urllink=' + e.currentTarget.dataset.id }) }, 解决方案: 调用微信的API,将参数编码传送,解码接收,

完整且易读的微信小程序的注册页面(包含倒计时验证码、获取用户信息)

目录 1.页面展示 2.wxml代码 3.wxss代码 4.js代码 1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id=