首页 > 代码库 > 如何让你的网页链接潇洒地在微信好友和朋友圈中传播
如何让你的网页链接潇洒地在微信好友和朋友圈中传播
嗨，大家好，我是大花猫！
想必大家都在自己的微信朋友圈看到过别人分享的一些网页链接消息，但是你注意了吗？有些链接的图标是用的微信一张蓝色的默认图片，但是有些链接的图标却有着各自专门的图标（注：公众号的图文消息不在本文讨论行列中。），而且标题也和链接里面网站的标题不一样！（想想前段时间那个风靡朋友圈的贱贱的神经猫吧！）好啦！今天要跟大家分享的就是如何让自己的网页在微信分享朋友圈中拥有一个自己个性的图标以及自定义分享中的描述文字。（开始想着加这个功能是在学习了慕课网的《2048私人定制》以后做了第一个自己的HTML5游戏的时候！）
先来看看我的“小花猫” 在微信朋友圈中分享的效果吧！
这是分享到朋友圈的样子：
这是分享到好友消息的样子：
（第一张是普通网页的样子，后面两张是加了微信分享的样子）
*******************************分割线***************************************
嗯，下面进入正题，看看如何实现上面的效果吧！
立正！稍息！齐步走！一！二！
其实只有两个步骤：
一、 给自己网页引入微信分享插件：
直接下载【WeixinApi.js】这个文件，然后导入到你的HTML5中即可。
? ?<script type="text/javascript " src=http://www.mamicode.com/"js/WeixinApi.js "></script>
二、调用插件里面的方法配制图标和描述语句：（放到body末尾）
<script>
window.wxData = {//分享到微信朋友圈
"appId": "",//APPID，暂时用不上吧
"imgUrl": ‘http://www.devislee.com/LittleCat/cat_0.png‘,//图片路径
"link": ‘http://www.devislee.com/LittleCat/‘,//点击跳转路径
"desc": "卖萌、装逼、耍赖、搞基…… 这些我真的都不会哦！喵~",//描述
"title": "小花猫—智能聊天机器人"//标题
};
window.wxFriend = {//分享到微信好友（下面内容同上）
"appId": "",
"imgUrl": ‘http://www.devislee.com/LittleCat/cat_0.png‘,
"link": ‘http://www.devislee.com/LittleCat/‘,
"desc": "卖萌、装逼、耍赖、搞基…… 这些我真的都不会哦！喵~",
"title": "小花猫—智能聊天机器人"
};
//分享后回调函数，可以执行一些分享操作的监听
WeixinApi.ready(function(Api) {
var wxCallbacks = {
ready: function() {},
cancel: function(resp) {},
fail: function(resp) {},
confirm: function(resp) {},
all: function(resp) {}
};
Api.shareToFriend(wxFriend, wxCallbacks);
Api.shareToTimeline(wxData, wxCallbacks);
Api.shareToWeibo(wxData, wxCallbacks);
});
</script>
?上面的调用方法，修改那几个加了注释的内容就可以了！如果你会一点点HTML5和Javascript的话应该都不在话下了。
?快来试试吧！让你的网页像神经猫一样在朋友圈中疯传！！！
?好了！今天的分享就到这里！感谢大家！
?【快来和小花猫打个招呼吧！】<---猛戳左边
?我的前三篇心得：
?
?
如何让你的网页链接潇洒地在微信好友和朋友圈中传播