uniapp开发H5，分享链接到微信好友，显示标题和缩略图

技术分享 3年前 (2023-08-06) 0 1k

本文档介绍了如何在UniApp开发中实现将链接分享到微信好友，并确保在分享时显示标题和缩略图的方法。

背景

第一次用uniapp开发H5页面，发现分享给微信好友的链接，不显示标题和缩略图

步骤一：安装插件

首先，在项目根目录下的命令行中执行以下命令：

npm install weixin-js-sdk

这将在您的项目中添加weixin-js-sdk插件。

步骤二：配置AppID

在使用微信分享功能之前，您需要配置您的AppID，timestamp，nonceStr，signature

步骤三：编写分享代码

接下来，在您想要触发分享操作的页面或组件中，添加一个按钮或其他交互元素，并为其绑定一个点击事件。例如，在某个按钮的点击事件中，可以使用以下代码来触发分享操作：

import wx from 'weixin-js-sdk' import requestUtils from '@/http/request.js'  import requsetApi from '@/api/home'  // 发起获取signature请求 function getSignature() {  	var url = window.location.origin + '/' 	requsetApi.signature({ 		url 	}).then(res => { 		if (res.code === 200) { 			setShare(res.data) 		} 	}) } // 设置分享数据 function setShare(signature) { 	var url = window.location.origin + '/' 	requestUtils.uni_setStorageSync('signature', JSON.stringify(signature))  	wx.config({ 		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 		// 配置微信 JSSDK 		appId: signature.appId, // 必填，公众号的唯一标识 		timestamp: signature.timestamp, // 必填，生成签名的时间戳 		nonceStr: signature.nonceStr, // 必填，生成签名的随机串 		signature: signature.signature, // 必填，签名 		jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] 	})  	wx.ready(function() { 		console.log('这是分享功能') 		wx.updateAppMessageShareData({ 			imgUrl: 'https://xxx.com/static/ai.png', // 分享图标 			title: 'AI', // 分享标题 			link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 			desc: '生活工作神器', // 分享描述 			success: function() { 				console.log('我来分享了') 			} 		}) 		wx.updateTimelineShareData({ 			desc: '生活工作神器', // 分享描述 			title: 'AI', // 分享标题 			link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 			imgUrl: 'https://xxx/static/ai.png', // 分享图标 			success: function() { 				console.log('我来分享了') 			} 		}) 	}) 	wx.error((res) => { 		console.log(res) 		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 		// getSignature() 	}) }   //分享 export default function share() {  	const _signature = requestUtils.uni_getStorageSync('signature') 	// 先看看缓存里有没有 	if (_signature) { 		let signature = JSON.parse(_signature) 		// 获取当前时间戳 		var now = parseInt(new Date().getTime() / 1000) + '' 		// 计算两个时间戳之间的差值，单位为秒 		var diff = now - signature.expire_time  		// 判断差值是否大于2小时的秒数，即7200秒 		if (diff > 7200) { 			console.log('时间戳已经超过两小时。') 			getSignature() 		} else { 			console.log('时间戳未超过两小时。') 			setShare(signature) 		} 	} else { 		getSignature() 	} }

在上述代码中，我们触发分享操作。您可以根据需要自定义分享的标题、摘要、链接和缩略图等内容。