博主信息
博文 1
粉丝 0
评论 0
访问量 5451
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
如何在微信分享的链接里添加标题,内容和自定义图片?
嘎蹦跳
原创
5451人浏览过

我们直接看效果:

haoyouduibitu.png

pengyouquanduibitu.png

由上面效果图可以看出,是否实现了自定义分享决定了您分享出去的推广链接的展示效果。实现自定义分享后分享给好友或者朋友圈可以实现自定义标题,描述,图片功能,让您的分享链接以图文卡片的形式展示出来,更加美观与专业!那下面我就说说如何来实现自定义微信分享的功能。

实现方式:

首先我们要知道,实现好友朋友圈分享自定义内容,必须要接入微信的JS-SDK。再用前端代码实现自定义内容:

实例

<script type="text/javascript">
	$(function() {
		var timestamp = $("#timestamp").val();//时间戳
		var nonceStr = $("#noncestr").val();//随机串
		var signature = $("#signature").val();//签名
		wx.config({
			debug : false,
			appId : 'wx622ca8545e5c354b', // 必填,公众号的唯一标识
			timestamp : timestamp, // 必填,生成签名的时间戳
			nonceStr : nonceStr, // 必填,生成签名的随机串
			signature : signature,// 必填,签名,见附录1
			jsApiList : [ 'scanQRCode','onMenuShareAppMessage','onMenuShareTimeline' ]
		// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
		});

		wx.ready(function(){
			// wx.hideOptionMenu();
			wx.onMenuShareTimeline({
				title: '这是一个测试的标题',
				link: 'http://blog.csdn.net/frankcheng5143',
				imgUrl: 'http://avatar.csdn.net/E/B/6/1_frankcheng5143.jpg',
				success: function () { 
					// 用户确认分享后执行的回调函数
					 alert('分享到朋友圈成功');
				},
				cancel: function () { 
					// 用户取消分享后执行的回调函数
					 alert('你没有分享到朋友圈');
				}
			});
			wx.onMenuShareAppMessage({
				  title: '这是一个测试的标题--百度',
				  desc: '这个是要分享内容的一些描述--百度一下,你就知道',
				  link: 'http://www.baidu.com',
				  imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
				  trigger: function (res) {    
				  },
				  success: function (res) {
					  alert('分享给朋友成功');
				  },
				  cancel: function (res) {
					alert('你没有分享给朋友');
				  },
				  fail: function (res) {
					alert(JSON.stringify(res));
				  }
				});	
		});
	});
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

通过上述代码即可在前面自定义我们分享出的链接带有标题,描述和图标的微信图文卡片。但是前提是一定要对接微信JS-SDK。

--------------------------------0.0---------------------------------------------------------

详情获取:http://www.188tool.cn/card

当然我们在做对接过程中肯定会遇到各种各样的问题,也会有很多不明白的地方。如果需要帮忙对接的话也可以加我qq:814102037。有偿提供帮助。


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学