微信小程序的跳转方式

  • wx.navigateTo(Object):保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页(新页面入栈)
  • wx.redirectTo(Object):关闭当前页面,跳转到应用内的某个页面(当前页面出栈,新页面入栈)
  • wx.switchTab(Object):跳转到 tabBar 页面,同时关闭其他非 tabBar 页面(非Tab页面全部出栈,只留下新的 Tab 页面)
  • wx.navigateBack(Object):返回上一页面(页面不断出栈)
  • wx.reLaunch(Object):关闭所有页面,打开到应用内的某个页面(页面全部出栈,只留下新的页面)

跳转携带参数的方法:在跳转的链接后接?参数名=参数

wx.redirectTo({
url: `../heartOrder/index?Info=${JSON.stringify(obj)}`
})

跳转携带的参数必须转换为字符串,否则报错。


小程序跳转带参的字符长度是受限制的,如果字符过长,会被截取掉,解决办法如下:

使用encodeURIComponentdecodeURIComponent对字符进行编码和解码

encodeURIComponent(url):

可把字符串作为 URI 组件进行编码,返回URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。其他字符(比如 :;/?: @&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

decodeURIComponent(url) :

可把字符串作为 URI 组件进行解码。返回URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。

跳转页

wx.redirectTo({
url: `../heartOrder/index?Info=${encodeURIComponent(JSON.stringify(obj))}`
})

接收页

 onLoad(options) {
let { Info} = options
Info = JSON.parse(decodeURIComponent(Info))
}

微信小程序wx.navigateTo跳转参数大小超出限制问题的更多相关文章

  1. 微信小程序wx.navigateTo层叠5次限制,特殊情况的建议

    小程序页面的实例使用栈的数据结构存储,栈内元素最多5个(换一种方式说,就是用户最多能点击5次返回),微信小程序能在栈中相对高层某个页面调用其他相对低层的页面实例的方法. 小程序三种页面跳转API 的区 ...

  2. 微信小程序 wx.navigateTo()传参及多个参数方法

    var workModeAndPriceList = res.data.data.workModeAndPriceList; //var result = JSON.stringify(workMod ...

  3. 微信小程序wx.navigateTo页面不跳转

    排查后发现: 若是在全局app.json中配置了tabBar,引用的链接与wx.navigateTo页面跳转url地址相同就无法实现跳转.

  4. 微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行

    相信大家在做小程序的时候启动页跳转到tab首页会用到switchTab 但是在跳转后发现页面模块不全,后面console.log()后发现是onLoad里面的方法不执行 解决这种问题的方法页有很多中, ...

  5. 微信小程序——wx.navigateTo点击后没反应

    首先,检查你跳转的目标路径是不是属于tabBar,若属于,且当前页面存在tabBar时,wx.navigateTo方法是失效的. 此时可用wx.switchTab方法,并记得在app.json中的&q ...

  6. 微信小程序富文本中的图片大小超出屏幕

    这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '& ...

  7. 微信小程序和微信小程序之间的跳转和传参示例代码附讲解

    一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ...

  8. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  9. 监控微信小程序wx.request请求失败

    在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

  10. 微信小程序wx.showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

随机推荐

  1. C++一个吃豆人小游戏

    C++一个吃豆人小游戏 代码如下 #include <cstdio>#include <iostream>#include <ctime>#include < ...

  2. C温故补缺(六):C反汇编常用的AT&Tx86语法

    C语言反汇编用到的AT&T x86汇编语法 参考:CSDN1,CSDN2 默认gcc -S汇编出的,以及反汇编出的,都是AT&T x86代码,可以用-masm=intel指定为inte ...

  3. 关于更改 lightdm 主题的方法

    lightdm 是一个显示管理器,它支持很多种 greeter lightdm 的主要配置文件都在 /etc/lightdm 目录下面 各个文件的作用: 配置文件名称 作用 图形化界面配置工具 lig ...

  4. Go 的windows安装与环境配置

    1.请前往go的官网下载安装包:https://golang.org/dl/ 安装你如果C盘够大比较土豪就一路next即可,在这里小编穷就安装到了D:\Program Files\Go 2.环境变量配 ...

  5. CheckBox 单选实现及取值

    <input name="ck" type="checkbox" value="1"/><span>按计划进行< ...

  6. services资源+pod详解

    services资源+pod详解 一.Service 虽然每个Pod都会分配一个单独的Pod IP,然而却存在如下两问题: Pod IP 会随着Pod的重建产生变化 Pod IP 仅仅是集群内可见的虚 ...

  7. HTTP2 协议长文详解

    一.HTTP2 简介 HTTP2 是一个超文本传输协议,它是 HTTP 协议的第二个版本.HTTP2 主要是基于 google 的 SPDY 协议,SPDY 的关键技术被 HTTP2 采纳了,因此 S ...

  8. python3 利用当前时间、随机数产生一个唯一的数字作为文件名

    一.python3 利用当前时间.随机数产生一个唯一的数字作为文件名 代码如下: #-*-coding:utf-8-*- #python3自动生成文件名 from datetime import * ...

  9. (java 实现开箱即用基于 redis 的分布式锁

    项目简介 lock 为 java 设计的分布式锁,开箱即用,纵享丝滑. 开源地址:https://github.com/houbb/lock 目的 开箱即用,支持注解式和过程式调用 基于 redis ...

  10. 2022-6.824-Lab1:Map&Reduce

    lab 地址 : https://pdos.csail.mit.edu/6.824/labs/lab-mr.html 1. 介绍 准备工作 阅读 MapReduce 做什么 实现一个分布式的 Map ...