当微信公众号分享了一个小程序的子页面,比如专题页面或者商品详情页面;

或者将商品详情页面直接分享给微信好友,用户看到后直接点击进去,我们发现小程序左上角的返回按钮消失了,如图:

原因是,分享出去的子页面,链接类似为 /pages/goods/detail?id=xxx ,用户点击后,直接进入当前模板,页面不存在路由信息,没有上级页面路由,所以不显示返回按钮;

有两种解决方法,推荐方法二;

解决方法一:在详情页模板及专题页模板中,加入检测方法,如果页面栈长度 <=1,则证明该页面是直接进入的,否则就是正常从小程序首页进入的,当页面是直接进入的情况,只能在页面左上角手动添加一个首页的样式,并显示出来;

先看JS代码:

  checkPageRoute:function(){
    let that = this;
    let pages = getCurrentPages();  //获取页面栈
    let length = pages.length;
    if(length <= 1){//用户从公众号等渠道直接点击进入,显示返回按钮
      that.setData({
        backHome:true,
      });
    }
  },

wxml部分代码为:

<!-- 返回首页按钮 -->
<view class="backHome" catchtap="backHome" wx:if="{{backHome}}">
  <image mode="widthFix" src="/static/images/common/index-s.png"></image>
</view>

当检测到页面栈<=1时,显示首页按钮;


原理是判断页面栈,将以上方法中的 pages打印出来:

可以看出,如果小程序是从首页正常进入,再点击专题页面或详情页,那么就会有2个页面栈,1个是首页,一个是专题页面,那么根据页面栈的长度就能判断小程序的进入方式。

解决方法二:适用于子页面直接分享出去的情况,例如用户A将某个商品详情页面分享给用户B,在A分享的时候,有一个方法,当别人打开该分享页的时候,先跳转到小程序首页,再二次跳转到商品详情页,整个过程很快,肉眼几乎无法感知,这样一来,就算是子页面,也存在着上级页面路由,返回按钮能正常显示;

这是子页面的JS代码:

  onShareAppMessage: function() {
    return {
      title: this.data.goods.title,
      path: '/pages/index/index?isShare=goodsDetail&id=' + this.data.options.id,
    }
  },

可以看出path指向小程序首页,并且URL中有两个参数,isShare与当前商品的id

此时再到小程序首页的js中,onLoad时做一个判断:

  /**
   * onLoad
   */
  onLoad: function (option) {

    if (option.isShare == 'goodsDetail') {
      wx.navigateTo({
        url: '/pages/goods/detail/index?id=' + option.id,
      });
    }

  },

当小程序的首页加载时,如果存在isShare参数,并且它的值为‘goodsDetail’,那么就直接跳转到id为XXX的商品详情页

总结:

方法一适用于公众号等直接给了小程序链接,可点击进入的情况;

方法二适用于用户间互相分享某些页面的情况;

以上两种方法都能直接提升用户体验,避免分享出去的页面没有任何返回按钮造成用户困扰,细节与用户体验非常重要,决定了一款产品的质量。