url 编码

昨天在项目中发现了一个 bug，分享获客表单的二维码链接中没有带上分享人的 id,
请求二维码的链接格式如下：

pageUrl = "https://aaa.com/p.html?k=3090871a0f39dd75&shareid=100228";
genQrcodeUrl =  "https://bbb.com/dist/gen_qrcode?size=5&margin=3&content=" ;
qrcodeImg  =  genQrcodeUrl  + pageUrl;
// html
<img src="{{ qrcodeImg }}" alt="">

排查之后发现是因为获取二维码时 content参数的值应该为 pageUrl 整体，而pageUrl没有 url encode，那么后台在获取参数时 shareid 会被当做 genQrcodeUrl 的参数

知道原因了，查找资料发现有两种 js 内置的方法可以对 URI 进行编码

encodeURIComponent()

encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)

encodeURIComponent(str) 接受一个参数str，str 为URI 的组成部分。
encodeURIComponent 可以对除了 A-Z a-z 0-9 - _ . ! ~ * ' ( ) 之外的所有字符进行编码

将代码修改为下面这样就可以了

pageUrl = "https://aaa.com/p.html?k=3090871a0f39dd75&shareid=100228";
genQrcodeUrl =  "https://bbb.com/dist/gen_qrcode?size=5&margin=3&content=" ;
qrcodeImg  =  `${genQrcodeUrl}${encodeURIComponent(pageUrl)}`;
// html
<img src="{{ qrcodeImg }}" alt="">

encodeURI()

encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 "代理" 字符组成)

encodeURI(URIstring)接受一个参数URIstring，URIstring 为含有 URI 或其他要编码的文本
encodeURI 可以对除了以下字符之外的所有字符进行编码

类型	字符
保留字符	; , / ? : @ & = + $
非转义的字符	字母 数字 - _ . ! ~ * ' ( )
数字符号	#

我们的链接pageUrl中包含 ? & = 等 encodeURI不支持编码的字符，所以这个方法不能解决我们的问题。

总结

请求时 url 中的参数如果有特殊字符如中文 # ？等，记得用 encodeURIComponent编码处理