2015最新微信接口分享标题、图片和描述自定义设置

最新推荐文章于 2021-01-14 17:21:31 发布

lyjtale

最新推荐文章于 2021-01-14 17:21:31 发布

阅读量694

点赞数

分类专栏： web 文章标签：微信分享自定义公众号

本文链接：https://blog.csdn.net/lyjtale/article/details/48049669

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法1：
在内的最上面添加一张可见的300px*300px的图片（注意尺寸一定需要是300px*300px），然后在title标签里填写的内容就是分享时显示的标题内容。可参考：

<title>这里是分享的标题</title>
<body>
    <div style="display:none;"><img src="..." alt="..." /></div>
    ……
</body>

但是这里会有一个问题，因为分享到朋友圈的时候，显示内容只有标题和图片，此方法可用，但如果分享给朋友或者分享到群里，需要显示标题、图片和描述，如果描述内容不设置，就会显示该分享的链接。所以要自定义描述内容的话就要调用微信提供的接口了，即方法2。

方法2：
首先需要一个认证的微信公众号，不然无法使用微信的jsapi。
一定要看官方文档：
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
根据文档，设置js接口安全域名和引入相关的js文件（http://res.wx.qq.com/open/js/jweixin-1.0.0.js）
接下来就是比较烦的权限验证了。建议这里采用异步操作，前端发起一个ajax请求获取后端的验证签名，
后端内容：

<?php
public function actionWxJson(){
    $appid='你的微信公众号id';//appid
    $gettoken=json_decode(file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET'),true);//通过公众号id和secret获得access_token
    $wx_access_token=$gettoken['access_token'];//获得token值
    $getticket=json_decode(file_get_contents('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$wx_access_token.'&type=jsapi'),true);//根据获得token获得公众号用于调用微信JS接口的临时票据
    $ticket=$getticket['ticket'];//临时票据
    $noncestr='Wm3WZYTPz0wzccnW';//一组随机的字符串
    $wx_timestamp=time();//获得时间戳
    $url=$_GET['url'];//获得传入的url
    $signature=sha1('jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$wx_timestamp.'&url='.$url);//生成签名字符串
    $jsonarr=array('appId'=>$appid,'timestamp'=>$wx_timestamp,'nonceStr'=>$noncestr,'signature'=>$signature);
    echo json_encode($jsonarr);//生成json数组返回
}
?>

注意：token通过appid获取，ticket票据通过token值获取，正常情况下获取的token值和ticket值有效期为7200s，并且这两个值有获取次数的限制，所以要对他们进行全局缓存（上面就不做判断了，直接获取，自己注意）。

前端：

var resourceurl=window.location.href;
var shareMsg={
    title: '这里是分享的标题',
    link: resourceurl,// 分享链接
    imgUrl: '...', // 分享图标
    desc:'...',//分享描述
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
}   

$(document).ready(function(){

    $.ajax({
      type:"GET",
      url:'http://...?url='+resourceurl,//访问WxJson的路径并以get方式传入url的值
      datatype: "text"         
      success:function(data){
      data=eval('('+data+')');
      wx.config({
          debug: false ,
          appId:  data.appId ,
          timestamp: data.timestamp , 
          nonceStr: data.nonceStr, 
          signature: data.signature,
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] 
      });

          wx.ready(function(){
          wx.onMenuShareAppMessage({//分享给朋友
              title:shareMsg.title,
              desc:shareMsg.desc,
              link: shareMsg.link, // 分享链接
              imgUrl: shareMsg.imgUrl, // 分享图标
          });
          wx.onMenuShareTimeline({//分享到朋友圈
              title:shareMsg.title,
              desc:shareMsg.desc,
              link: shareMsg.link, // 分享链接
              imgUrl: shareMsg.imgUrl, // 分享图标
          });
          })
          }         
    });
})

还有其他的分享接口可参考官方文档。

lyjtale

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2015最新微信接口分享标题、图片和描述自定义设置

方法1：在内的最上面添加一张可见的300px*300px的图片（注意尺寸一定需要是300px*300px），然后在title标签里填写的内容就是分享时显示的标题内容。可参考：<title>这里是分享的标题</title><body> <div style="display:none;"><img src="..." alt="..." /></div> ……</
复制链接

扫一扫