小程序内配置带参数的链接会过滤掉参数
在开发小程序中遇到这样一个问题，在页面/pages/selected/selected内配置如下wap链接却无法访问，跳转到了404页面。https://m.jiehun.com.cn/hangzhou/renqibang?top_id=667
读过代码，知道点击这里的链接会跳转到/pages/webhref/webhref页面，再用webview渲染页面。
首先排除链接本身的问题，结果发现可以正常访问。在selected页面也可以打印原有的正确链接，接下来就要查一查webhref页面的问题了。用抓包工具一看，发现拿到的链接地址换了。https://m.jiehun.com.cn/hangzhou/renqibang?top_id=667被替换成了https://m.jiehun.com.cn/hangzhou/renqibang。也就是说，参数部分?top_id丢失了。
那就只有两个原因了，一是webhref页面内做了手脚，二是跳转传输过程中丢掉了参数。
于是我把webhref页面代码翻了一遍，也没发现什么问题，看来多半是跳转过程中的问题喽~接下来看看我们的两条思路：
思路一：
（1）因为会通过options参数传递给目标页面，所以第一步去分析webref中的options参数，发现此时拿到的options如下：
{url: "https://m.jiehun.com.cn/hangzhou/renqibang", top_id: "667"}
小程序把之前的链接地址切割成了url和top_id两部分，如果想正常访问就需要将两部分拼接起来（这里使用了changeparam方法进行参数的拼接）。
if(options.url&&options.url.indexOf('/pages') == -1) {
// 参数拼接
varurl = options.url;
for(varkeyinoptions){
if(key !=='url'){
url =this.changeparam(url, key, options[key])
}
}
this.setData({
url: url
});
}
changeparam:function(href, name, value){
varurl = href;
varnewUrl ="";
varreg =newRegExp("(^|)"+ name +"=([^&]*)(|$)");
vartmp = name +"="+ value;
if(url.match(reg) !=null) {
newUrl = url.replace(eval(reg), tmp);
}else{
if(url.match("[\?]")) {
newUrl = url +"&"+ tmp;
}else{
newUrl = url +"?"+ tmp;
}
}
returnnewUrl;
}
结果依然打不开
（2）难道是select.wxml中navigator的url的问题？
在selected.wxml中给navigator中的image添加事件toAdDetail：
<navigator class="img-box" wx:if="{{item.content_url}}" url="../webhref/webhref?url={{item.content_url}}">
selected.js中：
toAdDetail: function(e){
var originUrl = e.currentTarget.dataset.url;
// 判断配置链接里是否有? 如果有就把?替换成&
if(originUrl.indexOf('?')>-1){
originUrl = originUrl.replace('?', "&")
}
wx.navigateTo({
url: `../webhref/webhref?url=${originUrl}`
})
}
这样就保证url中只有一个?了。
但是还有一个问题，在iPhone6s和iPhone7上点击跳转之后，成功展示出对应页面，然后进行了二次跳转进入了404页面……
原来，navigator标签上的url属性还没有去掉，所以发生了两次跳转。
这时，可以打开对应链接了……
不过把这个页面转发出去之后，点击转发链接又到了404……
思路一夭折了……
思路二：
总感觉方案一走的是弯路，是否可以找到根本原因，一招制敌呢？推倒重来！！
怎样解决参数被options拆解的问题呢？
原来，可以使用encodeURIComponent( )函数把url字符串作为 URI 组件进行编码，在获取的时候decodeURIComponent(options.url)就可以了。于是：
（1）select.js文件中：
toAdDetail: function(e){
this.adsReport(e);
var originUrl = encodeURIComponent(e.currentTarget.dataset.url);
wx.navigateTo({
url: `../webhref/webhref?url=${originUrl}`
})
}
（2）webhref.js文件中解码：
if (options.url.indexOf('/pages') == -1) {
// 参数拼接
var newurl = decodeURIComponent(options.url);
if(newurl.indexOf('?') == -1){
this.setData({
url: newurl + '?uphone=' + uphone + '&uid=' + uid
})
}else{
this.setData({
url: newurl + '&uphone=' + uphone + '&uid=' + uid
})
}
}
然后解决转发后打不开的问题，需要在转发时再次编码：
onShareAppMessage: function (options) {
return {
title: '',
path: '/pages/webhref/webhref?url=' + encodeURIComponent(options.webViewUrl)
}
}
好，可以正常访问了，哈哈~果然要对症下药，才能少走弯路。
