uniapp微信小程序分享后，点击进入分享页面无法回到首页

谁借莪１个温暖的怀抱￠ 2021-07-25 16:21 1505阅读 0赞

最近在写小程序,遇到了一个分享的问题,分享后的界面是二级页面,用户通过点击分享页面进入小程序后,无法回到首页,只能通过右上角的三个点通过设置,重新加载小程序,很不友好,在此给大家提供几种解决方案.

## 第一种解决方法 ##

分享出去的页面是首页地址,但是会带上二级页面的标识,这样用户点击分享卡片的时候首先进入的是首页,然后在首页onLoad事件中监听标识跳转到想要分享的页面,这样就可以解决分享无法回到首页的问题.  
代码如下:

**首页监听**

//这是我首页进行监听的
       onLoad(e) { 
          console.log('我是首页')
          if (e.lou == 1) { 
            this.$urouter.navigateTo({ 
              url: '/pagesA/home/article-details',
              params: { 
                id: e.id, //详情id
                type: e.type, //详情类型 1通知 2是图文文章 3是视频
              }
            });
          } else if(e.lou == 2){ 
            this.$urouter.navigateTo({ 
              url: '/pagesA/home/video-detail',
              params: { 
                id: e.id, //详情id
              }
            });
          }
        },

**分享页面按钮html**

**分享页面 分享方法js**  
我在分享出去的地址是首页,在最后携带的值是自定义的 lou 用来区分需要跳转的分享页,这两段代码是和onLoad同级的.

//分享给好友
     onShareAppMessage(res) { 
          return { 
            title: '欢迎浏览',
            path: '/pages/home/home?type=' + this.type + '&id=' + this.id + '&source=' + this.source + '&lou=1',
            imageUrl: this.particulars.coverUrl
          }
        },
        //分享到朋友圈
        onShareTimeline() { 
          return { 
            title: '欢迎浏览',
            path: '/pages/home/home?type=' + this.type + '&id=' + this.id + '&source=' + this.source + '&lou=1',
            imageUrl: this.particulars.coverUrl
          }
        },

**分享这块代码是不需要在button按钮中进行绑定的**,只有你的**button 按钮有open-type="share"这个属性**是会自动调用的,分享朋友圈的话需要点击下程序右上角药丸按钮的三个点进行分享.

**分享按钮css**

.share-img-box { 
              width: 38upx;
              height: 38upx;
              position: relative; .openChat { 
                top: 0;
                left: 0;
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                z-index: 999;
              }
            }

## 第二种方案 ##

大家可以自定义分享界面的头部导航,在返回按钮处加上home 按钮,这样用户可以点击home按钮回到首页, 近一步优化的话,可以在分页路径上带上标识,这样可以判断当前界面是通过分享进入的还是通过,正常路径跳转进入的,可以选择性展示左上角的 home 按钮 .  
自定义导航栏的,大家可以参考引入 uview 在此我就不做更多的代码实现了,主要的功能和第一种方法都是一样的.