开发技术学习

‍‍‍‍微信分享功能本身有一套机制从微页面中抓取缩略图，标题和摘要信息，但是很多时候抓取的信息可能不是你所想要呈现的。很多开发人员没有注意这些，就可能使自己的页面在分享出去以后出现图片和文字的问题。‍‍

另外，当我们在开发微页面游戏，或者轻应用页面的时候，我们有时候希望不同的条件下同一页面分享的内容是不一样的。比如我之前做的单页面游戏，通关后用户点击分享的内容就是其通关的时间等信息，失败了则会分享失败的信息，等等。‍‍

‍‍‍‍‍‍‍‍‍‍‍‍解决这些问题其实很简单，我们可以借助微信浏览器的内置JS对象来实现。对于小虫这种代码控来说，下面就用代码和注释信息来向大家说明：

‍‍‍‍‍‍‍‍首先我们定义一些变量，你可以动态的改变这些变量，分享的时候会根据这些变量的值来设置信息。‍‍

var imgUrl = ""; //缩略图地址
var lineLink = ""; //分享的链接地址
var descContent = ''; //摘要信息
var shareTitle = ''; //分享的标题
var appid = 'xxxxxxxxxxxxxxxx'; //你的公众号的APPId

‍‍‍‍‍‍‍‍然后我们写三个分享函数来对应三种分享方式。注意其中用到了WeixinJSBridge这个微信浏览器内置对象。这三个函数建议不要直接调用，如何使用会在下面讲到。‍‍

//分享给朋友
function shareFriend() {
    WeixinJSBridge.invoke('sendAppMessage',{
        "appid": appid,
        "img_url": imgUrl,
        "img_width": "64",  //缩略图的大小，你可以自己修改
        "img_height": "64", //缩略图的大小，你可以自己修改
        "link": lineLink,
        "desc": descContent,
        "title": shareTitle
    }, function(res) {
        //分享完成后你想做的事情可以写在这里。
    })
}
//分享到朋友圈
function shareTimeline() {
    WeixinJSBridge.invoke('shareTimeline',{
        "img_url": imgUrl,
        "img_width": "64", //缩略图的大小，你可以自己修改
        "img_height": "64", //缩略图的大小，你可以自己修改
        "link": lineLink,
        "desc": descContent,
        "title": shareTitle
    }, function(res) {
        //分享完成后你想做的事情可以写在这里。
    });
}
//分享到企鹅微博
function shareWeibo() {
    WeixinJSBridge.invoke('shareWeibo',{
        "content": descContent,
        "url": lineLink,
    }, function(res) {
        //分享完成后你想做的事情可以写在这里。
    });
}

‍‍最后一步，我们要把上面的这三个函数和微信里面的分享按钮绑定起来。这里还是要用到微信浏览器内置对象，我们要在内置对象初始化完成时（WeixinJSBridgeReady事件触发），将分享事件绑定起来。‍‍

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    //绑定‘分享给朋友’按钮
    WeixinJSBridge.on('menu:share:appmessage', function(argv){
        shareFriend();
    });
    //绑定‘分享到朋友圈’按钮
    WeixinJSBridge.on('menu:share:timeline', function(argv){
        shareTimeline();
    });
    //绑定‘分享到微博’按钮
    WeixinJSBridge.on('menu:share:weibo', function(argv){
        shareWeibo();
    });
}, false);