uniapp vue3使用uni-share

本文介绍如何在uni-app中实现自定义分享功能,包括设置分享内容和菜单、使用uni-share SDK进行分享操作等。通过代码示例展示了如何配置分享参数、定义分享菜单项以及处理分享回调。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template>
    <view class="nav-bar">
        <view @click="uniShare">分享</view>
    </view>
</template>

<script setup lang="ts">
import { onBackPress } from '@dcloudio/uni-app'
import { nextTick } from 'vue'

import UniShar from './unishare/js_sdk/uni-share'
const uniShareStr = new UniShar()
onBackPress(({ from }) => {
    console.log('查看from', from)
    if (from == 'backbutton') {
        nextTick(function () {
            uniShareStr.hide()
        })
        return uniShareStr.isShow
    }
})
const uniShare = () => {
    uniShareStr.show(
        {
            content: {
                //公共的分享参数配置  类型(type)、链接(herf)、标题(title)、summary(描述)、imageUrl(缩略图)
                type: 0,
                href: 'https://uniapp.dcloud.io/',
                title: '标题',
                summary: '描述',
                imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
            },
            menus: [
                {
                    img: '/static/app-plus/sharemenu/wechatfriend.png',
                    text: '微信好友',
                    share: {
                        //当前项的分享参数配置。可覆盖公共的配置如下:分享到微信小程序,配置了type=5
                        provider: 'weixin',
                        scene: 'WXSceneSession'
                    }
                },
                {
                    img: '/static/app-plus/sharemenu/wechatmoments.png',
                    text: '微信朋友圈',
                    share: {
                        provider: 'weixin',
                        scene: 'WXSceneTimeline'
                    }
                },
                {
                    img: '/static/app-plus/sharemenu/mp_weixin.png',
                    text: '微信小程序',
                    share: {
                        provider: 'weixin',
                        scene: 'WXSceneSession',
                        type: 5,
                        miniProgram: {
                            id: '123',
                            path: '/pages/list/detail',
                            webUrl: '/#/pages/list/detail',
                            type: 0
                        }
                    }
                },
                {
                    img: '/static/app-plus/sharemenu/weibo.png',
                    text: '微博',
                    share: {
                        provider: 'sinaweibo'
                    }
                },
                {
                    img: '/static/app-plus/sharemenu/qq.png',
                    text: 'QQ',
                    share: {
                        provider: 'qq'
                    }
                },
                {
                    img: '/static/app-plus/sharemenu/copyurl.png',
                    text: '复制',
                    share: 'copyurl'
                },
                {
                    img: '/static/app-plus/sharemenu/more.png',
                    text: '更多',
                    share: 'shareSystem'
                }
            ],
            cancelText: '取消分享'
        },
        (e) => {
            //callback
            console.log('查看返回值95', uniShareStr.isShow)
            console.log('查看返回值96', e)
        }
    )
}
</script>

<style lang="stylus" scoped>
.nav-bar{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999999
    color:red
}
</style>

如图, 注意包的位置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Motion_zq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值