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

#uniapp微信小程序分享后，点击进入分享页面无法回到首页| 来源: 网络整理| 查看: 265

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

第一种解决方法

分享出去的页面是首页地址,但是会带上二级页面的标识,这样用户点击分享卡片的时候首先进入的是首页,然后在首页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 在此我就不做更多的代码实现了,主要的功能和第一种方法都是一样的.

【本文地址】

公司简介

联系我们