微信小程序wx.navigateTo跳转参数大小超出限制问题

简介: 微信小程序wx.navigateTo跳转参数大小超出限制问题

微信小程序的跳转方式

  • 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))
}

onShow上获取参数

// 1 获取当前的小程序的页面栈-数组 长度最大是10页面 
let pages = getCurrentPages();
// 2 数组中 索引最大的页面就是当前页面
let currentPage = pages[pages.length - 1];
// 3 获取url上的type参数
const { type } = currentPage.options;
目录
相关文章
|
10天前
|
API
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
|
13天前
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
11 0
|
2月前
|
小程序 UED
微信小程序跳转的几种方式
微信小程序跳转的几种方式
|
2月前
|
移动开发 小程序 安全
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
178 0
|
2月前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
170 0
|
2月前
|
小程序 前端开发 开发者
微信小程序——跳转方式
微信小程序——跳转方式
49 0
|
10天前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
14 1
|
11天前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
18 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
11天前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
10 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
|
10天前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
37 0