微信小程序 - 页面间传值

马丁路德 等级 720 0 0

小程序页面间传值

大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为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的表格没用好,分开感觉居然更合适。

收藏
评论区

相关推荐

喜大普奔,微信终于支持外网打开小程序啦!
前言 千呼万唤始出来,微信小程序终于支持以URL Scheme的形式从外部唤起了。 long long ago 我们只能在微信内的网页中使用微信开发标签小程序跳转按钮
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
微信小程序验证url地址
笔记类 var that this that.optional()是验证是否为空方法 url(value) { return that.optional(value) || /^(?:(?:(?:https?|ftp):)?//)(?:S(?::S)?@)?(?:
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
微信小程序 - 页面间传值
小程序页面间传值大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.naviga
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。 QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦 【区别】:微信小程序的代码与QQ小程序的源码是不一样的。 微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
PHP微信小程序支付——签名错误
![](https://static.oschina.net/uploads/space/2018/0509/141657_Tqix_3477605.png) 先分清几个概念:微信公众平台、微信开放平台、微信商户平台 1.微信公众平台、微信开放平台、微信商户平台是三个不同的平台 2.微信公众平台:用于公众号、小程序等等的设置平台,包括APPID、APP
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口 URL Scheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URL Scheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。 **北京国都互联**第一时
10分钟上线
_摘要:_ 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传。微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播。 当微信小程序遇见serverless,他们会产生奇妙火花,利用函数计算可以快速搭建微信小程序的serverle. **点此查看原文:[http://clic
1小时搭建微信小程序后端
CoNami小程序Demo端到端开发指南 ==================== 1\. 注册登录微信公众平台 -------------- 登录[https://mp.weixin.qq.com,里面有详细的指引,这里就不赘述了。这里注册最后得到的比较重要的东西包括两个](https://www.oschina.net/action/GoToLink
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗? 随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗? **其实前端绝不仅仅是网页开发而已**。微信小程序和 App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗? 随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗? **其实前端绝不仅仅是网页开发而已**。微信小程序和 App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
three.js
第1章 课程介绍 介绍了微信小游戏的概念以及相关的由来,从宏观上对于微信小游戏的定位和价值有一个明确的认识 第2章 微信小游戏平台与特性 讲了微信小游戏平台的相关特性,包括微信小游戏工程的建立,微信小游戏开发工具的详细使用,以及微信小游戏相关API的实战等 第3章 THREEJS与WebGL核心概念 通过理论和实战,讲解了什么是webgl、什