uniapp 微信小程序中实现“发送给朋友”和“分享到朋友圈”

最新推荐文章于 2025-04-11 16:19:14 发布

MonkeyBananas

最新推荐文章于 2025-04-11 16:19:14 发布

阅读量2.3k

点赞数

文章标签： uni-app 微信小程序 javascript

本文链接：https://blog.csdn.net/MonkeyBananas/article/details/130603879

版权

该文章介绍如何在Vue项目中创建一个JS文件来统一管理分享到朋友和朋友圈的功能。通过在main.js中引入并使用Vue.mixin，可以确保每个页面都有分享按钮。在各个页面的data中，可以定制各自的分享参数，如标题、路径和图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先新建一个js文件，内容如下：

//全局点亮所有页面的 '分享给朋友' 和 '分享到朋友圈'
export default {
	data() {
		return {
			//设置默认的分享参数
			share: {
				//转发标题
				title: '',
				//转发路径
				path: '',
				//自定义图片路径
				imageUrl: '',
				//自定义页面路径中携带的参数
				query: ''
			}
		}
	},
	//分享给朋友
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log(res)
			},
			fail(res) {
				console.log(res)
			}
		}
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.share.title,
			query: this.share.query,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log(res)
			},
			fail(res) {
				console.log(res)
			}
		}
	}
}

在main.js中引入

import MyShare from '@/common/myShare.js'//此处为上面的js文件
Vue.mixin(MyShare)

完成上面两步后，每个页面都会有分享按钮了，在页面的 data 里面可以单独设置参数了

export default {
data(){
        return { //设置默认的分享参数
            share:{
                title:'自定义标题',
                path:'转发路径',
                imageUrl:'自定义图片路径'
            }
        }
    }
}

效果图如下