最近开发一个项目,需要将链接分享给好友时能够自定义标题、简介和logo,现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文。

一、准备工作

1、认证的公众号
不管是订阅号还是服务号,都需要是经过认证的,否者不支持微信分享功能。
2、绑定域名
登录微信公众平台,设置—公众号设置—功能设置里,填写『JS接口安全域名』。
填写的域名须通过ICP备案的验证,并将平台给的txt文件放到域名指向的web服务器之下。
3、获取开发者ID和开发者密码
登录微信公众平台,开发—基本配置,即可看到AppID和AppSecret(若没有需要开启)。
4、下载官方示例代码
可在http://demo.open.weixin.qq.com/jssdk/sample.zip下载包含php、java、nodejs以及python的示例代码,其中php文件夹包含如下文件:
二、正式开发
1、PHP部分
1)将下载的php示例代码中的access_token.php、jsapi_ticket.php和jssdk.php放入到tp5框架的第三方接口扩展目录下,路径为extend/org/wechat/文件。
2)将jssdk.php文件重命名为Jssdk.php文件,设置命名空间,因为tp路由的关系,需要加上私有属性path,并在构造函数中设置 $this->path = __DIR__ . DS; 
同时将get_php_file函数返回值中的$filename改为 $this->path . $filename ,否则会报错。
3)在config.php文件中,将先前获得的AppID和AppSecret配置好。
4)在application/index/controller下新建Wechat.php文件,内容如下:
2、JS部分
1)引入JS文件
在需要调用JS接口的页面引入JS文件(支持https):
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2)调用JS接口

官方技术文档给了如下说明:

// 通过config接口注入权限验证配置
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '',   // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: [] // 必填,需要使用的JS接口列表
});
// 通过ready接口处理成功验证
wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。// 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

代码如下:

至此就完成微信分享功能的开发了。

三、问题及解决方法
在开发过程中先后遇到了两次invalid signature签名错误,一次是分享首页成功,但是分享二级页面失败;一次是分享过的页面再次分享时会失败。
官方技术文档给了如下说明:
确保你获取用来签名的url是动态获取的。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

第一个问题是因为首页由控制器输出模板,对模板进行赋值。控制器生成的签名和首页一致,与二级页面却不一致,所以我采取ajax方法,将静态页面的url传给后台(PHP),这样生成的签名就一致了。

1)首先是改写Jssdk.php中的签名算法,因为生成签名的方法为:
public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();// 注意 URL 一定要动态获取,不能 hardcode.$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://"; : "http://";;$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";$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;
}

其中, $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url”; 这里的url要改成静态页面的url。

所以在Jssdk.php文件中增加私有属性url,并在构造函数中设置 $this->url = $url;

2)控制器中不再采用给模板赋值的方式,而是使用json_encode()函数中将签名返回给静态页面。
3)静态页面中用ajax获取wx.config配置所需的几个参数的值,可以这样做:
<script type="text/javascript">url = location.href.split('#')[0]; // 传给后台PHP
    $.ajax({type: "GET",url: "https://xxx.com/wechat/share?url="+url,dataType : "json",success: function(data) {// 先前分享部分的代码挪到这里来
        }});
</script>

在需要分享的静态页面中引入这段JS代码,即可成功分享所有页面。第一个问题就解决了~

第二个问题更简单,官方技术文档已经说得很清楚了,js获取当前页面的链接可用location.href.split('#')[0]获取,而且需要encodeURIComponent,因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数。
果然,因为我没encodeURIComponent,所以再次分享时链接为https://xxx.com/index.html?from=singlemessage&isappinstalled=0
url中红色部分内容是微信自动为分享链接添加的参数,目的是为了记录分享来源。
from=singlemessage&isappinstalled=0表示来自好友分享
from=timeline&isappinstalled=0表示来自朋友圈分享
from=groupmessage&isappinstalled=0表示来自微信群分享

只要在上述JS代码中加上encodeURIComponent这句代码即可。如下所示:

url = location.href.split('#')[0];
url = encodeURIComponent(url);

That’s all~

转载于:https://www.cnblogs.com/sunshineliulu/p/8034286.html

ThinkPHP5集成JS-SDK实现微信自定义分享功能相关推荐

  1. 微信自定义分享功能实现

    微信自定义分享功能实现 微信自定义分享功能实现 一.实现的关键 1.后端的任务 2.前台的任务 二.实现具体步骤 1.js安全域名配置(被分享的网址必须实现) 2.添加服务器配置(成为开发者) 3.生 ...

  2. php 微信分享功能_基于thinkPHP实现的微信自定义分享功能

    这篇文章主要介绍了基于thinkPHP实现的微信自定义分享功能,结合实例形式分析了thinkPHP调用微信接口实现自定义分享功能的相关操作技巧,需要的朋友可以参考下 本文实例讲述了基于thinkPHP ...

  3. 微信自定义分享功能二次封装

    我原本是纯后端开发,但是最近因为工作原因,做了微信公众号的二次开发,说实话写H5调CSS调得头大,还是得术业有专攻才行.话不多说,因为要做微信自定义分享,网上其实已经有很多轮子了,但是100个人就有1 ...

  4. 微信自定义分享限制分享

    微信自定义分享&限制分享 一.微信自定义分享 [ (* ̄︶ ̄)微信官方文档 ] 业务需求: 开发过程中有些业务需要借助微信进行推广和宣传.难免需要使用微信提供的一些功能,比如微信的二次分享(也 ...

  5. VUE项目引入微信JSSDK 实现微信自定义分享

    VUE项目引入微信JSSDK 实现自定义分享 前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致 一.微信公众号后台添加 js安全域名(白名单) 二 ...

  6. 微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈

    微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈 导语: 微信分享在手机右上角的三个点一键分享就ok了,那么对于分享到朋友圈,分享给朋友是怎么实现的呢?对于那种活动分享送流量是怎么定位分享 ...

  7. 微信自定义分享--失效问题

    微信自定义分享 微信自定义分享到朋友圈/朋友失效问题 微信自定义分享到朋友圈 wx.onMenuShareTimeline({title: '', // 分享标题link: '', // 分享链接,该 ...

  8. typecho图标_Typecho微信自定义分享插件WeChatShare 自定义标题描述小图标

    前言 张小龙带领微信走进了大众的生活,在十亿用户的生活里扎根.于是我们不管是阅读.聊天.看视频,基本上都离不开微信.好东西分享给用户,第一时间想到的肯定是微信. 很久以前,一个网页分享到微信聊天,系统 ...

  9. php一键微信分享代码,php版微信自定义分享代码

    在许多大的网站我们都会看到点击分享就可以把数据分享到微信或QQ或其它的平台了,下面我们来看一段php版微信自定义分享代码,代码参考官方开发的没有任何问题. 分享需要认证微信订阅号或者服务号. php ...

  10. h5页面生成图片分享到微信js_H5微信自定义分享链接(设置标题+简介+图片)

    起源:最近公司在做招募广告的html5页面,然后做出来后,产品提出一个问题,需要分享出去的链接是卡片形式,内容也要自己定义,这下就难到我了,因为是第一次遇到这种需求,果断百度,然而,我就像大家一样,看 ...

最新文章

  1. 拼多多程序员:因为看到同事被抬上救护车,我被开除了!
  2. celery 学习笔记 01-介绍
  3. 解方程(codevs 3732)
  4. Python3学习笔记(一)简介 、 安装 、 解释器
  5. 6.23 NIUDAY 深圳站 | 从新零售到金融,Follow 技术大咖一起探索人工智能应用的无限可能...
  6. 在 Eclipse 3.5中在线安装SVN插件
  7. 渗透测试报告封面样本
  8. python接口测试demo_python http接口自动化测试简单demo
  9. 谈用VB无窗口透明Usercontrol编写透明浮动按钮
  10. php 5.4 +iis+mysql_IIS+FastCGI+PHP5.4.4搭建PHP环境
  11. JAVA 空间分配担保
  12. BRAF蛋白F595S G615R突变的影响
  13. 2021-02-22
  14. VHDL数字时钟设计及引脚锁定方法
  15. 【Office软件使用】Word往框里打勾
  16. C语言的从零开始和我自己的心路历程
  17. 社交电商和传统电商的区别。
  18. 微金所获2015(行业)最具影响力品牌奖
  19. [NLP]自然语言理解概述
  20. 立创eda入门经验分享(2)——布线问题

热门文章

  1. mysql 执行时间有波动_阿里P8架构师谈mysql性能优化思路
  2. java静态和动态的区别是什么_java中静态资源和动态资源的区别
  3. latex 设置表格的字体大小和行高
  4. kubernetes视频教程笔记 (38)-高可用的K8S构建-系统初始化
  5. aix查看文件夹大小命令_AIX5.3系统文件大小的限制
  6. 资源调度_提前计划+实时调度,实现月台资源高效利用
  7. Android ListView 代码1
  8. java 递归求二进制,java-二进制搜索递归猜测数字
  9. 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_15-MongoDb入门-用户...
  10. 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第4节 方法引用_2_方法引用_通过对象名引用成员方法...