uniapp 小程序分享功能

作者: gavin 分类: uniapp 发布时间: 2022-02-17 12:14

上个月在做小程序的项目时,甲方需要给小程序添加个分享的功能,查看uniapp官方文档后,发现uniapp有自带的小程序分享功能(https://uniapp.dcloud.io/api/plugins/share),里面一堆的参数介绍,你们自己看看吧。我这里就自己封装了一个,哪个页面需要就在哪个页面调用

1、创建一个js文件(share.js)

export default{
    data(){
        return {
            //设置默认的分享参数
            share:{
                title:'ALAPI',
                path:'/pages/index/index',
                imageUrl:'',
                desc:'',
                content:''
            }
        }
    },
    onShareAppMessage(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失败',
                    icon:'none'
                })
            }
        }
    }
}

2、全局使用, 在 main.js 里面 添加全局的 mixin

import share from '@/....你的路径.../share.js'
Vue.mixin(share)

3、在需要的页面进行分享配置

export default {
data(){
        return {
                       //设置默认的分享参数
            share:{
                title:'ALAPI',
                path:'/pages/index/index',
                imageUrl:'',
                desc:'',
                content:''
            }
        }
    },

4、页面调用

<button open-type="share">分享</button>

参考:https://www.jianshu.com/p/7fdbe0e44ffc