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

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

第一种解决方法

分享出去的页面是首页地址,但是会带上二级页面的标识,这样用户点击分享卡片的时候首先进入的是首页,然后在首页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

<view class="share-img-box">
            <image src="../../static/home/share.png" style="width: 38upx;height: 38upx;" mode=""></image>
            <button open-type="share" bindcontact="handleContact" class="openChat"></button>
          </view>

分享页面 分享方法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 在此我就不做更多的代码实现了,主要的功能和第一种方法都是一样的.

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值