封装了一个组件
<template>
<view
class="maskBody"
v-if="isShow"
@click="isShow = false"
:style="{ zIndex: zIndex }"
>
<view class="buttonArea" @click.stop="noAct">
<view class="item" v-if="shareWith.weixin" @click="share('friend')">
<image src="@/static/share/wx.png" mode="widthFix"></image>
<text>微信好友</text>
</view>
<view class="item" v-if="shareWith.weixin" @click="share('line')">
<image src="@/static/share/pyq.png" mode="widthFix"></image>
<text>微信朋友圈</text>
</view>
<view class="item" v-if="shareWith.qq" @click="share('qq')">
<image src="@/static/share/qq.png" mode="widthFix"></image>
<text>QQ</text>
</view>
<view class="item" v-if="shareWith.sinaweibo" @click="share('weibo')">
<image src="@/static/share/wb.png" mode="widthFix"></image>
<text>微博</text>
</view>
<!-- <view class="item" v-if="shareWith.withSys" @click="share('sys')">
<image src="@/static/mark-simpleshare/more.png" mode="widthFix" ></image>
<text>分享至..</text>
</view> -->
</view>
<view class="close"> 取消 </view>
</view>
</template>
<script>
let shareOption = {}
export default {
data() {
return {
isShow: false,
shareWith: {
sinaweibo: false,
qq: false,
weixin: false,
withSys: false
}
}
},
props: {
zIndex: {
type: Number,
default: 1000
}
},
created() {
const that = this
// #ifdef APP-PLUS
this.shareWith.withSys = true
uni.getProvider({
service: 'share',
success: function (res) {
console.log(res)
if (~res.provider.indexOf('qq')) that.shareWith.qq = true
if (~res.provider.indexOf('sinaweibo')) {
that.shareWith.sinaweibo = true
}
if (~res.provider.indexOf('weixin')) that.shareWith.weixin = true
}
})
// #endif
},
methods: {
noAct() {},
show(title, summary, href, imageUrl, id, path, type) {
shareOption = {
title: typeof title === 'undefined' ? '' : title,
summary: typeof summary === 'undefined' ? '' : summary,
href: typeof href === 'undefined' ? '' : href,
imageUrl: typeof imageUrl === 'undefined' ? '' : imageUrl,
miniProgram:
typeof id === 'undefined'
? {}
: {
id: id,
path: path,
type: typeof type === 'undefined' ? 0 : type,
webUrl: typeof href === 'undefined' ? '' : href
}
}
this.isShow = true
},
shareFail(res) {
console.log('res1', res)
if (res.errCode == -8 || res.errCode == -3) {
uni.showToast({
icon: 'none',
title: '未安裝客戶端'
})
} else {
uni.showToast({
icon: 'none',
title: 'JSON.stringify(err)'
})
}
},
_swx(scene) {
const that = this
if (
(shareOption.title != '' || shareOption.summary != '') &&
shareOption.href != '' &&
shareOption.imageUrl != ''
) {
uni.share({
provider: 'weixin',
scene: scene,
type: 0,
href: shareOption.href,
title: shareOption.title,
summary: shareOption.summary,
imageUrl: shareOption.imageUrl,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
} else {
if (shareOption.title != '') {
uni.share({
provider: 'weixin',
scene: scene,
type: 1,
summary: shareOption.title,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
} else if (shareOption.imageUrl != '') {
uni.share({
provider: 'weixin',
scene: scene,
type: 2,
imageUrl: shareOption.imageUrl,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
}
}
},
share(way) {
const that = this
console.log(shareOption.miniProgram)
if (way == 'friend') {
this._swx('WXSceneSession')
} else if (way == 'line') {
this._swx('WXSenceTimeline')
} else if (way == 'mp') {
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
title: shareOption.title,
type: 5,
imageUrl: shareOption.imageUrl,
miniProgram: shareOption.miniProgram,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
} else if (way == 'weibo') {
uni.share({
provider: 'sinaweibo',
type: 0,
href: shareOption.href,
title: shareOption.title,
summary: shareOption.summary,
imageUrl: shareOption.imageUrl,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
} else if (way == 'qq') {
if (shareOption.title != '') {
uni.share({
provider: 'qq',
type: 1,
href: shareOption.href,
title: shareOption.title,
summary: shareOption.title,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
} else if (shareOption.imageUrl != '') {
uni.share({
provider: 'qq',
type: 2,
href: shareOption.href,
title: shareOption.title,
imageUrl: shareOption.imageUrl,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
}
} else {
uni.shareWithSystem({
href: shareOption.href,
type: 'text',
summary: shareOption.title,
imageUrl: shareOption.imageUrl,
success: () => {
that.isShow = false
},
fail: this.shareFail
})
}
}
}
}
</script>
<style lang="scss">
.maskBody {
position: fixed;
display: flex;
flex-direction: column;
justify-content: flex-end;
top: 0;
width: 100%;
height: 100vh;
z-index: 1000;
background-color: rgba(59, 59, 59, 0.8);
.buttonArea {
position: relative;
background-color: #ffffff;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
margin: 0 2.5%;
margin-bottom: 28rpx;
width: 95%;
border-radius: 15rpx;
padding: 45rpx;
box-sizing: border-box;
.item {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 84rpx;
margin-bottom: 10rpx;
}
text {
font-size: 12px;
}
}
}
.close {
background: #fff;
margin: 0 2.5%;
margin-bottom: 48rpx;
width: 95%;
border-radius: 15rpx;
padding: 35rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
调用
<share ref="simpleShare" :zIndxe="9999"></share>
onNavigationBarButtonTap(e) {
// this.show = true
this.$refs.simpleShare.show(
'分享標題',
'分享描述',
'https://www.baidu.com/圖片地址',
'gh_12345',
'/pages/xxxx',
0
)
},