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配置信息
    public function getwxconfig(){
        $url=$_GET[‘url‘];
        $jssdk = new \Org\Util\Jssdk(_APPID_, _APPSECRET_,$url);
        $signPackage = $jssdk->GetSignPackage();
        if(empty($signPackage)){
            $this->response(array(‘success‘=>0,‘info‘=>‘读取错误‘),‘json‘);
        }else{
            $this->response(array(‘success‘=>1,‘info‘=>‘读取成功‘,‘appid‘=>$signPackage[‘appId‘],‘timestamp‘=>$signPackage[‘timestamp‘],‘nonceStr‘=>$signPackage[‘nonceStr‘],‘signature‘=>$signPackage[‘signature‘]),‘json‘);
        }
    }

2、angularjs代码

$http.get("/h5n/games/web/getwxconfig?url="+encodeURIComponent(‘http://youxi919.com/h5web/‘))
    .success(function (response) {
        if(response.success==1){
            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
              appId: response.appid, // 必填,公众号的唯一标识
              timestamp: response.timestamp, // 必填,生成签名的时间戳
              nonceStr: response.nonceStr, // 必填,生成签名的随机串
              signature: response.signature,// 必填,签名,见附录1
              jsApiList: [
                            ‘checkJsApi‘,
                            ‘onMenuShareTimeline‘,
                            ‘onMenuShareAppMessage‘,
                            ‘onMenuShareQQ‘,
                            ‘onMenuShareWeibo‘
                          ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });

        }else{
        };
    });
    wx.ready(function () {
        wx.onMenuShareAppMessage({              //配置分享给朋友接口
            title: ‘分享的标题‘, // 分享标题
            desc: ‘这是一个测试分享‘, // 分享描述
            link: location.href, // 分享链接
            imgUrl: ‘‘, // 分享图标
            type: ‘‘, // 分享类型,music、video或link,不填默认为link
            dataUrl: ‘‘, // 如果type是music或video,则要提供数据链接,默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        })
     });

以上使用场景:

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

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

时间: 2024-11-08 22:29:47

Angularjs+ThinkPHP3.2.3集成微信分享JS-SDK实践的相关文章

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

先来看看微信分享效果: 在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包 下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip 二.设置安全域名 所有的微信JS接口都只能在公众号绑定的域名下调用.登录微信公众平台,点击左边的"公众号设置",切换到"功能设置",在"JS接口安全域名"

使用JSSDK集成微信分享遇到的一些坑

h5项目中需要集成微信分享,以实现自定义标题.描述.图片等功能.结果遇到了很多坑. 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众号 JSSDK使用步骤 步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对应的接口权限. 这里注意:JS接口安全域名一定要填写正确,区分子域名,且主域名需要通过备案!没有满足这一步,无法继续测试. 步骤二:引入JS文

微信分享JS接口失效说明及解决方案

关键字:微信分享 JS 失效  分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的JS接口一直用于内部业务,并未对外开放,在微信公开的开放文档里面并没有此接口. 某些第三方借助微信客户端漏洞在未获得权限的情况下使用接口,微信6.0.2版本对此漏洞做了修复以确保用户分享内容的准确性,避免诱导分享. 另外,不久将向广大公众号开放正式分享接口供开发者使用. 临时解决方案: 标题:修改<

Android集成微信分享的要点及源码示例

如今,社会化分享成了App必不可少的一个功能,而其中最重要的莫过于微信分享,由于微信庞大的用户群及活跃度,因此我们的App往往都需要集成微信分享,微信开放平台也提供了相应的分享SDK.鉴于看到很多人说调不起微信分享,下面就来分享下自己的经验以及在集成微信分享过程中需要注意的地方,最终会提供自己封装好的微信分享源码示例. 其实集成的步骤在微信开放平台的文档指南中已经写的很清楚了: 1.申请AppID.这一步需要在微信开放平台注册你的App就可以了,注意的是需要使用正式的keystore签名你的Ap

微信开放JS SDK,HTML5的逆袭

JS SDK 其实微博和淘宝的开放平台就出现,手机 QQ 近期在内也推出了几个增强 API,可未产生很大的效应.小巫之后终见大巫,此次微信开放的 SDK,站在了另一个高度,web 到底能有多强? HTML5来袭 此前,微信也有一些 JS API ,如分享等.但这次一次性开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个 API功能,此消息立刻占满了 HTML5 从业者的朋友圈. 微信给所有做 web 开发的人打开一扇新窗户:使用 js,你也可以调用各种强大的原生能力了! 客观的讲

关于MUI集成微信分享遇到的坑

今天聊一下MUI这个框架吧! 首先,用这个框架也有很长一段时间了,项目不同,涉及到的功能也有不同,之前没有涉及到微信分享相关的内容!今天,遇到了,也解决了,分享出来. 下面是手顺: 1.分享的代码是参考Hbuilder生成的Demo中的分享代码,当然因为我本身仅仅需要微信分享,所以其它不必要的代码都删了! 2.需要微信公众平台的配置:以下两个码 这是MUI项目的配置清单文件的视图窗口 这是微信需要的两个码 这是填写应用的签名 PS:刚开始我的微信分享在Android端失败,返回值[share微信

微信分享js代码(转载)

<script> window.shareData = { //微信分享时显示的图标 "imgUrl":'...", //分享链接对应的页面 "timeLineLink": "...", //分享时的标题及描述"tTitle": "", "tContent": "" }; document.addEventListener('WeixinJSBr

微信分享JS函数

1 //微信内置浏览器分享事件 2 //来自:http://www.cnblogs.com/cielwater 3 //分享朋友圈事件 4 //UpdateWeixinJSBridge(CircleModel[Json格式,分享朋友圈事件参数]) 5 //Json{, img_url:封面图片地址, img_width:图片宽度, img_height:图片高度, link:跳转地址, desc:正文, title:标题} 6 function Circle(CircleModel) { 7 W

微信分享JS接口

没想到微信接口的突破口实在JS分享这里,今天搞定了这个分享. 1)PHP端需要获取signature的值,因接口调用次数有限制,所以加入了mem存入取出的值,7100秒后过期: $shaMem = 'shaTicket'; //!$strMem = MemHelper::Get($shaMem) if(!$strMem = MemHelper::Get($shaMem)){ //获取相关数据star $str = curl_https("https://api.weixin.qq.com/cgi