项目场景:
目前遇到个需求,就是创建预定数据后,向用户下发短信,短信链接打开后有个分享功能,需要分享给微信好友,进行用户裂变
<div class="share" @click="share">
<svg class="share_svg">
<image xlink:href="../../assets/images/share.svg" />
</svg>
<p>分 享</p>
</div>
methods:{
// 分享按钮
share() {
console.log('分享')
getRandomCode().then(res => {
if (res) {
let thisName = encodeURI(this.thisPersonName, 'utf-8')
this.shareUrlLink = `${
process.env.VUE_APP_IMEETDOMAIN}/#/meetForm?thisPersonName=${
thisName}`
setTimeout(() => {
this.nativeShareFun()
}, 100)
} else {
this.nativeShareFun()
}
})
},
nativeShareFun() {
var nativeShare = new NativeShare()
console.log('----------', nativeShare)
var shareData = {
title: 'i+',
desc: '诚邀您!',
icon: 'https://www.baidu.com/M.png',
link: this.shareUrlLink,
// 不要过于依赖以下两个回调,很多浏览器是不支持的
success: function success() {
console.log('--success---')
},
fail: function fail() {
console.log('--fail---')
this.sharePopupShow = true
}
}
console.log('-----调起分享link数据', this.shareUrlLink)
nativeShare.setShareData(shareData)
try {
console.log('准备进入call方法')
nativeShare.call()
console.log('调起call')
} catch (err) {
// 如果不支持,你可以在这里做降级处理
// alert("当前游览器不支持");
console.log('未成功调起call')
this.sharePopupShow = true
}
},
reload() {
console.log('11#')
this.fetchQRCode()
},
// 未调起微信分享面板,则进行链接复制,然后唤醒微信
copy_url(value) {
var textarea = document.createElement('textarea')
var currentFocus = document.activeElement
document.body.appendChild(textarea)
textarea.value = value
textarea.focus()
if (textarea.setSelectionRange) {
textarea.setSelectionRange(0, textarea.value.length)
} else {
textarea.select()
}
try {
var state = document.execCommand('copy')
} catch (err) {
state = false
}
document.body.removeChild(textarea)
currentFocus.focus() //大佬原版存在聚焦方法,不知其意,注之仍行
// alert(state ? '链接复制成功' : '链接复制失败')
if (state) return this.$toast('复制成功!')
},
shareUrl() {
this.copy_url(this.shareUrlLink)
try {
window.top.location.replace('weixin://') // 唤醒微信
this.sharePopupShow = false
} catch (err) {
// 如果不支持,你可以在这里做降级处理
alert('您的浏览器不支持该分享功能,请手动复制链接!')
}
}
}