tp5 微信分享朋友或朋友圈

news/2025/1/22 15:10:40/

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

最近开发一个项目,需要将链接分享给好友时能够自定义标题、简介和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);
文章来源:https://blog.csdn.net/wuhuajun_123456/article/details/127898751
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/462605.html

相关文章

微信朋友圈功能测试用例

用例id用例标题前提条件测试步骤预期结果1发表纯文本朋友圈已进入我的朋友圈&#xff1b;网络正常长按相机图标进入“发表文字”&#xff0c;输入一个文字&#xff0c;点击“发表”按钮发表成功&#xff0c;朋友圈正常显示2纯文本朋友圈不可以超过1500字已进入我的朋友圈&#…

iOS 微信分享 朋友圈

好多app中 应该会有关分享的功能&#xff0c;比如分享给微信好友朋友圈好友等等 下面我们来整理一下 首先去微信开放平台注册账号&#xff08;是微信开放平台 不是腾讯开放平台&#xff0c;两者不一样&#xff09; https://open.weixin.qq.com 注册完成之后记得创建应用&a…

微信H5分享朋友圈踩坑

1、所需权限 需要公众号有分享权限&#xff0c;无权限无法分享成功&#xff0c;一般认证后就有权限&#xff0c;微信白名单需要配置地址&#xff0c;xxx.xxx.xxx&#xff08;精确到二级域名&#xff09; 2、后端接口 一般需要将线上url地址传递给后端&#xff0c;后端返回所…

斐讯音响突然走红,原来它的秘密是这个!

现在的互联网巨头们&#xff0c;如果不做个智能音箱&#xff0c;都不好意思说自己懂人工智能。但纵观这种被称之为赋予人工智能的音箱&#xff0c;也未免太小儿科&#xff0c;不仅Bug颇多&#xff0c;大多数功能并没有什么卵用。在“百箱大战”依然持续升温的今天&#xff0c;更…

手机端微信发朋友圈功能测试点总结

拍摄照片上传&#xff08;只上传照片&#xff0c;不上传文字&#xff09; 1、是否能拍摄照片上传&#xff0c;拍摄的照片是否能取消&#xff0c;拍摄中是否能取消拍摄 2、拍摄的照片是否能进行编辑再上传&#xff0c;编辑后是否能取消 3、拍摄完确定后的照片&#xff0c;能否…

uni-app 小程序分享到朋友和朋友圈

uni-app分享小程序方法 App&#xff1a;可以自主控制分享内容、分享形式及分享平台使用 uni.share API方式调用社交sdk分享使用plus.share.sendWithSystem呼起手机os的系统分享菜单小程序&#xff1a;不支持API调用&#xff0c;只能用户主动点击触发分享。可使用自定义按钮方式…

vue2和vue3组件v-model区别

前言 单向数据流&#xff0c;父组件传给子组件的数据&#xff0c;子组件只能展示&#xff0c;不能修改&#xff0c;如果需要修改则需要emit事件让父组件修改 有些时候&#xff0c;一些组件并不是通过input来进行触发事件。也就是说value和input事件在大多数情况下能够适用&am…

electron+vue 实现静默打印

我的electron版本&#xff1a;^12.0.0; vue版本&#xff1a;^3.2.13。 我是通过webview实现的。 实现原理&#xff1a;webview类似于iframe&#xff0c;其实是electron中的一个内嵌窗口&#xff0c;打印的也就是这个内嵌窗口的内容。 那么就需要一个html作为内嵌内容。所以共…