PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » 微信分享JS代码

微信分享JS代码

此文被围观1720日期: 2014-12-11 分类 : 前端设计  标签:  ·····

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

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

解决这些问题其实很简单,我们可以借助微信浏览器的内置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);


本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.