UNIAPP 微信小程序实现分享功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了UNIAPP 微信小程序实现分享功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

默认情况下点击微信小程序调试器无法实现分享功能，如下图

uniapp微信小程序分享功能,uni-app

此时需要设置如下操作，个人默认习惯是在 utils文件下创建 share.js 文件并写入代码内容如下

export default {
	// 分享好友
	onShareAppMessage(e) {
		
	},
	// 分享到朋友圈
	onShareTimeline: function(res) {
		
	},
	// 收藏
	onAddToFavorites: function(res) {
		
	}
}

然后打开main.js 修改如下


import share from "./utils/share.js"//文件位置看具体目录
Vue.mixin(share)


const app = new Vue({
	...App,
	share
})

设置完成后再点击右上角的分享就打开了

uniapp微信小程序分享功能,uni-app

回到组件内如果需要通过按钮实现分享功能参考如下

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

默认情况下分享之后只展示项目名称如果需要更改可参考如下修改 share.js的代码

export default {
	// 分享好友
	onShareAppMessage(e) {
		console.log(e);
//区分是button 页面按钮点击的分享还是 右上角三个点 menu点击的分享
		if (e.from === 'button') {
			return {
				title: 'button分享首页share',//分享标题
				imageUrl: '/static/logo.png',//分享图片
				path: '/pages/home/home'
			}
		}Ï
		if (e.from === 'menu') {
			return {
				title: 'menu分享首页share',
				imageUrl: '/static/logo.png',
				path: '/pages/home/home'
			}
		}
	},
	// 分享到朋友圈
	onShareTimeline: function(res) {
		return {
			title: '分享给朋友的标题',
			imageUrl: '/static/logo.png',
			query: ''
		}
	},
	// 收藏
	onAddToFavorites: function(res) {
		return {
			title: '微信收藏上的标题',
			imageUrl: '/static/logo.png',
			query: '',
		}
	}
}