• 微信分享链接获取标题和小图片


     

    一、标题

    微信分享链接的小标题:自动拉取title标签的内容。

    二、链接的小图标

    今天测试的时候发现,网页链接在QQ浏览器上打开,分享的小图片是有显示的,

    自动获取网页上的一张图片,但是为什么微信浏览器分享到朋友圈时图片却不显示呢?

    想要的效果:

    微信分享链接获取标题和小图片

    现实效果:

    微信分享链接获取标题和小图片

    在网上搜了一下发现,原来是因为 微信浏览器上自动拉取的图片必须是大于300*300px的图片,( 会取

    最近一张图片符合条件的)。

    解决办法:

    (一)

    在boby 和head之间添加下面的代码即可,图片路径自行修改。

    *注意这个图片必须是大于300px*300px的

    < bod y >

    < div style ='margin:0 auto;0px;height:0px;overflow:hidden;  ' >

    < img src='/image/data/pic300.jpg' / >

    < /div >
          < /bod y >

    (二)

       var imgUrl = 'http://www.baidu.com/images/share.jpg';  // 分享后展示的一张图片
       var lineLink = 'http://www.baidu.com'; // 点击分享后跳转的页面地址
       var descContent = "小灰博客,敬请访问!";  // 分享后的描述信息
       var shareTitle = '小灰博客';  // 分享后的标题

    var appid = '';  // 应用id,如果有可以填,没有就留空

            function shareFriend() {

                WeixinJSBridge.invoke('sendAppMessage',{

                    "appid": appid,

                    "img_url": imgUrl,

                    "img_width": "200",

                    "img_height": "200",

                    "link": lineLink,

                    "desc": descContent,

                    "title": shareTitle

                }, function(res) {

              //_report('send_msg', res.err_msg);  // 这是回调函数,必须注释掉

                })

            }

            function shareTimeline() {

                WeixinJSBridge.invoke('shareTimeline',{

                    "img_url": imgUrl,

                    "img_width": "200",

                    "img_height": "200",

                    "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);

    原文地址:http://www.zjyelinor.top/?p=7      

  • 相关阅读:
    OC-KVO简介
    注册审核
    应用权限
    关于函数执行的一点知识
    设置权限
    文件操作实例:文件管理器(网页版)
    文件操作
    正则表达式
    全局变量和递归
    案例:简单留言板
  • 原文地址:https://www.cnblogs.com/gopark/p/8157862.html
Copyright © 2020-2023  润新知