微信小程序如何实现页面间传值

　　介绍

这篇文章主要介绍”微信小程序如何实现页面间传值”,在日常操作中,相信很多人在微信小程序如何实现页面间传值问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“微信小程序如何实现页面间传值”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

小程序页面间传值

大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数,我从当前页跳转到下一页,如果需要能返回,我都用的wx.navigateTo,那这个事件作用嘛就是可以接收,下一页返回回来的参数的。像?面这样:

索引。js

wx.navigateTo ({ 　　,,url: url, 　　事件:才能,{ 　　,,,//,为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据 　　,,,acceptDataFromOpenedPage:,(数据),=祝辞,{,//这个方法是随便命名的,没有多少要求,不过被打开的页面发射的时候第一个参数要写这个方法名 　　,,,,,console.log(& # 39;从隔壁扔来的酸豆角馅儿的包子& # 39;,数据) 　　,,,}, 　　,,}, 　　,,成功:function  (res), { 　　,,,//,通过eventChannel向被打开页面传送数据 　　,,,//,res.eventChannel.emit (& # 39; acceptDataFromOpenerPage& # 39;,,{,数据:& # 39;测试# 39;,}) 　　,,} 　　})

gebi。js

//,确认选择 　　确认(),{ 　　const 才能;eventChannel =, this.getOpenerEventChannel(),,//,这里应该是微信自带的方法,直接用,妥妥的 　　eventChannel.emit才能(& # 39;acceptDataFromOpenedPage& # 39;,,数据),,//,上一个页面事件里接收参数的方法名 　　wx.navigateBack才能(),,,//,返回上一个页面 　　}

这两个操作就完成了类似于vue2.x的父子组件传值,这个排放简直一摸一样。

那怎么向下一个页面传值呢?在不使用存储,存储的时候,可以通过Url后面带参的方式还有就是上面wx.navigateTo的成功回调。虽然成功回调我没有用过,但是看了一下感觉非常像我用网络系统的时候向子线程里面传值和子线程向主线程传值时,主线程和子线程对数据的接收方式。说白了我觉得就是& # 39;监听& # 39;(addeventlistener),(0啊_ ^ o)
这里要提一嘴,URL路径的前面就是页面的前面在跳转的时候带/,就是这样

wx.navigateTo ({ 　　,,url: & # 39;/页面/索引/指数# 39; 　　})

小程序的URL传值

小程序的URL传值,跟我们普通的路由带参时一样的,都是后面带问号(?)和且符号(,),但是要分为基本类型的数据传值和引用类型的数据传值。普通的就下面这样儿:

wx.navigateTo ({ 　　,,url: & # 39;/页面/索引/索引? page=/页面/home/home& id=0077 ff # 39; 　　})

是的你没有看错,就是可以这么传这么个值& # 39;/页面/home/回家# 39;别的特殊字符应该是要转一下吧,没试过。

小程序的URL传对象

那传个对象或者数组的话要:

传:先转字符串,在编码。

收:先解码,在转对象。

data =, { 　　名称:,& # 39;包子& # 39;, 　　类型:才能,& # 39;牛肉粉丝& # 39; 　　} 　　wx.navigateTo ({ 　　url:,才能“/页/索引/索引? page=/页面/home/home& params=$ {encodeURIComponent (JSON.stringify(数据)}” 　　}) onLoad (选项),{ 　　const {页面},=,选项; 　　const  params =, JSON.parse (decodeURIComponent (options.params)) 　　}

嗯~就这样传,没得错。

提一嘴商店

我这个项目用的mobx,在mobx里面的拿到的数组的数据就变得很奇怪,不明原因解决方法是.mobx里面有toJS()的方法,用一下就好了。

import  {, toJS },得到& # 39;mobx-miniprogram& # 39;; 　　let  value =, toJS (xxxx)

旋转跳跃

关于跳转,小程序的官网说的很清楚了,我在这里就做个表格吧。

wx.navigateTo跳转到某页面,可以返回,页面栈最多10层,事件内部方法可以获取下一页面返回的数据wx.navigateBack返回上一页或者多个页面,getCurrentPages(没用过,都是直接wx.navigateBack()用的)可获取当前页面栈wx.reLaunch关闭所有页面,并直接跳转到某一个页面wx.redirectTo关闭当前页面,并直接跳转到某一个页面

wx.switchTab。0 - 0——比;跳转到tabBar页面,并关闭其他所有非tabBar页面(官网原话)

关于EventChannel,就是上面说的页面间传值,我也就用了排放,剩下的,,一旦这些我没用过,不好讲因为没得场景带入不好理解,我估摸着也许可能猜测哈能做发布订阅模式来写一些东西。

微信小程序如何实现页面间传值