当前位置: 首页 > Web前端 > HTML5

微信自定义图片和标题二次分享

时间:2023-04-05 18:46:51 HTML5

这段时间公司的项目有用到自定义标题和图片的分享。仔细看了下官方的微信文档,其实很简单,新手可能有点看不懂。绕,这里我用PHP来说明。我从微信官方文档下载了示例说明。看了下,里面的分享页面是PHP格式的,而我的项目是html格式的,于是就想着不改变格式怎么实现,于是从网上找了各种答案,都都说改成PHP;还需要背景合作。下面是在本地写PHP,直接在界面调用即可;废话不说了,上图是我的目录结构wxjdk是我从sample下载的php的代码部分。access_token.php、jsapi_ticket.php、jssdk直接获取即可。jssdk说说我的修改部分和注意事项appId=$appId;$this->appSecret=$appSecret;}publicfunctiongetSignPackage(){$jsapiTicket=$this->getJsApiTicket();//注意URL必须是动态获取的,不能硬编码。$protocol=(!empty($_SERVER['HTTPS'])&&$_SERVER['HTTPS']!=='off'||$_SERVER['SERVER_PORT']==443)?“https://”:“http://”;$url="$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";$时间戳=时间();$nonceStr=$this->createNonceStr();//这里参数的顺序要按照key值的ASCII码升序排列$string="jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";$this->set_log_file("[getSignPackage]".$string);$signature=sha1($string);$signPackage=array("appId"=>$this->appId,"nonceStr"=>$nonceStr,"timestamp"=>$timestamp,"url"=>$url,"signature"=>$signature,"rawString"=>$string);return$signPackage;}privatefunctioncreateNonceStr($length=16){$chars="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";$str="";for($i=0;$i<$length;$i++){$str.=substr($chars,mt_rand(0,strlen($chars)-1),1);}return$str;}privatefunctiongetJsApiTicket(){//jsapi_ticket需要全局存储和更新,以下代码以写入文件为例$data=json_decode($this->get_php_file("jsapi_ticket.php"));if($data->expire_timegetAccessToken();//如果是企业账号,使用以下网址获取ticket//$url="https//qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";$url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";$res=json_decode($this->httpGet($url));$this->set_log_file("[getJsApiTicket]".json_encode($res));$ticket=$res->ticket;if($ticket){$data->expire_time=time()+7000;$data->jsapi_ticket=$ticket;$this->set_php_file("jsapi_ticket.php",json_encode($data));}}else{$ticket=$data->jsapi_ticket;}return$ticket;}privatefunctiongetAccessToken(){//access_token应该全局存储和更新,下面的代码以写入文件为例$data=json_decode($this->get_php_file("access_token.php"));if($data->expire_timehttpGet($url));$this->set_log_file("[getAccessToken]".json_encode($res));$access_token=$res->access_token;if($access_token){$data->expire_time=time()+7000;$data->access_token=$access_token;$this->set_php_file("access_token.php",json_encode($data));}}else{$access_token=$data->access_token;}return$access_token;}privatefunctionhttpGet($url){$curl=curl_init();curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);curl_setopt($curl,CURLOPT_TIMEOUT,500);//为保证第三方服务器与微信服务器之间数据传输的安全,所有微信接口都是通过https调用的,下面2行代码必须usedtoenablesslsecurityverification//如果代码部署时这里验证失败,请到http://curl.haxx.se/ca/cacert.pem下载新的证书标识文件。//下面这两个在官方下载的jssdk中应该是true,我改成false,因为我的分享是http开头的,这两种情况,如果你的分享里面的jsapi_ticket和access_token中的值不能写,先看看你的分享链接是什么开头的。对于http,将其更改为falsecurl_setopt($curl,CURLOPT_SSL_VERIFYPEER,false);curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,false);curl_setopt($curl,CURLOPT_URL,$url);$res=curl_exec($curl);curl_close($curl);返回$res;}privatefunctionget_php_file($filename){returntrim(substr(file_get_contents($filename),15));}privatefunctionset_php_file($filename,$content){$fp=fopen($filename,"w");fwrite($fp,"".$content);fclose($fp);}//这里添加了一条日志,官网没有下载,可以不添加;publicfunctionset_log_file($content){$logfile="wx.log";$content=date('Y-m-dH:i:s.u').''.$内容。"\n";$fp=fopen($logfile,"a");fwrite($fp,$content);fclose($fp);}}接下来是重写的ajax_getconfig.phpGetSignPackage();$signPackage['jsApiList']=array('onMenuShareTimeline','onMenuShareAppMessage');$signPackage['debug']=false;echojson_encode($signPackage);?>function_share.jsfunctionShare(url,title,img,desc){//有一点需要说明,这里./表示你的根目录;$.get("./wxjdk/ajax_getconfig.php",{url:window.location.href},function(data){//console.log(data)wx.config(data);wx.ready(function(){//在这里调用APIwx.onMenuShareTimeline({//分享到朋友圈的API示例title:title,//分享标题link:url,//分享链接imgUrl:img,//分享图标success:function(){alert('分享成功')},cancel:function(){//用户取消分享后执行的回调函数}});wx.onMenuShareAppMessage({title:title,//分享标题desc:desc,//sharedescriptionlink:url,//分享链接imgUrl:img,//分享图标type:'',//分享类型,音乐,视频或链接,不填默认为linkdataUrl:'',//如果类型是音乐或视频,必须提供数据链接,默认为空success:function(){alert('Sharesuccessful')},cancel:function(){//用户取消分享回调函数稍后执行}});wx.error(function(res){alert(res.errMsg);//打印错误信息,设置debug:false为debug:true,直接在网页上看到弹窗});});},"json");}最后一步是在an_share.html中引入微信的jweixin-1.2.0.js和function_share.js然后调用Share函数!还有一点需要注意。如果你的分享没有响应,无法调用function_share函数,先问后台看是不是服务器权限问题;