uniapp 分享例子做个记录

<template>
?? ?<view class="content">
?? ??? ?<view class="invite-wrapper" v-if="inviteUrl">
?? ??? ??? ?<uni-qrcode class="invite-qrcode" ref="qrcode" cid="invite-qr-canvas" :text="inviteUrl" :margin="10" makeOnLoad
?? ??? ??? ? @makeComplete="qrcodeComplete" />
?? ??? ??? ?<view class="share-btn">
?? ??? ??? ??? ?<button type="primary" @click="shareLink">分享链接</button>
?? ??? ??? ??? ?<button type="primary" @click="shareImage">分享图片</button>
?? ??? ??? ?</view>
?? ??? ??? ?<view class="share-btn">
?? ??? ??? ??? ?<button type="primary" @click="toInvitedUser">我邀请的用户</button>
?? ??? ??? ?</view>
?? ??? ??? ?<uni-popup id="popupShare" ref="popupShare" type="share">
?? ??? ??? ??? ?<uni-popup-share title="分享到" :shareType="shareType" @select="select"></uni-popup-share>
?? ??? ??? ?</uni-popup>
?? ??? ?</view>
?? ?</view>
</template>

<script>
?? ?import {
?? ??? ?mapState
?? ?} from 'vuex'
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?inviteUrl: '',
?? ??? ??? ??? ?qrcodeImagePath: '',
?? ??? ??? ??? ?qrcodePath: '',
?? ??? ??? ??? ?shareType: ''
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onLoad() {
?? ??? ??? ?uni.showLoading({
?? ??? ??? ??? ?title: '加载中...'
?? ??? ??? ?})
?? ??? ??? ?uniCloud.callFunction({
?? ??? ??? ??? ?name: 'user-center',
?? ??? ??? ??? ?data: {
?? ??? ??? ??? ??? ?action: 'getInviteCode'
?? ??? ??? ??? ?},
?? ??? ??? ??? ?success: (res) => {
?? ??? ??? ??? ??? ?console.log(res);
?? ??? ??? ??? ??? ?if (res.result.code === 0) {
?? ??? ??? ??? ??? ??? ?// 这里请修改为真实的邀请页面url
?? ??? ??? ??? ??? ??? ?this.inviteUrl = 'https://login.tpl.dcloud.net.cn/#/pages/invite-reg/invite-reg?invite_code=' + res.result.myInviteCode
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?uni.showModal({
?? ??? ??? ??? ??? ??? ??? ?content: '获取用户邀请码失败:' + res.result.msg,
?? ??? ??? ??? ??? ??? ??? ?showCancel: false
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?fail: (err) => {
?? ??? ??? ??? ??? ?uni.showModal({
?? ??? ??? ??? ??? ??? ?content: '获取用户邀请码失败，请稍后再试',
?? ??? ??? ??? ??? ??? ?showCancel: false
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?},
?? ??? ??? ??? ?complete() {
?? ??? ??? ??? ??? ?uni.hideLoading()
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?copyInviteUrl() {
?? ??? ??? ??? ?uni.setClipboardData({
?? ??? ??? ??? ??? ?data: this.inviteUrl
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?qrcodeComplete(path) {
?? ??? ??? ??? ?this.qrcodeImagePath = path
?? ??? ??? ?},
?? ??? ??? ?shareLink() {
?? ??? ??? ??? ?this.shareType = 'link'
?? ??? ??? ??? ?this.$refs.popupShare.open()
?? ??? ??? ?},
?? ??? ??? ?shareImage() {
?? ??? ??? ??? ?this.shareType = 'image'
?? ??? ??? ??? ?this.$refs.popupShare.open()
?? ??? ??? ?},
?? ??? ??? ?select({
?? ??? ??? ??? ?item
?? ??? ??? ?}) {
?? ??? ??? ??? ?const shareTitle = '登录模板',
?? ??? ??? ??? ??? ?shareSummary = 'DCloud邀请您试用登录模板'
?? ??? ??? ??? ?let params = {}
?? ??? ??? ??? ?switch (`${this.shareType}_${item.name}`) {
?? ??? ??? ??? ??? ?case 'link_weixin':
?? ??? ??? ??? ??? ??? ?params = {
?? ??? ??? ??? ??? ??? ??? ?type: 1,
?? ??? ??? ??? ??? ??? ??? ?summary: this.inviteUrl,
?? ??? ??? ??? ??? ??? ??? ?scene: 'WXSceneSession'
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case 'link_qq':
?? ??? ??? ??? ??? ??? ?params = {
?? ??? ??? ??? ??? ??? ??? ?type: 1,
?? ??? ??? ??? ??? ??? ??? ?title: shareTitle,
?? ??? ??? ??? ??? ??? ??? ?summary: shareSummary,
?? ??? ??? ??? ??? ??? ??? ?href: this.inviteUrl
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case 'link_more':
?? ??? ??? ??? ??? ??? ?uni.setClipboardData({
?? ??? ??? ??? ??? ??? ??? ?data: this.inviteUrl
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?return
?? ??? ??? ??? ??? ?case 'image_weixin':
?? ??? ??? ??? ??? ??? ?params = {
?? ??? ??? ??? ??? ??? ??? ?type: 2,
?? ??? ??? ??? ??? ??? ??? ?imageUrl: this.qrcodeImagePath,
?? ??? ??? ??? ??? ??? ??? ?scene: 'WXSceneSession'
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case 'image_qq':
?? ??? ??? ??? ??? ??? ?params = {
?? ??? ??? ??? ??? ??? ??? ?type: 2,
?? ??? ??? ??? ??? ??? ??? ?imageUrl: this.qrcodeImagePath
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case 'image_more':
?? ??? ??? ??? ??? ??? ?uni.shareWithSystem({
?? ??? ??? ??? ??? ??? ??? ?type: 'image',
?? ??? ??? ??? ??? ??? ??? ?imageUrl: this.qrcodeImagePath
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?return
?? ??? ??? ??? ??? ?default:
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?console.log(params);
?? ??? ??? ??? ?uni.share({
?? ??? ??? ??? ??? ?provider: item.name,
?? ??? ??? ??? ??? ?...params,
?? ??? ??? ??? ??? ?success() {
?? ??? ??? ??? ??? ??? ?uni.showModal({
?? ??? ??? ??? ??? ??? ??? ?content: '分享成功',
?? ??? ??? ??? ??? ??? ??? ?showCancel: false
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?fail(err) {
?? ??? ??? ??? ??? ??? ?uni.showModal({
?? ??? ??? ??? ??? ??? ??? ?content: '分享失败：' + err.errMsg,
?? ??? ??? ??? ??? ??? ??? ?showCancel: false
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})

?? ??? ??? ?},
?? ??? ??? ?toInvitedUser() {
?? ??? ??? ??? ?uni.navigateTo({
?? ??? ??? ??? ??? ?url: '/pages/invited-user/invited-user'
?? ??? ??? ??? ?})
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

<style>
?? ?.invite-wrapper {
?? ??? ?display: flex;
?? ??? ?padding: 20px;
?? ??? ?flex-direction: column;
?? ??? ?align-items: center;
?? ?}

?? ?.invite-qrcode {
?? ??? ?border-radius: 10px;
?? ??? ?box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 1px;
?? ??? ?overflow: hidden;
?? ?}

?? ?.share-btn {
?? ??? ?display: flex;
?? ??? ?flex-direction: row;
?? ??? ?padding: 20px 0px 10px 0px;
?? ?}

?? ?.share-btn button {
?? ??? ?flex: 1;
?? ??? ?margin: 0px 10px;
?? ??? ?border-radius: 40px;
?? ?}
</style>