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

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

小程序页面间传值

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

index.js

wx.navigateTo({  url: url,  events: {    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据    acceptDataFromOpenedPage: (data) => { // 这个方法是随便命名的，没有多少要求，不过被打开的页面emit的时候第一个参数要写这个方法名      console.log（'从隔壁扔来的酸豆角馅儿的包子'，data）    },  },  success: function (res) {    // 通过eventChannel向被打开页面传送数据    // res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })  }})

gebi.js

// 确认选择confirm() {  const eventChannel = this.getOpenerEventChannel()  // 这里应该是微信自带的方法，直接用，妥妥的  eventChannel.emit('acceptDataFromOpenedPage', data)  // 上一个页面event里接收参数的方法名  wx.navigateBack()   // 返回上一个页面}

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

那怎么向下一个页面传值呢？在不使用store，storage的时候，可以通过Url后面带参的方式还有就是上面wx.navigateTo的success回调。虽然success回调我没有用过，但是看了一下感觉非常像我用webworker的时候向子线程里面传值和子线程向主线程传值时，主线程和子线程对数据的接收方式。说白了我觉得就是'监听'(addeventlistener)  (0o-_^o)
这里要提一嘴，URL路径的前面就是pages的前面在跳转的时候带/，就是这样

wx.navigateTo({  url: '/pages/index/index'})

小程序的URL传值

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

wx.navigateTo({  url: '/pages/index/index?page=/pages/home/home&id=0077FF'})

是的你没有看错，就是可以这么传这么个值'/pages/home/home'，别的特殊字符应该是要转一下吧，没试过。

小程序的URL传对象

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

传：先转字符串，在编码。

收：先解码，在转对象。

data = {name: '包子'，  type: '牛肉粉丝'}wx.navigateTo({  url: `/pages/index/index?page=/pages/home/home&params=${encodeURIComponent(JSON.stringify(data))}`})

onLoad (options) {const {page} = options;const params = JSON.parse(decodeURIComponent(options.params))}

嗯～就这样传，没得错。

提一嘴store

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

import { toJS } from 'mobx-miniprogram';let value = toJS(xxxx)

旋转跳跃

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

wx.switchTab. -0-0----> 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（官网原话）

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

两个表格是不是觉得分的很清，嘿嘿嘿。其实是我markdown的表格没用好，分开感觉居然更合适。

到此，关于“微信小程序如何实现页面间传值”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！