小程序二级页面tabbar_小程序页面推广踩坑记

前几天，团队里有个小伙伴遇到一个问题，卡壳了大半天。我觉得这个例子值得拿出来分享给大家。希望大家以后遇到类似的问题能顺利绕过这种坑。

业务场景很常见，就是为了配合小程序中特定页面的推广，区分推广渠道和人员，逐步实现较高精准度的投放。稍微特殊一点的地方在于，这个页面在小程序中。

为了达到区分推广渠道和人员的目的，我们决定采用在页面url末尾添加参数src和uid的方法。由于这样的推广不能使用体验版进行测试，所以全程我们只能在微信开发者工具中模拟推广行为。

页面本身的交互是这样的：

在index页面点击按钮跳转到webview嵌套的h5页面pages/webhref/webhref?url=xxx。跳转时需要携带index页面设置的参数uid和src，以及目标页面地址url。在webhref页面的onload方法中再接收options对象并解析。

首先，在编译模式中设置index页面的启动参数，模拟index页面被推广的场景：      

       

然后在对应按钮的点击事件中执行跳转：

let newurl = api.host+'/m/'+ pageurl +'&src=' + this.data.src + '&uid=' + this.data.uid;wx.navigateTo({  url: '../webhref/webhref?url=' + newurl});

这样，在跳转后的页面webhref的onload方法中就可以接收到这几个参数了：

onLoad: function (options) {  if (options.url.indexOf('/pages') == -1) {    console.log('options--',options);    this.setData({      url: options.url + '?src=' + options.src + '&uid=' + options.uid    })  }}    // {url: "https://xxxxx.com.cn/m/bj", src: "111", uid: "222"}

像上面这样，将接收到的这三个参数拼接起来就好了。

看起来的确就是这么简单，然鹅~

如果过不了几天，options.url中需要带?该怎么办呢？

那我们就需要兼容一下options.url有没有?两种情况了。这个好说：

onLoad: function (options) {      if (options.url.indexOf('/pages') == -1) {          let tourl = options.url;          let params = (tourl.indexOf('?')!=-1 ? '&': '?') + options.src + '&uid=' + options.uid          this.setData({              url: tourl + params          })  }}

也不难嘛，是不是~

可是我们貌似忽略了另一个问题，如果options.url中如果有?的话，webhref页面setData的url就会包含两个?了，这……这就需要用到encodeURIComponent和decodeURIComponent两个方法了。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。decodeURIComponent()可以进行对应的解码。

So，为了避免浏览器误解，我们在index页面执行跳转时，需要使用encodeURIComponent()将url进行转码，到webhref之后再用decodeURIComponent()进行解码。然后使用setData重置一下webhref页面地址就好了。就像这样：

// pages/index/index.jslet newurl = api.host+'/m/'+ pageurl;wx.navigateTo({  url: '../webhref/webhref?url=' + encodeURIComponent(newurl) + '&src=' + this.data.src + '&uid=' + this.data.uid});// pages/webhref/webhref.jslet newurl = decodeURIComponent(options.url);let params = (newurl.indexOf('?')!=-1 ? '&': '?') + options.src + '&uid=' + options.uidthis.setData({  url: newurl + params})

看到这里，可能有的小伙伴会说，为什么不把tourl和参数src/uid一起编码解码呢？那样不是更方便吗？

其实，如果只推广一个页面完全可以如此。但这里关联着我们另一个小需求，就是webhref页面也要做推广。所以，webhref页面接收options时，只需要获取url部分，然后拼接自身页面设置的参数src和uid，拼接成完整的推广链接。如果一起编码解码，options.url中就会包含index页面中的src和uid参数，增加url部分的分离难度。

说句俗话，行百里者半九十。果然如此。分析代码确认没问题了，但是webhref页面的数据入库情况依然有问题。

找了各种原因，最终发现，在设置启动参数时，小伙伴使用了编码后的url和编码前的src和uid，类似这种：url=https%3A%2F%2F100audio.com%2F%3Furl_targeting%3D1&src=111&uid=bbb。原来是自己挖的坑，还说啥呢？

所以，大家还需要注意：

设置启动参数时，url和后面的参数要保持编码的一致性。切记！

还是那句话，我们踩的不是坑，而是我们自己技术上的模糊点。每一个点踩实了，我们的技术能力才能得到切实的提高。和大家共勉~

原创不易，你的鼓励是我持续进步的动力，希望亲爱的们给一个在看或者小小的❤哟~ 

CC推荐· 加我微信(codenotes66)，进我的技术交流群· 关注我的公众号，做一个有趣的技术人………