小程序页面间传参的五种方式实例详解

目录
  • 前言
  • 1、使用globalData
  • 2、使用storage
  • 3、使用url
    • 3.1 api跳转
    • 3.2 组件跳转
  • 4、使用通信通道
  • 5、使用页面栈
  • 总结

前言

由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结。共有五种传参方式,各位有什么关于页面间传参的奇思妙想也可在评论区提出,大家共同探讨

概览

方式 优点 缺点
globalData 双向传参、全应用可用 不及时
storage 双向传参、全应用可用 不及时
路由 简单方便、及时 正向传参
通信通道 双向传参、及时 wx.navagateTo()接口调用才可用
页面栈 可操作数据和函数、及时 反向传参、仅wx.navagateTo()<navigator open-type="navigateTo" url="/bbb?id=1"></navigator> 才可用

1、使用globalData

说明:globalData是小程序app.js中固定的一个属性,存储的数据可在全项目任意处使用

代码示例:

// app.js
App({
  globalData:{},
})

// aaa.js
const app = getApp();
app.globalData.name='xiaowang';

// bbb.js
const app = getApp();
console.log(app.globalData.name) //xiaowang

2、使用storage

说明:storage是微信分给每个小程序的缓存,单个参数最大1M,数据总和最大10M

代码示例:

// aaa.js
Page({
    data:{
        name:'xiaowang'
    },
})
//只支持原生类型、Date、及能够通过JSON.stringify序列化的对象
wx.setStorageSync('name',this.data.name)

// bbb.js
console.log(wx.getStorageSync(name)) //xiaowang

3、使用url

说明:url上直接携带参数长度是有限的且不支持特殊符号,可用编码、解码的方式解决

代码示例:

3.1 api跳转

// aaa.js
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.switchTab({
    url:'/bbb?id=1',
})
//关闭所有页面,打开到应用内的某个页面
wx.reLaunch({
  url: '/bbb?id=1',
})
//关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
  url: '/bbb?id=1',
})
//保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.navigateTo({
  url: '/bbb?id='+ encodeURIComponent(this.data.id),
})
//以上四种路由方式在传参和接参上没有任何区别

// bbb.js
Page({
  //地址传参带过来的参数只能在该方法的options参数中获取
  onLoad:function(options){
    console.log(decodeURIComponent(options.id)) //'1' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串
  },
})

3.2 组件跳转

// aaa.wxml
<view>
  <navigator open-type="switchTab" url="/bbb?id=1">跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面</navigator>
  <navigator open-type="reLaunch" url="/bbb?id=1">关闭所有页面,打开到应用内的某个页面</navigator>
  <navigator open-type="redirectTo" url="/bbb?id=1">关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面</navigator>
  <navigator open-type="navigateTo" url="/bbb?id=1">保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面</navigator>
</view>
//以上四种路由方式在传参和接参上没有任何区别
// bbb.wxml
Page({
  //地址传参带过来的参数只能在该方法的options参数中获取
  onLoad:function(options){
    console.log(options.id) //'1' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串
  },
})

4、使用通信通道

说明:通信通道是wx.navitageTo()独有的

代码示例:

// aaa.js
wx.navigateTo({
  url: '/bbb?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {//参数名字随便起,前后页面对应上即可
    //对发送回来的数据进行处理
      console.log(data)
    },
    someEvent: function(data) {//参数名字随便起,前后页面对应上即可
      console.log(data)
    }
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })//参数名字随便起,前后页面对应上即可
  },
})

//bbb.js
Page({
  onLoad: function(option){
    //获取通信通道
    const eventChannel = this.getOpenerEventChannel()
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
        //对发送过来的数据进行处理
      console.log(data)
    })
    //向上一页面发送数据
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
  },
})

5、使用页面栈

说明:只对当前页面栈中存在的页面生效

代码示例:

// aaa.js
Page({
  data:{
    name:'xiaowang',
    age:22
  },
  eatFood:function(food){
    console.log('eating '+ food)
  },
})

// bbb.js
Page({
  onLoad: function (options) {
    //获取当前页面栈
    const pages = getCurrentPages();
    //获取上一页面对象
    let prePage = pages[pages.length - 2];
    console.log(prePage.data.name) //'xiaowang'
    prePage.eatFood('apple')//eating apple
  },
})

总结

  1. globalData与storage原理相同都是将数据放在一个公共的地方全应用随意取用,但是他们的数据不推送也不关联,即globalData和storage中的数据更新了,但已经获取过值的页面其对应的值并 不会更新。
    解决办法:将各页面获取值的事件放到onShow()中,每次页面进入前台的时候都会重新从globalData和storage中取值。
  2. 路由携带参数简单方便,但是地址长度有限不能携带大量参数和特殊符号。
    解决办法:在传参之前进行编码encodeURIComponent(),接收的时候进行解码 decodeURIComponent()。如此大量参数可以携带但是只能单方面传递参数,即只能a向b传,反之则不行。
  3. 通信通道,页面可以互相传参,但是该通道仅存在于wx.navagateTo()的接口调用时才有效。
  4. 页面栈,这是一个极其强大功能,它本质上不是向页面传参而是直接修改页面参数和方法。通过页面栈我们可以拿到该页面的对象,然后就可以对该页面的各项数据和函数进行操作。但是这种方法只能在b页面去操作a页面,并不能在a页面操作b页面,因为此时页面栈中还没有b。并且该方法也仅限于通过wx.navagateTo()或 <navigator open-type="navigateTo" url="/bbb?id=1">跳转</navigator> 这两种方式进入b页面才可使用,因为其他方式跳转到b页面时已经销毁了其他所有页面,页面栈中已经没有上一个页面了。

到此这篇关于小程序页面间传参的五种方式的文章就介绍到这了,更多相关小程序页面间传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序 页面之间传参实例详解

    微信小程序 传参: 实现效果图: 微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" bindreset="formReset" class="myform"> <text class="prompt">给自己起个名字吧</text> <input placeh

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

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

  • 微信小程序页面间跳转传参方式总结

    前言 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参.缓存和方法调用. URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了. 缓存 虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存. 使用缓存我们有两种方式:小程序自带Storage和vuex.因为我们的项目是基于mpvue的,顺带也用了vuex了 St

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

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

  • 微信小程序链接传参并跳转新页面

    像传统的传参一样,只是在微信里面的标签不一样而已,navigator标签的文档说明: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=20161122 下面是传递参数并展示新页面的一个简单栗子: 这是index.wxml代码: <navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}&quo

  • 微信小程序中多个页面传参通信的学习与实践

    前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

  • 微信小程序自定义组件与页面的相互传参

    目录 1. 自定义组件 官方文档 1.1 创建自定义组件 1.1.1 声明组件 1.1.2 编辑组件 1.2 使用自定义组件 1.3 页面向自定义组件传递数据(父传子) 1.4 组件将事件传给页面(子传父) 1. 自定义组件 小程序允许我们使用自定义组件的方式来构建页面. 官方文档 自定义组件 是不是用的微信的组件感觉很爽啊,如果不够用怎么办? 1.1 创建自定义组件 类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成 1.1.1 声明组件 首先需要在json文件中进行自定义组

  • 微信小程序 页面传参实例详解

    微信小程序 页面传参 微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错误,请指正. 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <span style="font-size:24px;"><!--index.wxml--> <view class

  • 微信小程序 跳转传参数与传对象详解及实例代码

    微信小程序 跳转传参数 传对象 微信小程序跳转传参 一般都是传字符串到下一页,如果要想传对象怎么办呢? 我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象.如下: let str=JSON.stringify(e.currentTarget.dataset.item); wx.navigateTo({ url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str, success: function (res) {

  • 小程序页面间传参的五种方式实例详解

    目录 前言 1.使用globalData 2.使用storage 3.使用url 3.1 api跳转 3.2 组件跳转 4.使用通信通道 5.使用页面栈 总结 前言 由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结.共有五种传参方式,各位有什么关于页面间传参的奇思妙想也可在评论区提出,大家共同探讨 概览: 方式 优点 缺点 globalData 双向传参.全应用可用 不及时 storage 双向传参.全应用可用 不及时 路由 简单方便.及时 正向传参 通信

  • 微信小程序事件绑定传参冒泡及捕获的示例详解

    目录 常见的事件有: currentTarget和target的区别 事件传递参数 touches和changedTouches的区别 事件的绑定两种方法 事件传参 事件的冒泡与事件的捕获 小结 常见的事件有: 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove 手指触摸后移动   touchcancel 手指触摸动作被打断,如来电提醒,弹窗   touchend 手指触摸动作结束   tap 手指触摸后马上离开   longpress 手指触摸后,超过35

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

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

  • 微信小程序开发数据缓存基础知识辨析及运用实例详解

    提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容. 提示:以下是本篇文章正文内容,下面案例可供参考 一.微信数据缓存是什么? 在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦.数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程

  • 微信小程序中使用Promise进行异步流程处理的实例详解

    微信小程序中使用Promise进行异步流程处理的实例详解 我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环操作),则页面会产生卡死的现象. 所以,在JavaScript中,提供了一些异步特性,为程序提供了性能和体验上的益处,比如可以将代码放到setTimeout()中执行:或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求.这些异步的代码不会阻塞当前的界面主进程,界面还是可以

  • 微信小程序 增、删、改、查操作实例详解

    微信小程序 增.删.改.查操作实例详解 1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <form bindsubmit="addSubmit"> <view class="consignee"> <text class="consignee-tit&q

  • 微信小程序 点击控件后选中其它反选实例详解

    微信小程序 点击控件后选中其它反选实例详解 前言: 如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件. 实现效果图: 微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段做判断,加上正则表达式wxml文件: <block wx:for="{{liuliangItems}}"> <block wx:if="{{item.one2one == 1}}"> &l

  • 微信小程序中form 表单提交和取值实例详解

    微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

  • Android实现定时器的五种方法实例详解

    一.Timer Timer是Android直接启动定时器的类,TimerTask是一个子线程,方便处理一些比较复杂耗时的功能逻辑,经常与handler结合使用. 跟handler自身实现的定时器相比,Timer可以做一些复杂的处理,例如,需要对有大量对象的list进行排序,在TimerTask中执行不会阻塞子线程,常常与handler结合使用,在处理完复杂耗时的操作后,通过handler来更新UI界面. timer.schedule(task, delay,period); task: Time

  • C#实现向多线程传参的三种方式实例分析

    本文实例讲述了C#实现向多线程传参的三种方式.分享给大家供大家参考,具体如下: 从<C#高级编程>了解到给线程传递参数有两种方式,一种方式是使用带ParameterizedThreadStart委托参数的Thread构造函数,另一种方式是创建一个自定义类,把线程的方法定义为实例的方法,这样就可以初始化实例的数据,之后启动线程. 方式一:使用ParameterizedThreadStart委托 如果使用了ParameterizedThreadStart委托,线程的入口必须有一个object类型的

随机推荐