踩坑微信开放标签wx-open-launch-app

微信开放标签拉不起App了， 百思不得其解。可是之前开发的另外一个页面可以。
因为线上环境才能验证，所以也没没法看日志。点击开放标签就一直没反应，不能拉起App。但刷新下就可以拉起App。定位很久才发现，微信分享地址和真正打开的地址是不一样的。

// 编码了的路由参数

https://xxxx.com/share-test/index.html#/?reportparams=eyJwYWdlIjoibXVzaGFuNjY2IiwiY2hhbm5lbF9uIjoiMSIsInNlcnZpY2VfaWQiOiIyIn0%2C

// vue router 又给还原了

https://xxxx.com/share-test/index.html#/?reportparams=eyJwYWdlIjoibXVzaGFuNjY2IiwiY2hhbm5lbF9uIjoiMSIsInNlcnZpY2VfaWQiOiIyIn0,

然后思考为什么会发生变化，发现vue router做了一些手脚。下面这些字符做了处理。导致，hash上的查询参数在浏览器上会发生变化，因此取整个locatio.href，微信JS 接口签名地址前后不一致，导致微信的签名失败。目前还不清楚vue router为什么要这样做。

URL的合法字符表示在浏览器的地址栏中不会被转义的字符，有两种： 1. URL元字符：分号（;），逗号（’,’），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#） 2. 语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（），圆括号（()`） 当输入的字符不符合以上的字符时，浏览器就会把该字符转义，规则：根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。 比如：当再浏览器地址栏中输入www.baidu.com/q=你好时，会被转义成例如www.baidu.com/q=%E6%98%A5%E8%8A%82类似的字符串，浏览器才会读取。

// router 源码
var e = /[!'()*]/g
, r = function(t) {
return "%" + t.charCodeAt(0).toString(16)
}
, n = /%2C/g
, o = function(t) {
return encodeURIComponent(t).replace(e, r).replace(n, ",")
};

要使用微信开放标签wx-open-launch-app，得先验签。
微信官网签名校验地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
微信 JS 接口签名校验有个条件，参与签名的字段包括有效的 jsapi_ticket（获取方式详见微信 JSSDK 文档）， noncestr （随机字符串，由开发者随机生成），timestamp （由开发者生成的当前时间戳）， url（当前网页的URL，不包含#及其后面部分。注意：对于没有只有域名没有 path 的 URL ，浏览器会自动加上 / 作为 path，如打开 http://qq.com 则获取到的 URL 为 http://qq.com/）。

当时组内小伙伴没有注意这个规则，直接用了location.href。结果就踩到大坑，定位了很久，排查了很多环节，后面一看文档结果是这货的问题。一般的地址也不会出现这种情况，除非用了vue router框架，而且vue的query参数包含了特殊的字符。

所以踩了个大坑。后面取#之前的部分就解决。

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】