最近在写小程序,遇到了一个分享的问题,分享后的界面是二级页面,用户通过点击分享页面进入小程序后,无法回到首页,只能通过右上角的三个点通过设置,重新加载小程序,很不友好,在此给大家提供几种解决方案.
第一种解决方法
分享出去的页面是首页地址,但是会带上二级页面的标识,这样用户点击分享卡片的时候首先进入的是首页,然后在首页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 在此我就不做更多的代码实现了,主要的功能和第一种方法都是一样的.