您的当前位置:首页正文

uniapp小程序全局配置分享到朋友和朋友圈功能的实现

2024-10-31 来源:个人技术集锦

1.创建/mixins/share.js插件

2.全局配置

(1)找到main.js在下面引入share.js文件
(2)使用mixins混入vue中,这样就相当于在每一个vue页面中都可以使用分享功能

// 全局引用分享功能
import share from '@/mixins/share.js'
Vue.mixin(share)

3.编写share.js

import {
	host,
	baseUrl
} from "../config/config"
export default {
	// 生成分享记录
	// 分享给好友
	onShareAppMessage(res) {
		let shareData = this
		console.log(shareData, '分享给好友');
		let userInfo = uni.getStorageSync('userInfo')
		if (res.from === 'button') { // 来自页面内分享按钮
			let shareRecordData = {
				share_art_name: shareData.art,
				share_art_id: shareData.id,
				share_user: userInfo.nickname,
				share_user_id: userInfo.id
			}
			// uni.request({
			// 	url:host+'/wx/share_record',
			// 	method:'POST',
			// 	data:shareRecordData,
			// 	success:(res)=>{
			// 		console.log('分享成功',res,res.data.shareListId);
			// 	}
			// })
			return {
				title: shareData.art,
				path: `/sub_intake/artDetail/artDetail?id=${shareData.id}&&shareUserId=${userInfo.id}`,
				mpId: 'wxace5c31fa7433184',
				// success:(sres)=>{//为了防止诱导分享,腾讯所有的分享都不提供分享成功回调
				// 	console.log('转发成功');
				// }
			}
		} else { // 来自首页分享按钮
			return {
				title: '源码网',
				path: `/pages/hote_case/hote_case?shareUserId=${userInfo.id}`,
				mpId: 'wxace5c31fa7433184',
				imageUrl: baseUrl + '2024-08-05971f15e2.png'
				// 为了防止诱导分享,腾讯所有的分享都不提供分享成功回调
				// success:(sres)=>{
				// 	console.log('转发成功');
				// }
			}
		}

	},
	// 分享到朋友圈
	onShareTimeline(res) {
		let shareData = this
		let userInfo = uni.getStorageSync('userInfo')
		console.log('分享朋友圈', userInfo);
		return {
			title: '我正在使用张三丰源码网,快来使用吧!', //分享的标题
			query: '/pages/hote_case/hote_case?shareUserId=${userInfo.id}', //点击分享链接之后进入的页面路径
			imageUrl: baseUrl + '2024-08-05971f15e2.png' //分享发送的链接图片地址
		}
	}
}

4.调用

5.分享成功

Top