【微信网页开发】关于微信JSSDK，如何自定义微信网页的分享内容

时间：2023-05-31 01:21:01 | 来源：网站运营

时间：2023-05-31 01:21:01 来源：网站运营

【微信网页开发】关于微信JSSDK，如何自定义微信网页的分享内容：这个教程一直想做，但对于小白来说理解可能有些困难，但转念一想，我TM管小白干什么？







技术教程当然写给技术人员的，网上对于微信jssdk的教程一直不少，想起当年自己看着那些教程都写不出来，所以还是写一个简单直白的，留给自己也留给大家吧。




我们把jssdk接口的能力简单理解，就是通过后台的一些签名参数，使得你的前端网页获取微信对网页开放的一些能力！




大到微信网页的登录功能（认证服务号才能有此权限），小到自定义网页分享的标题、封面、简介与网址（认证号才能有此权限），都需要通过微信的jssdk接口获取，还有一些其他功能，大家可以自己去翻阅官方文档，为了节约大家时间，这里我们直接说你如何获取此能力。




首先你先确定你要调用此接口的域名，并将域名添加到你认证公众号的后台js授权域名中。




然后我们在服务器后端，新建一个文件叫做jssdk.php，对，php文件，其他语言的自己去研究吧，







然后打开这个文件我们开始复制粘贴

在php文件中创建一个php类，叫jssdk

顺便科普一下，php的类就是由多个函数（方法）所组成的一个方法群，集成在类中是为了以后方便调用，就像是js的插件。




接下来在这个类中填写方法吧~首先创建三个私有属性与一个入口函数

//私有属性 private $appId; private $appSecret; private $s_url; //入口函数 public function __construct($appId, $appSecret,$s_url) { $this->appId = $appId; $this->appSecret = $appSecret; $this->s_url = $s_url; }接受来自网页的公众号参数等




接下来是获取用户的access_token，这个大家都很了解了，小程序开发中经常用到

private function getAccessToken() { // access_token 应该全局存储与更新，以下代码以写入到文件中做示例 $data = json_decode(file_get_contents("access_token.json")); if ($data->expire_time < time()) { // 如果是企业号用以下URL获取access_token // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret"; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; $fp = fopen("access_token.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $access_token = $data->access_token; } return $access_token; } private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); curl_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); return $res; }这里注意有一个access_token.json文件，是用来存储获取到的access_token参数的，一般在php中，这个参数可以存储在php的session中，也可以存在数据库中，但我们这是个单文件，没写框架也没写整套程序，所以我就简单的存在一个文件中了，所以你需要在你的jssdk.php同级目录，新建一个access_token.json空白文件。




httpGet方法就不说了，通用的请求函数。







看官方文档，参与签名的字段包含一个随机字符串，所以我们再添加一个获取随机字符串的函数

private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; }这里我们基础方法也就写完了，接下来是两个核心方法，首先按照官方的说法我们通过刚才的access_token去微信服务器获取jsapi_ticket

private function getJsApiTicket() { // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例 $data = json_decode(file_get_contents("jsapi_ticket.json")); if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); // 如果是企业号用以下 URL 获取 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)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $fp = fopen("jsapi_ticket.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $ticket = $data->jsapi_ticket; } return $ticket; }对，根据上面的写法，我们需要再新建一个名为jsapi_ticket.json的空白文件，用来存储jsapi_ticket




接下来我们写最后一个方法，将这些签名所用到的字段整合起来

public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket(); // 注意 URL 一定要动态获取，不能 hardcode. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = $this->s_url; $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; }好了，是不是很懵啊，没关系，看看官方文档就可以了，这些字段就是我们前端页面调用jssdk接口所需的验签字段了，接下来还有一个问题，这些方法都是php的，但前端网页只能支持js脚本语言，通过js调用php的类好像行不通啊。




这里我们用一个省力的方法，其实前端js中只是需要我们最后的字段结果，谁调用这个类还真无所谓，就比如你结婚是因为想要个孩子，但孩子是谁的呢你也无......




算了，方法就是我们在这个php文件的顶部，自己调用这个类的方法，然后获取到最后的结果并输出，这样js一旦来请求文件，我们直接把结果给它就OK拉~

$url = $_POST['url'];$jssdk = new JSSDK("你的appid", "你的appSecret",$url);$signPackage = $jssdk -> getSignPackage();echo json_encode($signPackage);这里的appid和appSecret你也可以不写死，让js传过来，都是一样的

OK了，后端教程到这里也就结束了，最后截图一部分大家对比对比文件，写的和我一样就可以使用了~







然后你只需要在前端js中post请求一下这个文件，就拿到签名了，之后调用jssdk的方法就ok！




前端调用代码我这里直接贴一下吧，累了，懒得讲解了！

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> console.log(111) /**获取配置*/ function getConfig(){ $.post("你的域名/jssdk.php", { url: window.location.href, method: "ticket"}, function(data){ console.log(data) config = eval('('+data+')'); wx.config({ debug: false, appId: config.appId, timestamp: config.timestamp, nonceStr: config.nonceStr, signature: config.signature, jsApiList: [ // 所有要调用的 API 都要加到这个列表中 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ] }); wx.ready(function () { var shareData = { title: '自定义分享标题', desc: '自定义分享描述', link: '自定义分享链接', imgUrl: '自定义分享封面图' }; wx.onMenuShareAppMessage({ title: '自定义分享标题！', // 分享标题 desc: '自定义分享描述', // 分享描述 link: '自定义分享链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '自定义分享封面图', // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // alert("成功") } }); wx.onMenuShareAppMessage(shareData);//分享给好友 wx.onMenuShareTimeline(shareData);//分享到朋友圈 wx.onMenuShareQQ(shareData);//分享给手机QQ wx.onMenuShareWeibo(shareData);//分享腾讯微博 wx.onMenuShareQZone(shareData);//分享到QQ空间 }); }); } </script>最后上文中的这些文件我也都打包了，获取的话可以在原文底部获取