uniapp vue3使用uni-share

<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>

如图, 注意包的位置

猜你喜欢

转载自blog.csdn.net/Motion_zq/article/details/126955436
今日推荐