html静态页面实现微信分享思路
微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面。由于dedecms是生成了静态文件,其实我想使用ajax获取jssdk参数也能也能实现微信分享功能了,在这里分享给大家。
jssdk的步骤业务流程是这样滴:
1:在微信公众号后台配置js 安全域名,即需要引入jssdk的页面域名。 需要在域名根目录下放置微信的检测文件。
2:配置出ip白名单(可参考:http://www.idcxx.com/wx-125-1-1.html)
3:后台开发人员生成签名传递给前台
4:前端页面引入script方式 jssdk文件
5:通过ajax获取config 配置,完成config 配置后即可使用jssdk的各项功能了。
再补充啰嗦一句:
- 确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent,后台decodeURIComponent解码),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
前台HTML代码示例:
<script src="http://外部站点引入/js/jquery-1.11.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> var url=encodeURIComponent(window.location.href.split('#')[0]);//分享成功之后再次分享,微信会再url附带额外参数造成二次分享签名错误,这里处理下避免config:invalid signature签名失效$.ajax({type : "get",url : "http://xxx/jssdk.php?url="+url,//替换网址,xxx根据自己jssdk文件位置修改 dataType : "jsonp",jsonp: "callback",jsonpCallback:"success_jsonpCallback",success : function(data){wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: ["onMenuShareTimeline", //分享给好友"onMenuShareAppMessage", //分享到朋友圈"onMenuShareQQ", //分享到QQ"onMenuShareWeibo" //分享到微博 ] }); },error:function(data){ alert(JSON.stringify(data));//alert("连接失败!");} });wx.ready(function (){var shareData = {title: '标题',desc: '简介',//这里请特别注意是要去除html link: '链接',imgUrl: '标题图'};wx.onMenuShareAppMessage(shareData);wx.onMenuShareTimeline(shareData);wx.onMenuShareQQ(shareData);wx.onMenuShareWeibo(shareData);}); </script>
修改服务端文件jssdk.php
<?php $url = urldecode($_GET['url']); class JSSDK {private $appId;private $appSecret;private $url;public function __construct($appId, $appSecret,$url) {$this->appId = $appId;$this->appSecret = $appSecret;$this->url = $url;}public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";// $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";$url =$this->url;$timestamp = time();$nonceStr = $this->createNonceStr();// 这里参数的顺序要按照 key 值 ASCII 码升序排序$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";$signature = sha1($string);$signPackage = array("appId" => $this->appId,"nonceStr" => $nonceStr,"timestamp" => $timestamp,"url" => $url,"signature" => $signature,"rawString" => $string);return $signPackage; }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;}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;}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;} }$jssdk = new JSSDK("公众号ID", "公众号密钥",$url);//按照自己的公众号填写 $signPackage = $jssdk->GetSignPackage(); $tmp=json_encode(array ('appId'=>$signPackage["appId"],'timestamp'=>$signPackage["timestamp"],'nonceStr'=>$signPackage["nonceStr"],'signature'=>$signPackage["signature"],'url'=>$signPackage["url"])); $callback = $_GET['callback']; echo $callback.'('.$tmp.')'; exit; ?>
其它的按照动态页面参数设置即可。
转载于:https://www.cnblogs.com/phpper/p/6604903.html
html静态页面实现微信分享思路相关推荐
- html页面在微信分享php,详解html静态页面实现微信分享思路的示例代码分析
微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.由于dedecms是生成了静态文件,其实我想使用ajax获取jssdk参数也能也能实现微 ...
- 单独的html怎么实现微信分享,html静态页面实现微信分享思路
微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.由于dedecms是生成了静态文件,其实我想使用ajax获取jssdk参数也能也能实现微 ...
- php微信分享带缩略图,静态页面实现微信分享带缩略图、标题和描述
在前一篇文章<微信转发或分享朋友圈带缩略图.标题和描述的实现方法>中,余斗已经教大家如何实现在自有网站上实现微信分享后自带缩略图.标题和描述,这里是在动态php页面中实现,这里有很大的局限 ...
- 基于静态URL的微信分享自定义缩略图及标题和摘要
在静态页中实现微信分享自定义缩略图比动态页分享要复杂.下面是示例页面: 分享的效果(缩略图及标题.摘要是自己指定): 实现难点: (1)URL是变化的,我们分享一次后,微信会自动在分享的地址后增加了一 ...
- 单页面应用微信分享跳坑指南
前言 最近在开发的时候遇到了一个微信分享的bug,就是无论你在哪个路径下的页面,发送给朋友后点开都只会跳到项目的首页.本来微信分享这个只算是一个小功能,也很好解决,但由于项目的特殊性,使得在这个bug ...
- php网页分享时显示图片怎么设置,分享html页面 在微信分享中可以设置分享标题和描述和图片...
微信中分享页面已经是很流行的一种方式,那么如何可以让自己做的h5页面能设置分享标题.描叙和图片呢? 问题 第三方网站在微信中分享的链接想要左边有简介概述,右边有缩略图,没有缩略图不能引起客户足够的重视 ...
- H5页面实现微信分享功能及踩坑历程
看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写: 我理解的误区: 我一直以为可以跟app分享一样,有个分享按钮点击触发分享:搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享 ...
- h5在微信自定义分享php,h5页面自定义微信分享
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...
- H5页面 禁止微信分享转发按钮
一 , 设置微信jssdk , jsApiList中加上 "hideMenuItems" 因为这次项目微信jsApiList都是另一个部门的人配的 , 不是我这边弄 , 我只用把 ...
最新文章
- Scala Trait详解
- java socket同步通信,javasocket客户端与服务端同步通信实例
- nginx多进程模型之配置热加载---转
- 新同事上来就把项目性能优化了一遍,瑟瑟发抖。。。
- 技术分享:NodeJS中的Events(事件触发器)讲解
- 项目经济规模的估算方法_估算英国退欧的经济影响
- 第九篇:Spring Boot整合Spring Data JPA_入门试炼01
- 2019.8.13节点的选取
- 微信公众号采坑之授权config
- 计算机无法打开浏览器,win7电脑打开ie浏览器被提示“该页无法显示”怎么解决...
- Matlab绘图相关参数备忘录
- depmod 生成 modules.dep
- WebView 截取长图
- wmware虚拟网卡 VMnet8 VMnet1未识别网络解决方法
- 经验分享:半桥电路的工作原理及注意问题(转载)
- java中国象棋兵吃棋规则_中国象棋吃子的规则
- 两向量叉乘的计算公式_高中数学知识背景下对向量叉乘运算的探讨(向东来)
- python编写电子菜单_python 写三级菜单
- 如何成为一名合格的LINUX系统管理员
- 2021-01-12 DataGrip2020.3 离线安装驱动