PHP+MySQL微信通过jsapi分享到朋友圈等平台,实现设置图片、链接

问题背景:

微信开发是目前程序开发领域一个比较火热的板块,基于公众号、微信支付等开发层出不穷,纷繁多彩,今天这里就基于微信开发的另外一个小版块,微信网页内分享到朋友圈等平台灵活设置链接和小图标(见下图)的功能来进行思路和代码的设计。

问题分析:

大家都知道,对于一般的浏览器,通过分享能够只能够将本页面的链接分享给别人,但是做不到灵活的控制,但是微信作为一个支持多种开发和良好体验的开发平台,能够让开发者更好的去动态设置很多内容,下面就针对于微信页面内分享案例做一个细致的剖析。

问题探索:

既然要支持微信分享,首先要肯定必须要有微信开发者账号,对于之前的版本,网上有很多版本说到微信分享的时候默认是抓取网页里面的第一张<img>标签的图片进行分享,这个据说在很久之前的版本上能够实现,现在的版本已经不能用这种办法了,只能按部就班的来。另外做这个事情之前,首先是要获得微信公众号的appId和appSercert,没有的话需要到微信平台去申请。请访问:https://mp.weixin.qq.com/

方案实现:

1. 首先通过appId和appSercert获取到页面内的临时签名,不然无法通过验证,获取签名需要首先从微信服务器获得access_token和jsapi_ticket这两个信息,但是这两个信息有一定的过期时间,同时请求的频次不能太高,所以必须要存储起来,过期的时候才再次获取,这就是为什么要用MySQL的原因,这里先建立一张存储信息的表。通过一段SQL可以创建这个表。

CREATE TABLE IF NOT EXISTS `wechat_share_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `access_token` varchar(500) COLLATE utf8mb4_bin DEFAULT NULL,
  `jsapi_ticket` varchar(500) COLLATE utf8mb4_bin DEFAULT NULL,
  `add_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin AUTO_INCREMENT=4 ;

2. 创建好了access_token和jsapi_ticket缓存表,下面就要通过微信把信息存储到这个表里面,第三步供前端使用,这里使用ThinkPHP框架实现,其他框架类似。

/*
*获取jsapi分享签名
*/
function getWinChatShareSignature(){
    $pageUrl=$_POST[‘url‘];
    date_default_timezone_set("Asia/Shanghai");
    $share=D(‘wechat_share_info‘)->find();
    $jsapi_ticket="";
    //如果之前没有获取过信息,就添加信息
    if(!isset($share)){
        //获取access_token
        $getTokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".C(‘WEI_SHARE_APPID‘)."&secret=".C(‘WEI_APP_SECERT‘);
        $tokenContent=file_get_contents($getTokenUrl);
        $tokenContentObj=json_decode($tokenContent);
        //获取jsapi_ticket
        $getTicketUrl="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$tokenContentObj->access_token."&type=jsapi";
        $ticketContent=file_get_contents($getTicketUrl);
        $ticketContentObj=json_decode($ticketContent);
        $data[‘access_token‘]=$tokenContentObj->access_token;
        $data[‘jsapi_ticket‘]=$ticketContentObj->ticket;
        $data[‘add_time‘]=date(‘Y-m-d H:i:s‘);
        //增加信息
        D(‘wechat_share_info‘)->add($data);
        $jsapi_ticket=$ticketContentObj->ticket;
    }
    //如果获取到信息,并且信息没有过期,就使用该信息
    else if($share[‘jsapi_ticket‘]&&  time()-strtotime($share[‘add_time‘])<2*3600){
        $jsapi_ticket=$share[‘jsapi_ticket‘];
    }
    //如果信息过期了,就更新信息
    else{
        //获取access_token
        $getTokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".C(‘WEI_SHARE_APPID‘)."&secret=".C(‘WEI_APP_SECERT‘);
        $tokenContent=file_get_contents($getTokenUrl);
        $tokenContentObj=json_decode($tokenContent);
        //获取jsapi_ticket
        $getTicketUrl="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$tokenContentObj->access_token."&type=jsapi";
        $ticketContent=file_get_contents($getTicketUrl);
        $ticketContentObj=json_decode($ticketContent);
        $data[‘access_token‘]=$tokenContentObj->access_token;
        $data[‘jsapi_ticket‘]=$ticketContentObj->ticket;
        $data[‘add_time‘]=date(‘Y-m-d H:i:s‘);
        //更新信息
        D(‘wechat_share_info‘)->where("id=%d",$share[‘id‘])->save($data);
        $jsapi_ticket=$ticketContentObj->ticket;
    }
    $noncestr=substr(md5(date(‘Y-m-d H:i:s‘).time()),0,16);
    $timestamp=time();
    $stringSign="jsapi_ticket=".$jsapi_ticket."&noncestr=".$noncestr."×tamp=".$timestamp."&url=".$pageUrl."";
    //echo $stringSign;
    //组装返回结果,供前端使用
    $signature=sha1($stringSign);
    $res[‘signature‘]=$signature;
    $res[‘noncestr‘]=$noncestr;
    $res[‘timestamp‘]=$timestamp;
    echo json_encode($res);
} 

3. js-api页面分享设置图标等前端配置的核心实现,在你的页面底部放入以下代码,imgUrl是自定义的图标,把想要设置的图标放到这个位置。

<!--配置微信分享-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js "></script>
<script type="text/javascript">
    var timestamp;//时间戳
    var noncestr;//随机字符串
    var signature;//签名
    var pageUrl=window.location.href;
    var conUrl=location.href.split(‘#‘)[0];
    $.ajax({
        url:"{:U(‘getWinChatShareSignature‘)}",
        data:{
            url:conUrl
        },
        dataType:‘json‘,
        async: false,//设置为同步获取,避免线程延迟
        method:‘post‘,
        success:function(data){
            //设置数据
            timestamp=data.timestamp;
            noncestr=data.noncestr;
            signature=data.signature;
        }
    });

    //分享初始配置
    wx.config({
        debug: false, 
        appId: ‘wx63e1ae0f43d8825c‘, 
        timestamp: timestamp , 
        nonceStr: noncestr , 
        signature: signature ,
        jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone"] 
    });

    //分享平台配置
    wx.ready(function(){
        wx.onMenuShareTimeline({
            title: ‘title‘, // 分享标题
            link: pageUrl, // 分享链接
            imgUrl: "http://"+window.location.host+"/Public/sharelogo.png", // 分享图标
            success: function () { 
                alert("分享成功!");
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareAppMessage({
            title: ‘title‘, // 分享标题
            desc: ‘desc‘, // 分享描述
            link: pageUrl, // 分享链接
            imgUrl: "http://"+window.location.host+"/Public/sharelogo.png", // 分享图标
            type: ‘‘, // 分享类型,music、video或link,不填默认为link
            dataUrl: ‘‘, // 如果type是music或video,则要提供数据链接,默认为空
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareQQ({
            title: ‘title‘,  // 分享标题
            desc: ‘desc‘, // 分享描述
            link: pageUrl, // 分享链接
            imgUrl: "http://"+window.location.host+"/Public/sharelogo.png", // 分享图标
            success: function () { 
               // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
               // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareWeibo({
            title: ‘title‘,  // 分享标题
            desc: ‘desc‘, // 分享描述
            link: pageUrl, // 分享链接
            imgUrl: "http://"+window.location.host+"/Public/sharelogo.png", // 分享图标
            success: function () { 
               // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareQZone({
            title: ‘title‘,  // 分享标题
            desc: ‘desc‘, // 分享描述
            link: pageUrl, // 分享链接
            imgUrl: "http://"+window.location.host+"/Public/sharelogo.png", // 分享图标
            success: function () { 
               // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
    });
</script>

4. 下面面打开前端代码所对应的页面,点击右上角分享到朋友圈以及其他平台,看看效果吧!

参考链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

 

来自微信公众号:编程社

PHP+MySQL微信通过jsapi分享到朋友圈等平台,实现设置图片、链接

程序员日常进阶宝典,欢迎关注!

PHP+MySQL微信通过jsapi分享到朋友圈等平台,实现设置图片、链接

上一篇:前端微信小程序云开发基础讲解


下一篇:微信中的video属性设置