微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面。由于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&timestamp=$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静态页面实现微信分享思路相关推荐

  1. html页面在微信分享php,详解html静态页面实现微信分享思路的示例代码分析

    微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.由于dedecms是生成了静态文件,其实我想使用ajax获取jssdk参数也能也能实现微 ...

  2. 单独的html怎么实现微信分享,html静态页面实现微信分享思路

    微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.由于dedecms是生成了静态文件,其实我想使用ajax获取jssdk参数也能也能实现微 ...

  3. php微信分享带缩略图,静态页面实现微信分享带缩略图、标题和描述

    在前一篇文章<微信转发或分享朋友圈带缩略图.标题和描述的实现方法>中,余斗已经教大家如何实现在自有网站上实现微信分享后自带缩略图.标题和描述,这里是在动态php页面中实现,这里有很大的局限 ...

  4. 基于静态URL的微信分享自定义缩略图及标题和摘要

    在静态页中实现微信分享自定义缩略图比动态页分享要复杂.下面是示例页面: 分享的效果(缩略图及标题.摘要是自己指定): 实现难点: (1)URL是变化的,我们分享一次后,微信会自动在分享的地址后增加了一 ...

  5. 单页面应用微信分享跳坑指南

    前言 最近在开发的时候遇到了一个微信分享的bug,就是无论你在哪个路径下的页面,发送给朋友后点开都只会跳到项目的首页.本来微信分享这个只算是一个小功能,也很好解决,但由于项目的特殊性,使得在这个bug ...

  6. php网页分享时显示图片怎么设置,分享html页面 在微信分享中可以设置分享标题和描述和图片...

    微信中分享页面已经是很流行的一种方式,那么如何可以让自己做的h5页面能设置分享标题.描叙和图片呢? 问题 第三方网站在微信中分享的链接想要左边有简介概述,右边有缩略图,没有缩略图不能引起客户足够的重视 ...

  7. H5页面实现微信分享功能及踩坑历程

    看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写: 我理解的误区: 我一直以为可以跟app分享一样,有个分享按钮点击触发分享:搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享 ...

  8. h5在微信自定义分享php,h5页面自定义微信分享

    官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...

  9. H5页面 禁止微信分享转发按钮

    一  , 设置微信jssdk , jsApiList中加上 "hideMenuItems" 因为这次项目微信jsApiList都是另一个部门的人配的 , 不是我这边弄 , 我只用把 ...

最新文章

  1. Scala Trait详解
  2. java socket同步通信,javasocket客户端与服务端同步通信实例
  3. nginx多进程模型之配置热加载---转
  4. 新同事上来就把项目性能优化了一遍,瑟瑟发抖。。。
  5. 技术分享:NodeJS中的Events(事件触发器)讲解
  6. 项目经济规模的估算方法_估算英国退欧的经济影响
  7. 第九篇:Spring Boot整合Spring Data JPA_入门试炼01
  8. 2019.8.13节点的选取
  9. 微信公众号采坑之授权config
  10. 计算机无法打开浏览器,win7电脑打开ie浏览器被提示“该页无法显示”怎么解决...
  11. Matlab绘图相关参数备忘录
  12. depmod 生成 modules.dep
  13. WebView 截取长图
  14. wmware虚拟网卡 VMnet8 VMnet1未识别网络解决方法
  15. 经验分享:半桥电路的工作原理及注意问题(转载)
  16. java中国象棋兵吃棋规则_中国象棋吃子的规则
  17. 两向量叉乘的计算公式_高中数学知识背景下对向量叉乘运算的探讨(向东来)
  18. python编写电子菜单_python 写三级菜单
  19. 如何成为一名合格的LINUX系统管理员
  20. 2021-01-12 DataGrip2020.3 离线安装驱动

热门文章

  1. 基于深度学习的植物病害检测
  2. 【python】拉普拉斯和sobel对图像处理
  3. 编写一个圆类Circle
  4. 扫地机自动回充揭秘之科沃斯T8
  5. hive 两个没有null指定的表左关联的结果有null_Hive企业级调优表的优化
  6. Flask 和 Google App Engine 部署模型服务
  7. 《MFC游戏开发》笔记七 游戏特效的实现(一):背景滚动
  8. python利用什么写模块_python模块是什么?写法及作用分析
  9. 三阶段提交(Three-phase commit)
  10. Exchange 2016 之分层通讯簿