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

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.调用

  1. 首页点击三个点分享
    请添加图片描述
    请添加图片描述

5.分享成功

UniApp是一种基于Vue.js的跨平台开发框架,可以用于同时开发iOS、Android和Web应用。要实现微信分享朋友圈,你可以按照以下步骤进行操作: 1. 在UniApp项目中安装并引入微信JSSDK,可以通过npm安装或者直接引入CDN链接。 2. 在项目的`main.js`文件中,使用`Vue.prototype`将微信JSSDK挂载到Vue实例上,以便在全局使用。 3. 在需要分享的页面中,调用微信JSSDK提供的接口进行分享配置分享操作。 具体的实现步骤如下: 1. 安装微信JSSDK: ``` npm install weixin-js-sdk ``` 2. 在`main.js`中引入并挂载微信JSSDK: ```javascript import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx ``` 3. 在需要分享的页面中,调用微信JSSDK提供的接口进行分享配置分享操作。例如,在`Share.vue`组件中: ```javascript export default { mounted() { this.wxConfig() }, methods: { wxConfig() { // 获取后端提供的微信配置信息 // 这里假设后端返回的配置信息为wxConfigData const wxConfigData = { appId: 'your_appId', timestamp: 'your_timestamp', nonceStr: 'your_nonceStr', signature: 'your_signature' } // 调用微信JSSDK的config方法进行配置 this.$wx.config({ debug: false, appId: wxConfigData.appId, timestamp: wxConfigData.timestamp, nonceStr: wxConfigData.nonceStr, signature: wxConfigData.signature, jsApiList: ['onMenuShareTimeline'] // 需要使用的接口列表 }) // 配置成功后,调用微信JSSDK的ready方法 this.$wx.ready(() => { // 在ready回调中进行分享操作 this.wxShareTimeline() }) }, wxShareTimeline() { // 调用微信JSSDK的onMenuShareTimeline方法进行分享朋友圈 this.$wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享图片链接', success: function () { // 分享成功的回调函数 console.log('分享成功') }, cancel: function () { // 取消分享的回调函数 console.log('取消分享') } }) } } } ``` 以上就是使用UniApp实现微信分享朋友圈的基本步骤。你可以根据自己的需求进行配置和定制化。如果有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

忧郁火龙果

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

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

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

打赏作者

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

抵扣说明:

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

余额充值