首页 > JavaScript > 微信分享网页的缩略图、链接、标题和摘要

微信分享网页的缩略图、链接、标题和摘要

来源:原创 作者:thomas 分类:JavaScript 阅读:708 日期:2014-05-25

微信公众平台很多时候都需要跳转到网页展示和实现一些功能,而这些网页也是可以被用户分享到朋友圈或发送给朋友的。分享和发送的时候一般都是一个缩略图,一个标题和一个介绍。

定义分享时的缩略图、链接、标题、摘要确实是通过WeixinJSBridge实现的。

参考万花筒儿歌的页面:(略去了跟此需求无关的代码,仅供参考)

    <script>
        var imgUrl = 'http://www.ikinvin.com/public/song/img/mp3share.jpg';
        var lineLink = 'http://song.ikinvin.com/index/share/aid/{{$song["id"]}}';
        var descContent = "万花筒儿童歌曲提供最新原创儿歌,儿歌大全,英文儿歌,睡前儿歌.";
        var shareTitle = '{{$song['name']}}-万花筒儿童歌曲';
        var appid = 'wxdf5d223c1e728b8a';

        function shareFriend() {
            WeixinJSBridge.invoke('sendAppMessage',{
                "appid": appid,
                "img_url": imgUrl,
                "img_width": "640",
                "img_height": "640",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                _report('send_msg', res.err_msg);
            })
        }
        function shareTimeline() {
            WeixinJSBridge.invoke('shareTimeline',{
                "img_url": imgUrl,
                "img_width": "640",
                "img_height": "640",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                _report('timeline', res.err_msg);
            });
        }
        function shareWeibo() {
            WeixinJSBridge.invoke('shareWeibo',{
                "content": descContent,
                "url": lineLink
            }, function(res) {
                _report('weibo', res.err_msg);
            });
        }
        // 当微信内置浏览器完成内部初始化后会触发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);
    </script>

十日谈技术博客

 

热门文章 更多>

微信扫一扫,关注技术十日谈