IOS webview携带参数带+号会变成空格的uni-app问题

IOS webview携带参数带+号会变成空格的uni-app问题

产品分类

  • uniapp/App

PC开发环境操作系统

  • Windows

PC开发环境操作系统版本号

  • Windows 10 教育版

手机系统

  • iOS

手机系统版本号

  • iOS 16

手机厂商

  • 苹果

手机机型

  • 苹果14 或者 苹果11

页面类型

  • vue

vue版本

  • vue2

打包方式

  • 云端

项目创建方式

  • CLI

CLI版本号

  • 2.0.2-4070620250821001

示例代码：

vue代码

<template>  
    <view>  
        <web-view v-if="url" :src="url" class="webview-wrap"></web-view>  
    </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        url: ''  
      }  
    },  
    onLoad() {  
      // 不编码  
      // this.url = 'demo.com?a=2025+'  
      // 编码  
      this.url = `demo.com?a=${encodeURIComponent('2025+')}`  
    }  
  }  
</script>

html代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Document</title>  
</head>  
<body>  
  demo  
</body>  
<script type="text/javascript">  
  window.onload = function() {  
    console.log('window.onload',location.href)  
  }  
</script>  
</html>

操作步骤：

web-view携带参数，并且参数带有+号
在html中获取参数

预期结果：

+号正常获取

实际结果：

+号变成了空格

bug描述：

web-view携带参数，并且参数带有+号
在html中获取参数，+号变成了空格

IOS18 传参的前把参数编码可以解决
IOS16 无论编不编码都变成了空格


更多关于IOS webview携带参数带+号会变成空格的uni-app问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

已解决

更多关于IOS webview携带参数带+号会变成空格的uni-app问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是iOS系统对URL参数中+号处理的兼容性问题。在URL编码规范中，+号确实会被解码为空格，这是历史遗留的URL编码规则。

对于iOS 16及以下版本，建议采用以下解决方案：

  1. 双重编码处理：
onLoad() {
  // 先对+号进行编码，再对整个参数进行URL编码
  const param = encodeURIComponent('2025+').replace(/\+/g, '%2B')
  this.url = `demo.com?a=${encodeURIComponent(param)}`
}
  1. 在HTML页面中解码：
// 在web-view加载的HTML页面中
function getParam(key) {
  const urlParams = new URLSearchParams(window.location.search)
  let value = urlParams.get(key)
  // 将空格还原为+号
  return value ? value.replace(/\s/g, '+') : null
}
  1. 使用Base64编码替代：
// 传参时
this.url = `demo.com?a=${btoa('2025+')}`

// HTML页面中解码
const param = atob(urlParams.get('a'))
回到顶部