uniapp vue3使用uni-share

最新推荐文章于 2025-06-10 08:45:36 发布

原创最新推荐文章于 2025-06-10 08:45:36 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #javascript

本文介绍如何在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>

如图, 注意包的位置