微信小程序｜小程序页面跳转传参，参数被自动截取问题

小蹦跶儿
813 阅读2分钟

前言：
微信小程序页面跳转需要传参时，如果参数里面含有等号(=)或问号(?)的话，等号后面的字符会被自动截取，导致传递参数不完整，同时在另一个页面接收到的参数也不完整。

问题描述

最近在做微信小程序的项目，其中有个页面是用web-view内嵌的H5页面，H5页面中有个点击事件，点击之后要给小程序页面传参，其中有个参数值，后台返回的竟然是这种格式：name: '0105=系统应用100问=科目'！参数中含两个等号！
导致在小程序页面只能接收到'0105'。

解决思路

因为微信小程序页面跳转传参的结构是：小程序页面路径?参数键=参数值&参数键=参数值，代码如下：

wx.miniProgram.navigateTo({
  url: `/pages/webViewPage/webViewPage?source=wap&url=${newUrl}&name=${name}`,
});

所以将问题定位为小程序传参时，参数中含等号被自动截取了。
同理，如果参数中含问号(?)，也会被自动截取。

解决方案

可以使用js中的encodeURIComponent（参数）函数把字符串中的URI或相关参数进行编码，然后再到另外一个页面用decodeURIComponent ()解码就OK了。

  1. 传参页面代码如下，即先将字符串用encodeURIComponent()函数进行编码，将编码后的字符串传递到另一个页面：
// 对参数进行编码，防止文件名中含等号或其他字符被自动截取
const name = encodeURIComponent(name);

wx.miniProgram.navigateTo({
  url: `/pages/webViewPage/webViewPage?source=wap&url=${newUrl}&name=${name}`,
});

image.png

  1. 接收参数的页面代码如下，在此页面接收编码后的字符串，并将字符串用decodeURIComponent()函数进行解码:

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码：

wx.downloadFile({
  url: options.url,
  filePath: wx.env.USER_DATA_PATH + "/" + decodeURIComponent(options.name), // 设置自定义标题
  success: () => {},
  fail: () => {},
})

image.png

image.png

这样传递和接收到的参数就是完整的。

以上也同样适用于微信小程序内部页面跳转时传参。

encodeURIComponent() 函数不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如 ：;/? : @&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

希望对大家有帮助！

avatar
文章
阅读
粉丝