taro icon indicating copy to clipboard operation
taro copied to clipboard

使用CurrentPages方法和useRouter获取query参数时,参数encode错误,无法被正常decode。

Open KangXinzhi opened this issue 9 months ago • 2 comments

相关平台

微信小程序

小程序基础库: 3.0.2 使用框架: React

复现步骤

  • 网址参数中只有中文,符合预期。例如:www.baidu.com?word=你好使用taro的CurrentPages方法或useRouter获取query参数时,中文会被自动encode。获取到的word参数为%E4%BD%A0%E5%A5%BD

  • 网址参数中有中文加特殊字符,不符合预期,例如:www.baidu.com?word=你%好,获取到的word参数为%E4%BD%A0%%E5%A5%BD,中文会被自动encode而特殊字符没被encode。导致用户无法正常decode。

期望结果

期望%特殊字符被正常encode。www.baidu.com?word=你%好 期望的word参数为%E4%BD%A0%25%E5%A5%BD image

实际结果

使用CurrentPages或useRouter实际获取到word参数为 %E4%BD%A0%%E5%A5%BD用户无法正常decode image

环境信息

 Taro v3.6.28


  Taro CLI 3.6.28 environment info:
    System:
      OS: macOS 13.5.2
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
      Yarn: 1.22.21 - /opt/homebrew/bin/yarn
      npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.15 => 3.6.15 
      @tarojs/components: 3.6.15 => 3.6.15 
      @tarojs/helper: 3.6.15 => 3.6.15 
      @tarojs/plugin-framework-react: 3.6.15 => 3.6.15 
      @tarojs/plugin-mini-ci: 3.6.15 => 3.6.15 
      @tarojs/plugin-platform-alipay: 3.6.15 => 3.6.15 
      @tarojs/plugin-platform-h5: 3.6.15 => 3.6.15 
      @tarojs/plugin-platform-jd: 3.6.15 => 3.6.15 
      @tarojs/plugin-platform-qq: 3.6.15 => 3.6.15 
      @tarojs/plugin-platform-swan: 3.6.15 => 3.6.15 
      @tarojs/plugin-platform-tt: 3.6.15 => 3.6.15 
      @tarojs/plugin-platform-weapp: 3.6.15 => 3.6.15 
      @tarojs/react: 3.6.15 => 3.6.15 
      @tarojs/runtime: 3.6.15 => 3.6.15 
      @tarojs/shared: 3.6.15 => 3.6.15 
      @tarojs/taro: 3.6.15 => 3.6.15 
      @tarojs/webpack5-runner: 3.6.15 => 3.6.15 
      babel-preset-taro: 3.6.15 => 3.6.15 
      eslint-config-taro: 3.6.15 => 3.6.15 
      react: ^18.2.0 => 18.3.1 

补充信息

除了%号外,其他特殊符号可能也存在这个问题,期望关注~

KangXinzhi avatar May 10 '24 03:05 KangXinzhi

  1. 我看你写的是小程序平台,我尝试复现了下是没问题的
  • image
import { getCurrentPages } from '@tarojs/taro';

function Test() {
  console.log(getCurrentPages());
  return (
    <View className="overflow-y-auto h-[500px]">
      <View className="h-[800px] bg-red-500">Item 1</View>
    </View>
  );
}
  • image
  1. 如果是h5的话,那本身chrome拿到的url也是会存在转义字符的,并不是taro的问题,可以用URLSearchParams处理下
function getUrlParams(url) {
  const queryString = url.split("?")[1];
  const params = new URLSearchParams(queryString);
  const result = {};

  for (const [key, value] of params.entries()) {
    result[key] = value;
  }

  return result;
}

lcoln avatar May 11 '24 09:05 lcoln

@lcoln 大佬,h5下用这种方式可以解决,但是在微信小程序中,我按照上面的例子会直接白屏加报错。 image image image 新建的一个项目 image

👽 Taro v3.6.28

  Taro CLI 3.6.28 environment info:
    System:
      OS: macOS 13.5.2
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
      Yarn: 1.22.21 - /opt/homebrew/bin/yarn
      npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.20 => 3.6.20 
      @tarojs/components: 3.6.20 => 3.6.20 
      @tarojs/helper: 3.6.20 => 3.6.20 
      @tarojs/plugin-framework-react: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-alipay: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-h5: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-jd: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-qq: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-swan: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-tt: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-weapp: 3.6.20 => 3.6.20 
      @tarojs/react: 3.6.20 => 3.6.20 
      @tarojs/runtime: 3.6.20 => 3.6.20 
      @tarojs/shared: 3.6.20 => 3.6.20 
      @tarojs/taro: 3.6.20 => 3.6.20 
      @tarojs/taro-loader: 3.6.20 => 3.6.20 
      @tarojs/webpack5-runner: 3.6.20 => 3.6.20 
      babel-preset-taro: 3.6.20 => 3.6.20 
      eslint-config-taro: 3.6.20 => 3.6.20 
      react: ^18.0.0 => 18.2.0 

KangXinzhi avatar May 13 '24 07:05 KangXinzhi