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>

如图, 注意包的位置

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中,可以使用uniapp提供的onShareAppMessage方法来添加分享功能,并且可以在分享弹窗中添加自定义按钮。 首先,在组件中添加onShareAppMessage方法,该方法会返回一个对象,用于配置分享信息。例如: ``` export default { methods: { onShareAppMessage() { return { title: '分享标题', path: '/pages/index/index', imageUrl: 'https://example.com/share.jpg', success: function(res) { console.log('分享成功', res) } } } } } ``` 其中,title为分享标题,path为分享路径,imageUrl为分享图片的链接,success为分享成功后的回调函数。 接着,在模板中添加一个自定义按钮,并绑定一个点击事件: ``` <template> <view> <button @tap="onCustomShare">自定义分享</button> </view> </template> ``` 最后,在onCustomShare方法中调用uniapp提供的showShareMenu方法,打开分享弹窗,并且可以在弹窗中添加自定义按钮。例如: ``` export default { methods: { onCustomShare() { uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'], success: function() { uni.onShareAppMessage(function() { return { title: '分享标题', path: '/pages/index/index', imageUrl: 'https://example.com/share.jpg', success: function(res) { console.log('分享成功', res) } } }) uni.onShareTimeline(function() { console.log('分享到朋友圈') }) uni.addShareButton({ title: '自定义按钮', imageUrl: 'https://example.com/share-button.jpg', success: function(res) { console.log('自定义分享按钮点击', res) } }) } }) } } } ``` 其中,withShareTicket表示是否开启分享到群的功能,menus表示分享弹窗中显示的按钮,uni.onShareAppMessage和uni.onShareTimeline分别用于配置分享到好友和分享到朋友圈的信息,uni.addShareButton用于添加自定义分享按钮。 总结起来,使用uniapp的onShareAppMessage方法可以方便地在Vue3中添加分享功能,并且还可以自定义分享弹窗中的按钮。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Motion_zq

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

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

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

打赏作者

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

抵扣说明:

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

余额充值