微信小程序 - 页面间传值

马丁路德
• 阅读 1570

小程序页面间传值

大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为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.navigateTo 跳转到某页面,可以返回,页面栈最多10层,event内部方法可以获取下一页面返回的数据
wx.navigateBack 返回上一页或者多个页面,getCurrentPages(没用过,都是直接wx.navigateBack()用的)可获取当前页面栈
wx.reLaunch 关闭所有页面,并直接跳转到某一个页面
wx.redirectTo 关闭当前页面,并直接跳转到某一个页面

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

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
梦
3年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Easter79 Easter79
2年前
thinkcmf+jsapi 实现微信支付
首先从小程序端接收订单号、金额等参数,然后后台进行统一下单,把微信支付的订单号返回,在把订单号发送给前台,前台拉起支付,返回参数后更改支付状态。。。回调publicfunctionnotify(){$wechatDb::name('wechat')where('status',1)find();
Easter79 Easter79
2年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这