第三方网站接入微信JS-SDK的分享自定义设置，微信分享小图标以及标题

首先这个坑是工作遇到的问题，正好需要分享链接有小图，于是各种百度，发现这里第三方网址需要接入微信的东西，才能正常的显示出小图等。

 

对于想了解如何操作的，觉得我的博客看不太懂的，可以参考 慕课网—微信相关视频学习、

 

前期准备工作    1.公众号  2.了解微信公众号开发  3.打开网址看微信公众平台开发者手册   

 

微信公众平台开发者手册：https://mp.weixin.qq.com/  

 

什么是JS-SDK  ？？  是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包

 

微信JS-SDK 开发步骤：

步骤一：绑定域名 （登录微信公众平台）   例如下图：

 

步骤二：引入JS文件

步骤三：通过config接口注入权限验证配置

步骤四：通过ready接口处理成功验证

步骤五：通过error接口处理失败验证

 

 

 

 

 

注意事项！！！一下代码部分 关于appid  appsecret 以及 分享 图标 标题 链接 均空出，请填写好你们自己需要填写的！！！！！

 

关于微信的分享接口

代码实现部分，首先创建一个php文件，写入下面的代码。 这里还是结合了TP框架来的，所以有一些写法是TP框架中的。

 

//获取token
function wx_get_token() {
    $token = S('access_token');
    if (!$token) {
        $appid='';
        $appsecret='';
        $res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret);
        $res = json_decode($res, true);
        $token = $res['access_token'];
        // 注意：这里需要将获取到的token缓存起来（或写到数据库中）
        // 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token，每日有次数限制
        // 通过此接口返回的token的有效期目前为2小时。令牌失效后，JS-SDK也就不能用了。
        // 因此，这里将token值缓存1小时，比2小时小。缓存失效后，再从接口获取新的token，这样
        // 就可以避免token失效。
        // S()是ThinkPhp的缓存函数，如果使用的是不ThinkPhp框架，可以使用你的缓存函数，或使用数据库来保存。
        S('access_token', $token, 3600);
    }
    return $token;
}

//获取ticket
function wx_get_jsapi_ticket(){
    $ticket = "";
    do{
        $ticket = S('wx_ticket');
        if (!empty($ticket)) {
            break;
        }
        $token = S('access_token');
        if (empty($token)){
            wx_get_token();
        }
        $token = S('access_token');
        if (empty($token)) {
            logErr("get access token error.");
            break;
        }
        $url2 = sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi",
            $token);
        $res = file_get_contents($url2);
        $res = json_decode($res, true);
        $ticket = $res['ticket'];
        // 注意：这里需要将获取到的ticket缓存起来（或写到数据库中）
        // ticket和token一样，不能频繁的访问接口来获取，在每次获取后，我们把它保存起来。
        S('wx_ticket', $ticket, 3600);
    }while(0);
    return $ticket;
}
//获取16位随机编码
function getRandCode( $length = 16 ) {
 $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 $tmpstr ='';
    for ( $i = 0; $i < $length; $i++ )
    {
    // 这里提供两种字符获取方式
    // 第一种是使用 substr 截取$chars中的任意一位字符；
    // 第二种是取字符数组 $chars 的任意元素
    // $password .= substr($chars, mt_rand(0, strlen($chars) – 1), 1);
        $tmpstr .= $chars[ mt_rand(0, strlen($chars) - 1) ];
    }
return $tmpstr;
}

//分享朋友圈
public function  shareWx(){
    //1.获取jsapi_ticket票据
    $ticket=$this->wx_get_jsapi_ticket();
    $timestamp=time();
    $nonceStr=$this->getRandCode();
    $url='';
    //按照微信的要求排序拼接组合
    $signature = sprintf("jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s",
        $ticket, $nonceStr, $timestamp, $url
    );
    $signature= sha1($signature);
    $this->assign('timestamp',$timestamp);
    $this->assign('noncestr',$nonceStr);
    $this->assign('signature',$signature);
    $this->display('index');
}

********************************分隔线，接下来是前台部分*************************************************

1.首先在我们需要分享链接的HTML页面 引入必要的文件、

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2.然后接下来我们写入js分享部分的代码，我是在另外一个Js文件中写入，然后html文件加载。懒一点的同学也可以直接在html

页面的<script></script>标签中去写。

<script src="__PUBLIC__/js/shareWX.js"></script>

代码部分如下所示：

// 微信配置 wx.config({ debug: false, appId: "", timestamp: '<{$timestamp}>', nonceStr: '<{$noncestr}>', signature: '<{$signature}>', jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我们要使用JS-SDK的什么功能 }); // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在 页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready 函数中。 wx.ready(function(){ // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口  wx.onMenuShareTimeline({ title: '沈阳宏大', // 分享标题  link:"",//分享的url,以http或https开头  imgUrl: "" // 分享图标  }); // 获取“分享给朋友”按钮点击状态及自定义分享内容接口  wx.onMenuShareAppMessage({ title: '沈阳宏大', // 分享标题  desc: "低投入高效率", // 分享描述  link:"", imgUrl: "", // 分享图标  type: 'link', // 分享类型,music、video或link，不填默认为link  }); });