小程序与h5分享

小程序分享
可以参考小程序文档小程序文档链接
介绍:小程序中有直接在按钮上面加open-type就会触发分享了
如下:

	<button  open-type="share"></button>

在onShareAppMessage这个生命周期上面书写你要分享的内容就可以了,
如下:

onShareAppMessage(res) {
		return {
			title:'标题',
			path:"你需要客户点击你分享的进来你的程序的路径",
			 imageUrl:'图片',
			 desc: '描述',
			 content:'内容',
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}

	},

h5分享

ps:根据这个文档书写的,你可以去参考下链接

第一步:绑定域名

  1. 先登录微信公众号平台进入[公众号设置的功能设置里面填写js接口安全域名]

如图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
需要填写一下域名,在把文件放到你的服务器下面,让他可以访问(保存按钮能保存就已经放置好了哦)

二、引入微信js-sdk
你可以直接去下载下来或者在你页面用script标签引入都可以

  1. 口令安装 npm i weixin-js-sdk --save
  2. 直接引入的方式:
  3. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>

ps:二者只能用其中一个(不能同时有,不然就分享不了哦)

三、通过config接口注入权限验证配置

wx.config({
							debug: false, "是否开启调试模式,就是报错了会直接弹出来,反之在控制台打印"
							appId:"公众号的appid",//必填 公众号标识
							timestamp: "" +timestamp ,//必填,生成签名的时间戳
							nonceStr:nonceStr,必填,生成签名的随机串
							signature: signature,必填,签名
							jsApiList: [
								'onMenuShareTimeline',
								'onMenuShareAppMessage'
							]必填,需要使用的js接口列表,所有js接口列表
						});

四、分享功能

             wx.ready(() => {
             //config信息验证后执行ready方法,所有接口调用必须在config接口获取结果之后,
            //config是客户端的异步操作,所有如果在需要在页面加载就调用相关接口,
            //则须把相关接口放在ready函数中调用来保证正确执行。对于用户触发时才调用的接口,
            //则可以直接调用,不需要放在ready函数中
							//分享给朋友接口  
							wx.onMenuShareAppMessage({
								title:title, // 分享标题
								desc: desc, // 分享描述
								link:link, // 分享链接
								imgUrl: 'imgUrl', // 分享图标
								type: 'link', // 分享类型,music、video或link,不填默认为link
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}

							});
							//分享到朋友圈接口  
							wx.onMenuShareTimeline({
								title:title, // 分享标题
								desc: desc, // 分享描述
								link:link, // 分享链接
								imgUrl: 'imgUrl', // 分享图标
								type: 'link', // 分享类型,music、video或link,不填默认为link
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}

							});
							
						});

最近分享运到的问题
ps:就是针对有的手机你分享出去的缩略图不显示的
解决方案:就是把你要放的缩略图上传到你的公众号的图文库里面就可以了,在把里面上传得到的链接方法你分享的里面就可以了,如图:

在这里插入图片描述

微信小程序公众号H5分享卡片是指在微信公众号平台上,通过小程序H5页面来创建可分享的卡片。这种分享卡片可以包含各种信息,如标题、描述、图片、链接等,用于吸引用户点击并进入小程序H5页面。 在微信小程序中,我们可以通过设置小程序分享参数来生成分享卡片。开发者可以在小程序的代码中,通过调用相关API来设置分享标题、描述和图片等信息,当用户点击分享按钮时,系统会自动根据设置生成分享卡片供用户分享到朋友圈、好友等渠道。 而在微信公众号的H5页面中,我们可以使用微信提供的JSSDK来实现分享功能。开发者可以在H5页面中引入微信提供的JSSDK的使用,在页面加载完成后,通过调用相关API来设置分享标题、描述和图片等信息。当用户点击分享按钮时,系统会调用微信的接口生成分享卡片供用户分享。 通过微信小程序公众号H5分享卡片,用户可以将自己喜欢的小程序H5页面分享给朋友,让朋友也能够体验到这些应用的功能。而对于开发者来说,分享功能可以增加应用的曝光度和用户量,提高用户参与度和用户粘性。 总之,微信小程序公众号H5分享卡片是一种方便快捷地实现小程序H5页面分享功能的方式,能够帮助用户分享他们感兴趣的内容,也能够帮助开发者提升应用的影响力和用户数量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值