首页 > 其他分享 >h5项目微信分享(以卡片形式,带标题和图片)

h5项目微信分享(以卡片形式,带标题和图片)

时间:2024-07-02 10:57:47浏览次数:22  
标签:h5 function 卡片 微信 JS res 分享 wx

1. 注册成为微信开放平台开发者

首先,你需要有一个微信公众平台的账号,并且你的小程序或公众号需要获得网页授权能力。这一步骤涉及在微信开放平台注册并创建小程序或公众号,获取AppID和AppSecret。

2. 配置安全域名

在微信公众平台的小程序或公众号后台,你需要将你的H5项目的域名添加到“公众号/小程序”的“JS接口安全域名”中,这样微信JS-SDK才能在该域名下正常工作。

3. 获取Access Token和JSAPI Ticket

为了使用微信JS-SDK,你需要先通过AppID和AppSecret从微信服务器获取Access Token,然后再用Access Token换取JSAPI Ticket。这一步通常在你的服务器端完成,因为AppSecret不应暴露在前端。

4. 引入微信JS-SDK

在你的H5页面中,通过以下方式引入微信JS-SDK:(全局配置,建议在index.html页面)

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

5. 配置微信JS-SDK(通过后端接口获取参数)

在页面加载完成后,使用获取到的JSAPI Ticket配置微信JS-SDK:

wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				appId: 'yourAppId', // 必填,公众号的唯一标识
				timestamp: timestamp, // 必填,生成签名的时间戳
				nonceStr: nonceStr, // 必填,生成签名的随机串
				signature: signature, // 必填,签名
				jsApiList: [
					'updateAppMessageShareData',
					'updateTimelineShareData',
					'onMenuShareAppMessage',
					'onMenuShareTimeline'
				] // 必填,需要使用的JS接口列表
			});

6. 设置分享内容

配置好JS-SDK后,你可以设置分享到朋友圈或发送给朋友的分享卡片内容:

wx.ready(function() {
				// 分享给朋友
				wx.updateAppMessageShareData({
					title: 'title', // 分享标题
					desc: 'describ', // 分享描述
					link: 'link', // 分享链接,必须与当前页面对应的公众号 JS 接口安全域名一致
				
					imgUrl: 'imgurl', // 分享图标
					success: function(res) {
						// 分享成功后的回调函数
					},
					cancel: function() {
						// 用户取消分享后执行的回调函数
					}
				});
});

7. 完整代码如下:

getWxConfig(title, describ, imgurl, link) {
				console.log("这是getWxConfig")
				const self = this;
				var url = window.location.href;
				$.ajax({
					url: 'common/wxSharing',
					data: {
						url: url,
					},
					method: 'GET',
					success(res) {
						var configData = JSON.parse(res.data.signData)
						if (res.code == 200) {
							wx.config({
								debug: false, 生产环境需要关闭debug模式
								appId: configData.appId, //appId通过微信服务号后台查看
								timestamp: configData.timestamp, //生成签名的时间戳
								nonceStr: configData.nonceStr, //生成签名的随机字符串
								signature: configData.signature, //签名
								jsApiList: ['updateAppMessageShareData']
							});
							wx.ready(function() {
								// 分享给朋友
								wx.updateAppMessageShareData({
									title: title, // 分享标题
									desc: describ, // 分享描述
									link: link, // 分享链接,必须与当前页面对应的公众号 JS 接口安全域名一致

									imgUrl: imgurl, // 分享图标
									success: function(res) {
										// 分享成功后的回调函数
									},
									cancel: function() {
										// 用户取消分享后执行的回调函数
									}
								});
							});

							// 配置失败的回调
							wx.error(function(res) {
								console.log('微信配置错误:', res);
							});

						}
					},
					complete(data) {}
				})
			}

标签:h5,function,卡片,微信,JS,res,分享,wx
From: https://blog.csdn.net/m0_67624022/article/details/140107140

相关文章

  • CH5XX串口中断接收超时
    1.串口1初始化:/*配置串口1:先配置IO口模式,再配置串口*/GPIOA_SetBits(GPIO_Pin_9);GPIOA_ModeCfg(GPIO_Pin_8,GPIO_ModeIN_PU);//RXD-配置上拉输入GPIOA_ModeCfg(GPIO_Pin_9,GPIO_ModeOut_PP_5mA);//TXD-配置推挽输出,注意先让IO口输出高电平U......
  • 基于java+ssm+vue的球馆预约微信小程序
    ......
  • 逆向通达信 x 逆向微信 x 逆向Qt
    本篇在博客园地址https://www.cnblogs.com/bbqzsl/p/18252961本篇内容包括:win32窗口嵌入QtUI。反斗玩转signal-slot。最后 通达信x微信xQt 做手术。 QtAlienWidget是一种广义的DirectUI。在UI技术中,DirectUI和AlienWidget的概念有所重叠,但具体实现和应用场景有所......
  • springboot+vue项目如何集成企业微信
    本文以springboot+vue技术开发的低代码平台为案例,介绍应用系统如何集成企业微信,包括同步企业微信组织用户、单点登录、消息发送等。在线体验:http://www.yunchengxc.com1、准备应用1.1、注册企业微信账号作为企业微信的企业管理员,首先登录企业微信官网,注册一个企业微信账号。......
  • 对接企业微信,通过机器人发送群信息
    1.自己创建一个群聊2.通过右键群聊创建机器人3.获取机器人webhook地址4.查看企业微信的接口文档         由于我使用的是卡片模式,所以以下是基于卡片模式的编写,如选择其他可点击下方按钮进行查询群机器人配置说明-文档-企业微信开发者中心(qq.com){......
  • php 获取微信用户的openId
    //这里的code是通过前端页面获取的//$appid="公众号在微信的appid";//$secret="公众号在微信的appsecret";publicfunctionuserOpenId($appid,$secret,$code){$url="https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&......
  • 搭建微信小程序
              在开发小程序之前,您需要先注册微信小程序。进入小程序页面,单击前往注册,根据指引填写信息和提交相应的资料,点击注册,完成账号申请。使用申请的微信公众平台账号登录小程序后台,单击开发管理>开发设置,可以看到小程序的AppID,......
  • uniapp+thinkphp5实现微信登录
    前言之前做了微信登录,所以总结一下微信授权登录并获取用户信息这个功能的开发流程。配置1.首先得在微信公众平台申请一下微信小程序账号并获取到小程序的AppID和AppSecrethttps://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2Fwacodepage%2Fgetcodepage%3Ftoken%3D4180......
  • h5 移动端align-items: center; 字体行高偏上问题;vant 按钮字体不居中问题
    最近写h5页面,用的vant,验收时候,ui说按钮的字上下不居中 是不是很难看出来有点靠上,我拿了个牙签比了一下,才觉得靠上,用电脑打开就是好的 后来加了个背景色,发现行高不一样发现下面(手机端)这个文字行高不太居中, 然后添加了属性 /deep/.van-button__content{line-heigh......
  • MQTT + 微信小程序:打造你的掌上ESP32智能鱼缸,远程监控,实时掌控
    一、项目概述厌倦了传统鱼缸的繁琐管理?想要随时随地了解鱼儿的生活状态?本项目将带你使用ESP32开发板、MQTT通信协议和微信小程序,打造一个功能完善的智能鱼缸系统。实时监测水温、远程控制灯光、定时定量喂食……一切尽在掌握!二、系统架构本系统采用典型的物联网架构,......