- A+
所属分类:WEB前端
3z学堂平时更新了文章,都会通过微信发给朋友们阅读,之前都是直接复制链接发过去,直接却不直观,那么如何像公众号分享效果那样优雅的转发呢?经过一番摸索,3z学堂终于找到了比较好的解决方案,今天特意整理了出来供大家取用。
未添加代码前微信分享原始效果:

添加代码后自定义效果:

具体实现代码也很简洁,省去了网上常见的需要在微信公众号里进行设置、认证等环节,当然这段代码在核心处理上还是使用了微信的基础规则,想了解更多的话可以去阅读下微信的开发者文档。在实际使用时也很简单,只需要把下列代码 复制到你的网站源代码里即可,一般放在<head></head>之间即可,将代码中标注的地方换成你自己想要显示的标题、描述、链接、图片即可,无论是分享微信消息还是朋友圈发布均可实现自定义效果。
<!-- 微信转发代码 -->
<script>
/** 微信接口*/
var appid = ''; // 应用id,如果有可以填,没有就留空
var descContent = '3z学堂——只分享最有价值的干货'; // 分享后的描述信息
var shareTitle = '3z学堂'; // 分享后的标题
var imgUrl = 'http://www.3zschool.com/wp-content/uploads/2018/10/logo_50_50.jpg'; // 分享后展示的一张图片
var lineLink = window.location.href+'?fromtitle='+shareTitle; // 点击分享后跳转的页面地址
// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 发送给好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid": appid,
"img_url": imgUrl,
"img_width": "200",
"img_height": "200",
"link": lineLink,
"desc": descContent,
"title": shareTitle
}, function(res) {
});
});
}, false);
</script>
使用这段代码有个注意事项,就是网站的域名需要备案,之前3z学堂也是捣鼓了好久才发现的,没有备案的域名分享会有问题,这可能是这段简化代码的硬伤吧,后续如果3z学堂还有新的心得,会再次更新与大家共享,希望这次的分享可以帮助到大家。
2019年7月20日 下午8:16 沙发
6666666666666666六
2019年7月22日 上午11:50 1层
@666 大兄弟,你这是来注水的啊。。。
2019年8月11日 上午12:52 板凳
文章不错非常喜欢
2019年8月17日 下午9:37 地板
好文章,谢谢分享,我的博客,欢迎回访
2019年10月26日 上午10:10 4楼
请问是把代码插入每个文章的位置,还是插入在首页,或者是其他说明地方呢?
2019年11月24日 下午11:14 1层
@高社保 放在你需要分享的页面即可,如果是整站都想使用的话,就放在网站源代码里。
2020年4月17日 下午9:29 5楼
这个还有效么
2020年4月19日 下午8:46 1层
@wordpress建站吧 还可以用的,不过你的网站最好备案过,不然容易被微信屏蔽。