uniapp小程序中onShareAppMessage实现带参数的分享及全局分享(根据不同页面返回不同的转发信息)
·
小程序中分享功能需要在button组件中添加open-type:“share”,当点击button的时候就会调用onShareAppMessage函数。
1、自定义按钮实现分享,在页面中使用按钮来实现分享功能
//必须是按钮中添加 open-type="share"
<button open-type="share" class="pic_r3">
<text class="tit">人员自助入场</text>
</button>
2、js文件中分享的方法
//分享---this.shareId就是要传的参数
onShareAppMessage(e) {
let shareobj = {
title: '人员自助入场', //分享的标题
path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
//path: '/pages/admission/admission?shareId=' + encodeURIComponent(JSON.stringify(this.shareId)), //如果传的参数是对像或者数组
encodeURIComponent(JSON.stringify(item))
//imageUrl: "https://****.com/banner.jpg", //分享的图片 支持PNG及JPG。显示图片长宽比是 5:4。
imageUrl: this.shareImg, //内容图片
}
return shareobj //一定要返回对象
},
ps:分享的中用的imageUrl是静态地址,如上面,方法如下
<script>
export default {
data() {
return {
shareImg: require("@/static/img/pic-ry9.jpg"),
}
}
}
</script>
3、获取分享的参数
进入分享页面, 通过onLoad(e)中的e来查看传递过来的参数:
onLoad(e) {
this.shareId = e.shareId //这就是我们从分享按钮传过来的参数
},
4、小程序的原生菜单中隐藏分享按钮
在js文件中onLoad方法中加入下面代码,就可关闭左上角三个点中的分享按钮
uni.hideShareMenu()
5、小程序 分享卡片 禁止个人及群聊二次转发
在onShareAppMessage方法中 加uni.showShareMenu和 wx.updateShareMenu这两个方法
//分享---this.shareId就是要传的参数
onShareAppMessage(e) {
//禁止二次转发--
uni.showShareMenu({
withShareTicket: true
});
wx.updateShareMenu({
isPrivateMessage: true,
withShareTicket: true,
success(res) {
console.log('updateShareMenu: ', res);
},
fail() {}
}); //禁止二次转发--end
let shareobj = {
title: '人员自助入场', //分享的标题
path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
//imageUrl: "https://****.com/banner.jpg", //分享的图片 支持PNG及JPG。显示图片长宽比是 5:4。
imageUrl: this.shareImg, //内容图片
}
return shareobj //一定要返回对象
},
6、uniapp全局分享onShareAppMessage方法(新增)
编写全局通用分享方法,实现根据不同页面返回不同的转发信息
//通用分享JS
export default {
data() {
return {
//设置默认的分享参数
share: {
title: '某某平台',
imageUrl: '',
desc: '提高安全技能',
content: ''
}
}
},
onShareAppMessage(res) {
//实现根据不同页面返回不同的转发信息
let pages = getCurrentPages();
let routerUrl = pages[0].route //获取当前页的路径
return {
title: this.share.title,
path: '/' + routerUrl, // 路径前面必须要加'/'
imageUrl: this.share.imageUrl,
desc: this.share.desc,
content: this.share.content,
success(res) {
uni.showToast({
title: '分享成功'
})
},
fail(res) {
uni.showToast({
title: '分享失败',
icon: 'none'
})
}
}
},
onShareTimeline() {},
}
在main.js中调用
//分享---在main.js中调用
import share from './utils/share.js'
Vue.mixin(share)
更多推荐
已为社区贡献2条内容
所有评论(0)