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

水深无声 2022-06-03 10:16 29阅读 0赞

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

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

问题探索：既然要支持微信分享，首先要肯定必须要有微信开发者账号，对于之前的版本，网上有很多版本说到微信分享的时候默认是抓取网页里面的第一张<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  
**每天进步一点点，更多精彩内容，欢迎关注公众号“编程社”！！！**

![1.jpg][]

[1.jpg]: /images/20220603/e13c9213d77b4a63af92cce8a865adff.png