1. 要件の説明:
このアプレットでは、サークル一覧ページをクリック→サークル詳細ページに入り、サークル詳細ページの共有ボタンをクリックして友達に送信します。友達が共有してページを開いたとき:
1. まずログインするかどうかを判断し、そうでない場合は、先去登录
2
. サークルに参加するかどうかを尋ねるポップアップ ウィンドウが表示され、[はい、電話します] をクリックし、申请加入圈子接口
2 秒後にサークル リスト ページにジャンプします。[
いいえ] をクリックして、サークルに直接ジャンプします。リストページ
注: 共有からアクセスした場合、
uni.redirectTo
詳細ページから一覧ページにジャンプするときに uni.navigateTo の代わりにこれを使用することをお勧めします。
理由
: 前のページに戻るために左上隅をクリックすると、uni.navigateTo () は現在のページを保持し、左上隅は、ホーム ページに入ることなく、常に詳細ページと一覧ページを切り替える矢印記号につながり、uni.redirectTo() は閉じます
。現在のページに移動し、アプリケーション内のページにジャンプします。左上隅はホームページのロゴで、直接ホームページに移動できます。
第二に、次のような効果が得られます。
3. コードの実装:
3.1 共有ボタン
//分享按钮
<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 すべてのコード
//分享按钮
<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>