1. Requirements description:
In this applet, click the circle list page -> enter the circle details page, click the button share button on the circle details page, and send it to your friends. When a friend opens the page by sharing:
1. First judge whether to log in, if not, 先去登录;
2. A pop-up window prompts whether to join the circle, click Yes, call 申请加入圈子接口, jump to the circle list page after 2 seconds;
click No, directly jump to the circle list page
Note: When you come in through sharing, it is recommended to use it
uni.redirectToinstead of uni.navigateTo when jumping from the details page to the list page.
Because
: when you click the upper left corner to return to the previous page, uni.navigateTo() will retain the current page, and the upper left corner is The arrow sign will lead to switching between the details page and the list page all the time, without the entrance of the home page;
and uni.redirectTo() is to close the current page and jump to a page in the application. The upper left corner is the home page house logo, which can be directly Go to the home page.
Second, the following is the effect achieved:
3. Code implementation:
3.1 Share button
//分享按钮
<button open-type="share" @share='onShareAppMessage' :data-share="true">
<image class="industrialPark_share" :src="localImgSrc('share.png')" mode=""></image>
</button>
//分享按钮
onShareAppMessage(e) {
// console.log(e, '点击了分享')
// 获取按钮传进来的参数 data 中的item值
let share = e.target.dataset.share // 获取的为 data 中定义的item值
this.isShare = e.target.dataset.share
console.log(share, '打印分享')
return {
// title: params.name,
// imageUrl: params.crest,
path: '/pages/circle/smallCircle?share=true' + '&id=' + this.id + '&bigid=' + this.bigid // 固定参数（小圈子id和大圈子id）
//此处传递share=true的目的是：可以在onload中接收到，从而判断是否是通过分享进来的。如果用不到，也可以不传。
}
},
3.2 All codes
//分享按钮
<button open-type="share" @share='onShareAppMessage' :data-share="true">
<image class="industrialPark_share" :src="localImgSrc('share.png')" mode=""></image>
</button>
<script>
export default {
data() {
return {
id: '', //小圈子id
bigid: '', //大圈子id
isjoin: false, //检测用户是否加入了该圈子。false 未加入 true 已加入
parent_id: '', //大圈子id
isShare: false, //ture是通过分享进来，false不是通过分享进来
}
},
onLoad(options) {
this.id = options.id; //小圈子id
this.bigid = options.bigid; //大圈子id
this.type = options.type;
},
onShow() {
this.isjoinFun() //检测用户是否加入该圈子
},
//分享按钮
onShareAppMessage(e) {
// console.log(e, '点击了分享')
// 获取按钮传进来的参数 data 中的item值
let share = e.target.dataset.share // 获取的为 data 中定义的item值
this.isShare = e.target.dataset.share
console.log(share, '打印分享')
return {
// title: params.name,
// imageUrl: params.crest,
path: '/pages/circle/smallCircle?share=true' + '&id=' + this.id + '&bigid=' + this.bigid // 固定参数（小圈子id和大圈子id）
//此处传递share=true的目的是：可以在onload中接收到，从而判断是否是通过分享进来的。如果用不到，也可以不传。
}
},
methods: {
//申请加入圈子-接口
addCircle(id) {
var that = this;
this.$api.appPlateForm('POST', this.$url.club_join_circle, {
circle_id: id, // 圈子id
}, function(res) {
if (res.code == '200') {
uni.showToast({
title: res.msg,
icon: 'none'
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
//检测用户是否加入该圈子-接口
isjoinFun() {
var that = this
this.$api.appPlateForm('POST', this.$url.is_join_circle, {
circle_id: this.id, //小圈子id
}, function(res) {
if (res.code == '200') {
that.isjoin = res.data.is_join //检测用户是否加入了该圈子。false 未加入 true 已加入
that.parent_id = res.data.parent_id //大圈子id
that.shareType = res.data.type //ture是通过分享进来，false不是通过分享进来
if (res.data.is_join == false) {
//如果用户未加入圈子，则显示一个加入圈子的确认弹窗，询问用户是否要加入该圈子。
uni.showModal({
title: '提示',
content: '是否加入该圈子',
success: (res) => {
if (res.confirm) {
//确定加入
console.log('用户点击确定');
//1调取申请加入的接口
that.addCircle(that.id)
//2 返回圈子列表
setTimeout(() => {
uni.redirectTo({
url: '/pages/circle/club?id=' +that.parent_id
})
}, 1500)
} else if (res.cancel) {
//取消加入-返回圈子列表
console.log('用户点击取消');
uni.redirectTo({
url: '/pages/circle/club?id=' +that.parent_id
})
}
}
});
}
}
})
},
}
}
</script>