gpt4 book ai didi

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

转载 作者:我是一只小鸟 更新时间:2023-08-04 22:31:25 29 4
gpt4 key购买 nike

本文档介绍了如何在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()
	}
}

                        
                      

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

步骤四:测试分享功能

完成以上步骤后,您可以重新编译并运行您的UniApp项目,并在H5中测试分享功能。当您点击触发分享的按钮时,微信将会弹出分享界面,并显示您设置的标题和缩略图.

请确保您的微信公众平台已经配置了合适的权限和域名白名单,以便正常进行分享操作.

结论

通过按照本文档中的步骤,在UniApp开发中实现将链接分享到微信好友,并显示标题和缩略图是相对简单而有效的.

在我开发完这个功能后,发现官方有个提供, UNI-APP 开发微信公众号(H5)JSSDK 的使用方式 - DCloud问答 。

不确定好不好使,感兴趣的可以通过这个链接试一试.

最后此篇关于uniapp开发H5,分享链接到微信好友,显示标题和缩略图的文章就讲到这里了,如果你想了解更多关于uniapp开发H5,分享链接到微信好友,显示标题和缩略图的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com