base64 编码

• 问题： 最近做项目活动时，经常会分享链接到第三方平台，
  url上拼接的中文字符串虽然已经经过encodeURIComponent 编码，但是还是会被浏览器自动解码
  导致分享出去的链接地址并不能正确的打开，
  ps: 浏览器解析经过encodeURIComponent编码的url，只会解析出中文字符，貌似其他字符还是编码后的，并不会解码（_{@_@}）

• 想要拿到的链接格式

image.png

• 实际获取链接格式（ps: android版twitter会自动获取页面url，而拿到的url为下面格式）

  
  
  image.png

为了解决这个问题

1. 采用了base64编码

// base64编码之前转义(escape)字符串
function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode(`0x${p1}`)))
}
// 例
b64EncodeUnicode('味儿')

此时得到的编码后的字符串为 5ZGz5YS/
注意到字符串结尾有特殊字符‘／’,如果这样的字符串直接放在url会影响hash路径的获取
所以我们需要进行二次编码

2. encodeURIComponent 将5ZGz5YS/ 编码为5ZGz5YS%2F

最终得到的URL：

image.png

• 此处应该有掌声（呱唧呱唧_=w=）

ps： 编码之后需要解码时要注意：

1. 先进行
   decodeURIComponent解码
2. 再进行
   b64DecodeUnicode 解码

function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(c => `%${(`00${c.charCodeAt(0).toString(16)}`).slice(-2)}`).join(''))
}