url中传递url参数|url中特殊字符&、?、=无法解析问题

1、微信小程序报错：SyntaxError: Unexpected end of JSON input

思路：起因是需要用url传递json对象，无法直接传递。因此将json对象转换为String以url方式传递，然后在target页面进行解析。例如：

http://127.0.0.1:8080/myWeb?type=isLogin&url=http://localhost:8080/shop/admin?order_id=17347001822420000002&is_timeout=&is_history=no&staffId=123

// 1、转换成string
let stuffObj = JSON.stringify(stuff);
console.log(stuffObj);

wx.navigateTo({
  url: '../updateOrDelProducts/index?stuffObj=' + stuffObj
});

// 2、解析string
let stuff = JSON.parse(options.stuffObj);

then…

2、错误场景复现

stuff对象中有一个img数组，是存放url的数组。

img: [
        'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/tx4.jpg?sign=9817258738b68c534b35fbfc04bde928&t=1553372736',
        'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/tx2.jpg?sign=6e1e8eec2c2fc497e3b2ac03b367e770&t=1553372700',
        'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/tx3.jpg?sign=32821196ccfd12115af3d64dc7d67132&t=1553372724'
      ],

3、错误原因及解决方案

3.1 错误原因解析

URL参数中是不能出现+ % # & = ? /等特殊字符的，因为这些字符在URL中有默认的含义，比如&在URL中表示参数间的分隔符，如果不将&转义而直接放在url里，后端的Tomcat就会以这个&为分隔符将参数拆分掉。
如果要传递这些特殊字符给后端，需要将它们转义。转码的格式为：%加字符的ASCII码，即一个百分号%，后面跟对应字符的ASCII（16进制）码值。例如 +号的编码值是"%2B"。
下表中列出了一些URL特殊符号及编码：

特殊字符	在url中默认含义	转义码
+	URL 中+号表示空格	%2B
空格		%20
/	分隔目录和子目录	%2F
?	分隔实际的 URL 和参数	%3F
%	指定特殊字符	%25
#	表示书签	%23
&	URL中指定的参数间的分割符	%26
=	URL中指定参数的值	%3D

3.2 解决方案

// ? -> %3F 
// = -> %3D
// & -> %26
let urls = item.img;
if(urls != undefined && urls != ''){
  for(let i=0;i<urls.length;i++){
    urls[i] = urls[i].replace(/\?/g,"%3F");
    urls[i] = urls[i].replace(/\=/g,"%3D");
    urls[i] = urls[i].replace(/\&/g,"%26");
  }
  console.log(urls);
}
let stuffObj = JSON.stringify(stuff);

再解析成json对象：

let stuff = JSON.parse(options.stuffObj);
// console.log(options);
 // console.log(stuff);
 let urls = stuff.img;
 if(urls != undefined && urls != ''){
   for(let i=0;i<urls.length;i++){
     urls[i] = urls[i].replace(/\%3F/g,"?");
     urls[i] = urls[i].replace(/\%3D/g,"=");
     urls[i] = urls[i].replace(/\%26/g,"&");
   }
   console.log(urls);
 }

 this.setData({
   stuff:stuff
 });
},

4、参考文献

• url参数基础知识
• https://blog.csdn.net/czx2018/article/details/103323120
• url传递参数的例子