一个PHP文件实现JS-SDK新版微信分享朋友圈,分享给好友功能

admin3年前javascript499

1、先通过后端获取几个参数:jsapi_ticket、noncestr、timestamp、url,获取这几个参数的目的就是为了签名获得signature。
2、前端要引入官方的1.6版js文件jweixin-1.6.0.js

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

3、前端初始化配置,即将后端获取到的参数都用到前端上去,并且在jsApiList这个数组当中添加你要使用的API。

 // 初始化配置
 wx.config({
    debug: true, // 正式上线后成false不在弹出调试信息
    appId: '<?php echo $appid;?>',
    timestamp: '<?php echo $timestamp;?>',
    nonceStr: '<?php echo $nonceStr;?>',
    signature: '<?php echo $signature;?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      'updateAppMessageShareData', //分享到朋友圈
      'updateTimelineShareData',//分享给朋友
    ]
  });

4、然后调用ready函数来验证是否配置成功

wx.ready(function () {    //实例化API
    }
})

信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看。

wx.error(function(res){    
    // config    
    alert(res);
});

5、实例化API

//分享到朋友圈
wx.updateTimelineShareData({
    title: '', // 分享标题
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function (res) {        //分享成功
    }
})

wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function (res) {      //分享成功
    }
})

代码

<?php// 声明页面headerheader("Content-type:charset=utf-8");// 声明APPID、APPSECRET$appid = "填写你的APPID";$appsecret = "填写你的APPSECRET";// 获取access_token和jsapi_ticketfunction getToken(){   $file = file_get_contents("access_token.json",true);//读取access_token.json里面的数据
   $result = json_decode($file,true);//判断access_token是否在有效期内,如果在有效期则获取缓存的access_token//如果过期了则请求接口生成新的access_token并且缓存access_token.jsonif (time() > $result['expires']){       $data = array();       $data['access_token'] = getNewToken();       $data['expires'] = time()+7000;       $jsonStr =  json_encode($data);       $fp = fopen("access_token.json", "w");       fwrite($fp, $jsonStr);       fclose($fp);       return $data['access_token'];
   }else{       return $result['access_token'];
   }
}//获取新的access_tokenfunction getNewToken($appid,$appsecret){   global $appid;   global $appsecret;   $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret."";   $access_token_Arr =  file_get_contents($url);   $token_jsonarr = json_decode($access_token_Arr, true);   return $token_jsonarr["access_token"];
}$access_token = getToken();//缓存jsapi_ticketfunction getTicket(){   $file = file_get_contents("jsapi_ticket.json",true);//读取jsapi_ticket.json里面的数据
   $result = json_decode($file,true);//判断jsapi_ticket是否在有效期内,如果在有效期则获取缓存的jsapi_ticket//如果过期了则请求接口生成新的jsapi_ticket并且缓存jsapi_ticket.jsonif (time() > $result['expires']){       $data = array();       $data['jsapi_ticket'] = getNewTicket();       $data['expires'] = time()+7000;       $jsonStr =  json_encode($data);       $fp = fopen("jsapi_ticket.json", "w");       fwrite($fp, $jsonStr);       fclose($fp);       return $data['jsapi_ticket'];
   }else{       return $result['jsapi_ticket'];
   }
}//获取新的access_tokenfunction getNewTicket($appid,$appsecret){   global $appid;   global $appsecret;   $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=".getToken()."";   $jsapi_ticket_Arr =  file_get_contents($url);   $ticket_jsonarr = json_decode($jsapi_ticket_Arr, true);   return $ticket_jsonarr["ticket"];
}$jsapiTicket = getTicket();// 动态获取URL$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";// 生成时间戳$timestamp = time();// 生成nonceStr$createNonceStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";str_shuffle($createNonceStr);$nonceStr = substr(str_shuffle($createNonceStr),0,16);// 按照 key 值 ASCII 码升序排序$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";// 按顺序排列按sha1加密生成字符串$signature = sha1($string);?><!DOCTYPE html><html lang="zh_cn">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
       <title>要分享的index模板页面</title>  

   </head>
   <body>
       <h3>已获得updateAppMessageShareData</h3>
       <h3>已获得updateTimelineShareData</h3>
       <h3>这两个API权限</h3>
       <h3>请点击右上角[···]体验</h3>
   </body></html>
   <!-- 引入微信分享js-->
   <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   <script type="text/javascript">
    // 初始化配置
    wx.config({       debug: true, // 正式上线后改成false不在弹出调试信息
       appId: '<?php echo $appid;?>',
       timestamp: '<?php echo $timestamp;?>',
       nonceStr: '<?php echo $nonceStr;?>',
       signature: '<?php echo $signature;?>',
       jsApiList: [
         // 所有要调用的 API 都要加到这个列表中
         'updateAppMessageShareData', //分享到朋友圈
         'updateTimelineShareData',//分享给朋友
       ]
     });

    // 配置完成后会调用ready函数
    wx.ready(function (res) {

     //分享到朋友圈
     wx.updateTimelineShareData({
       title: '调用成功!分享到朋友圈!', // 分享标题
       link: 'http://www.liketube.cn/res/share.php', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
       imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享图标
       success: function (res) {
         // 分享成功
       }
     })

     wx.updateAppMessageShareData({ 
       title: '调用成功!分享给好友!', // 分享标题
       desc: '微信JSSDK1.6新版分享接口成功调用!', // 分享描述
       link: 'http://www.liketube.cn/res/share.php', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
       imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享图标
       success: function (res) {
         // 分享成功
       }
     })

   });

   //错误返回信息
   wx.error(function(res){    
   // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。    
       alert(res);
   });    
   
</script>

代码说明

1、在使用这个代码之前,请把您的域名添加到已认证的公众号的JS安全域名当中,具体到文件夹,例如你的程序代码在page文件夹,那么JS安全域名为www.xxx.com/page

2、wx.config,debug: true打开可以看到调试信息,如果返回config:ok则代表成功。如果返回其他的,请在开发者工具根据错误码进行调试。看下图,三连弹。

微信图片_20200215224847.jpg

意思是我们的配置信息OK、分享朋友圈API也OK、分享给好友API也OK。

这是在开发的时候应该开启的dubug,如果都OK,到时候上线使用,直接debug: false就不会弹出来了!

3、因为涉及到生成access_token和jsapi_ticket,并且这两个东西每天请求量有限,并且这两个东西有效期为2小时,所以这两个东西我都是缓存到服务器的,所以会在服务器生成access_token.json、jsapi_ticket.json这两个文件,每次访问页面,都会访问这两个文件,判断是否超时,如果超时,则重新获取并且缓存,如果还没超时,那就直接调用缓存。

分享朋友圈


相关文章

阿里oss压缩图片和获取视频第一帧简便方法

OSS获取视频第一帧方法: 视频地址+?x-oss-process=video/snapshot,t_1000,m_fast 例:https://video.aliyunoss.com/1.mp4?x...

vue项目没有安装chokidar

很久之前完成的项目,从git上面拉取下来以后使用npm i指令安装好依赖包后,使用npm run serve指令运行项目却出现了报错。在这里插入图片描述明明所有的依赖包都是自动安装的,并没有额外安装,...

viewjs使用参考

https://www.jq22.com/jquery-info6536{eyou:static file="/public/plugins/viewerjs/css/viewer.min....

scrollReveal.js – 页面滚动显示动画JS

scrollReveal.js – 页面滚动显示动画JS

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollR...

Nuxt详解+案例

https://blog.csdn.net/M_wzz/article/details/121914443...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。