解决微信警告：该链接含有无法解析的地址链接-HTML之间的传值（JSON数据）

最近微信公众号开发进入二期了，增添关于汽车租赁的商城模块。遇到界面传值数据问题。

1.首先我用的方式是：

location.href="sales-detail.html?id="+escape(JSON.stringify(htmlObj));

另外，在第二界面用：

var obj =JSON.parse( unescape(obj));

这种方式其他浏览器没有问题，（具体用法：http://www.jianshu.com/p/4aca750abd64 ）

但是在微信浏览器中打开，会出现强制性拦截：警告界面，该链接中含有无法解析的地址链接，是否继续访问。

这里：

首先想声明的是，W3C把这个函数废弃了，身为一名前端如果还用这个函数是要打脸的。

根据 MDN 的说明，escape 应当换用为 encodeURI 或 encodeURIComponent；unescape 应当换用为 decodeURI 或 decodeURIComponent。escape 应该避免使用。举例如下：

escape只是对字符串进行编码（而其余两种是对URL进行编码），与URL编码无关。编码之后的效果是以 %XX 或者 %uXXXX 这种形式呈现的。它不会对 ASCII字符、数字 以及 @ * / + 进行编码。

//而 escape 会编码成下面这样，encode 了冒号却没 encode 斜杠，十分怪异，故废弃之

escape('https://www.baidu.com/ a b c')

// "https%3A//www.baidu.com/%20a%20b%20c

encodeURI是 Javascript 中真正用来对 URL 编码的函数。它着眼于对整个URL进行编码，如下：

• encodeURI('https://www.baidu.com/ a b c')

• // "https://www.baidu.com/%20a%20b%20c" //

总结：可以看到空格被编码成了%20，而斜杠 / ，冒号 : 并没有被编码。所以，它用于对整个 URL 直接编码，不会对 ASCII字母 、数字 、 ~ ! @ # $ & * ( ) = : / , ; ? + ' 进行编码。

但：有的时候，我们的 URL 长这样子，请求参数中带了另一个 URL ：

var URL = "http://www.a.com?foo=http://www.b.com?t=123&s=456";

直接进行 encodeURI 显然是不行的。因为 encodeURI 不会对冒号 : 及斜杠 / 进行转义，那么就会出现上述所说的服务器接受到之后解析会有歧义。

这个时候，就该用到 encodeURIComponent() 。它的作用是对 URL 中的参数进行编码，记住是对参数，而不是对整个 URL 进行编码。

• encodeURIComponent('https://www.baidu.com/ a b c')

• // "https%3A%2F%2Fwww.baidu.com%2F%20a%20b%20c"

同时：它仅仅不对 ASCII字母、数字 ~ ! * ( ) '  进行编码。

错误的用法：

var URL = "http://www.a.com?foo=http://www.b.com?t=123&s=456";

encodeURIComponent(URL);

// "http%3A%2F%2Fwww.a.com%3Ffoo%3Dhttp%3A%2F%2Fwww.b.com%3Ft%3D123%26s%3D456"

// 错误的用法，看到第一个 http 的冒号及斜杠也被 encode 了

正确的用法：encodeURIComponent() 着眼于对单个的参数进行编码：

var param = "http://www.b.com?t=123&s=456"; // 要被编码的参数

URL = "http://www.a.com?foo="+encodeURIComponent(param);

//"http://www.a.com?foo=http%3A%2F%2Fwww.b.com%3Ft%3D123%26s%3D456"

利用上述的使用<a>标签解析 URL 以及根据业务场景配合 encodeURI() 与 encodeURIComponent() 便能够很好的处理 URL 的编码问题。

应用场景最常见的一个是手工拼接 URL 的时候，对每对 key-value 用 encodeURIComponent 进行转义，再进行传输。

 

2.我猜想：是不是一长串的参数的连接，微信浏览器会出现解析问题。所以我试着localStorage进行传参。

在第一个面：

localStorage.setItem("tmp",JSON.stringify(htmlObj));

window.location.href = "sales-detail.html";

在第二界面：

 var obj = localStorage.getItem("tmp");

var Object = JSON.parse(obj);

发现在微信浏览器中有效，不会出现拦截。

记录自己的爬过的每一次坑，分享发给大家。