Angularjs+ThinkPHP3.2.3集成微信分享JS-SDK实践

前端之家收集整理的这篇文章主要介绍了Angularjs+ThinkPHP3.2.3集成微信分享JS-SDK实践前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先来看看微信分享效果

在没有集成微信分享js-sdk前是这样的:没有摘要缩略图任意抓取正文图片

在集成微信分享js-sdk后是这样的:标题摘要缩略图自定义

一、下载微信SDK开发包

下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip

二、设置安全域名

所有的微信JS接口都只能在公众号绑定的域名下调用登录微信公众平台,点击左边的“公众号设置”,切换到“功能设置”,在“JS接口安全域名”一栏设置安全域名,下载验证文件到网站根目录,再回到窗口点击“确定”(注:在点击“确定”前,设置的域名下都要能在浏览器下正常访问刚才下载的验证文件才能通过验证)。

三、以第三方插件形式集成到ThinkPHP

1、解压微信SDK开发包,将jssdk.PHP、access_token.PHP、jsapi_ticket.PHP复制到插件目录ThinkPHP/Library/Org/Util下,重命名jssdk.PHP为Jssdk.class.PHP(符合TP加载规则的文件名)。

2、修改access_token.PHP、jsapi_ticket.PHP的读写路径。打开Jssdk.class.PHP文件,加入私有属性private $filePath;

在构造函数中设置属性为当前文件路径:$this->filePath = __DIR__.'/';

搜索access_token.PHP、jsapi_ticket.PHP,在文件名前连接上$this->filePath

 

四、应用

1、在PHP接口处写一函数调用,$url为angularjs访问接口时传过来的参数,保证请求地址和调用地址一致

获取微信jssdk配置信息 =['url' = \Org\Util\Jssdk(_APPID_,_APPSECRET_, = ->((->response(('success'=>0,'info'=>'读取错误'),'json'->response(('success'=>1,'info'=>'读取成功','appid'=>['appId'],'timestamp'=>['timestamp'],'nonceStr'=>['nonceStr'],'signature'=>['signature']),'json'

2、angularjs代码

$http.get("/h5n/games/web/getwxconfig?url="+encodeURIComponent('http://youxi919.com/h5web/'(response.success==1,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: response.appid, timestamp: response.timestamp,生成签名的时间戳 nonceStr: response.nonceStr,生成签名的随机 signature: response.signature, 'checkJsApi''onMenuShareTimeline''onMenuShareAppMessage''onMenuShareQQ''onMenuShareWeibo' }</span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt;{ }; }); wx.ready(</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { wx.onMenuShareAppMessage({ </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;配置<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>给朋友接口</span> title: '<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>的<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/biaoti/" target="_blank" class="keywords">标题</a></span> desc: '这是一个测试<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>描述</span> link: location.href,<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/lianjie/" target="_blank" class="keywords">链接</a></span> imgUrl: '',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>图标</span> type: '',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>类型,music、video或link,不填默认为link</span> dataUrl: '',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 如果type是music或video,则要提供数据<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>,默认为空</span> success: <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; () { </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>确认<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a></span>

<span style="color: #000000;"> },cancel: <span style="color: #0000ff;">function<span style="color: #000000;"> () {
<span style="color: #008000;">//<span style="color: #008000;"> 用户取消分享后执行的回调函数
<span style="color: #000000;"> }
})
});

 

后台端分离的网站架构(也就是通过api接口的形式),前端必然要用到ajax请求,会出现一个问题:

调用的网址不一致,微信SDK会提示签名无效。提供一个解决办法是:把调用的网址当成参数发回给服务器端,再生成微信签名。



猜你在找的ThinkPHP相关文章