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

Posted 2020-09-29 它山之石可以攻玉

先来看看微信分享效果：

在没有集成微信分享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会提示签名无效。提供一个解决办法是：把调用的网址当成参数发回给服务器端，再生成微信签名。