uni.app 使用 mixins 技术统一注入小程序页面分享到好友,分享朋友圈功能

文章介绍了如何在uni.app中使用mixins技术统一管理并注入小程序页面的分享功能,包括设置默认全局分享内容以及在特定页面个性化配置,覆盖好友和朋友圈分享。
摘要由CSDN通过智能技术生成

uni.app 使用 mixins 技术统一注入小程序页面分享到好友,分享朋友圈功能

1. 在utils文件夹下创建share.js

export default{
    data(){
        return {
		   // 默认全局分享内容
            mixinsShare:{
                title:'首页',  //分享标题
                path:'/pages/index/index', // 分享路径
                imageUrl:'',    //分享图片
                desc:'',  //描述
                content:''  //内容
            }
        }
    },

	//分享好友
    onShareAppMessage(res) {
		//不传路径 则默认获取当前路径及附带参数
		if(!this.mixinsShare.path){
			this.mixinsShare.path=getCurrentPages()[0].$page.fullPath
		}
        return {
            title:this.mixinsShare.title,
            path:this.mixinsShare.path,
            imageUrl:this.mixinsShare.imageUrl,
            desc:this.mixinsShare.desc,
            content:this.mixinsShare.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失败',
                    icon:'none'
                })
            }
        }
    },
	// 分享朋友圈
	onShareTimeline(res) {
		//不传路径 则默认获取当前路径及附带参数
		if(!this.mixinsShare.path){
			this.mixinsShare.path=getCurrentPages()[0].$page.fullPath
		}
	    return {
	        title:this.mixinsShare.title,
	        path:this.mixinsShare.path,
	        imageUrl:this.mixinsShare.imageUrl,
	        desc:this.mixinsShare.desc,
	        content:this.mixinsShare.content,
	        success(res){
	            uni.showToast({
	                title:'分享成功'
	            })
	        },
	        fail(res){
	            uni.showToast({
	                title:'分享失败',
	                icon:'none'
	            })
	        }
	    }
	}
}

2. 为所有页面挂载

  • main.js中引入
import share from "./utils/share.js"//全局分享小程序
Vue.mixin(share)

3.单独页面使用

//引入
import share from "@/utils/share.js"//全局分享小程序
export default {
		mixins:[share],
		data() {
			return {
			    //这里是分享跳转的连接(会替换share.js中的mixinsShare
				mixinsShare: {
					title: '首页',
					path: 'pages/index/index',
					desc: '描述',
					content: '内容',
					imageUrl:'',    //分享图片
				},
			}
		}
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Gik99

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

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

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

打赏作者

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

抵扣说明:

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

余额充值