thinkphp5.x中集成微信JS-SDK

Question

使用thinkphp框架开发微信公众号需要用到jssdk的一些功能。Mark一些如何解决部署、模块设计一些小的case啦。
下面是参考的一些传送门：https://my.oschina.net/superkangning/blog/368043
http://www.jianshu.com/p/dee2d998422e
https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E8.8E.B7.E5.8F.96.E2.80.9C.E5.88.86.E4.BA.AB.E5.88.B0.E6.9C.8B.E5.8F.8B.E5.9C.88.E2.80.9D.E6.8C.89.E9.92.AE.E7.82.B9.E5.87.BB.E7.8A.B6.E6.80.81.E5.8F.8A.E8.87.AA.E5.AE.9A.E4.B9.89.E5.88.86.E4.BA.AB.E5.86.85.E5.AE.B9.E6.8E.A5.E5.8F.A3

1、环境

thinkphp5.0.2
微信测试账号为例

2、登录微信公众平台后台或者测试账号后台

进入后台之后。设置js安全域名。如图：填写一级域名就ok了。设置完之后，会可能延迟生效一小会，不要着急。

3、下载微信安装的sdk安装包并准备文件

下载地址：http://demo.open.weixin.qq.com/jssdk/sample.zip下载完之后，找到php的版本，包括access_token.json、 jsapi_ticket.json、jssdk.php。其中将前两个文件内容设置如下:
然后在你的thinkphp5.x框架的的第三方接口扩展目录下（我这里是extend）里面建立文件夹，命名为org（为了标准）。然后创建类文件Jssdk.php，把jssdk.php中的内容复制进去。不要忘记设置命名空间，如下图所示

这三个文件的位置如下图所示：

因为tp路由的关系，所以我们要对Jssdk.php的内容进行改写。
加上私有属性$path，并且在构造函数中设置$this->path = DIR.DS。如下图所示：

4、开始调用

完成上述操作之后，我们已经成功的将微信jssdk部署到我们的项目中。通过阅读微信jssdk开发的手册，我们可以发现，我们使用jssdk主要是要获得一些重要的参数:主要是$appId、$timestamp、$nonceStr…..不赘述，自己看文档。而这些是可以复用的代码，所以我在view层建立了public文件夹和jssdk.html文件，让需要使用到jssdk的模块添加这个文件就好了。如图：
jssdk.html的内容是:

<script type="text/javascript">
    $(document).ready(function(){
        share();
    });
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    function share(){
        var imgUrl = "{$imgUrl}";
        var link = "{$link}";
        var title = "--------";
        var descContent = "------------";
        var shareTitle = "---------------";
        wx.config({
            debug: false,
            appId: '{$appId}',
            timestamp: '{$timestamp}',
            nonceStr: '{$nonceStr}',
            signature: '{$signature}',
            jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems'
        ]
    });
        wx.ready(function(){
            //朋友圈
            wx.onMenuShareTimeline({
                title: descContent,
                link: link,
                imgUrl: imgUrl,
                trigger: function (res) {
                },
                success: function () {
                    // 用户确认分享后执行的回调函数
                    //self.location= link;
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareAppMessage({
                title: shareTitle,
                link: link,
                desc: descContent,
                imgUrl: imgUrl,
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    //self.location= link;
                },
                cancel: function () {
                }
            });
            wx.onMenuShareQQ({
                title: shareTitle,
                desc: descContent,
                link: link,
                imgUrl: imgUrl,

                success: function () {
                    //self.location= link;
                },
                cancel: function () {
                }
            });
            wx.onMenuShareWeibo({
                title: shareTitle,
                desc: descContent,
                link: link,
                imgUrl: imgUrl,
                success: function () {
                    //self.location= link;
                },
                cancel: function () {
                }
            });
        });
    }
</script>

我这里只做了分享的功能。如果别的功能，我认为可以按照类似的模式来开发。其中

var imgUrl = "{$imgUrl}";
var link = "{$link}";
appId: '{$appId}',
timestamp: '{$timestamp}',
nonceStr: '{$nonceStr}',
signature: '{$signature}',

里面的参数值，都是通过tp模板赋值写入的。来写入的控制器的代码如下：

<?php
/**
 * Created by PhpStorm.
 * User: tao
 * Date: 2017/2/7
 * Time: 上午10:36
 * Description:
 */

namespace app\index\controller;

use think\Config;
use think\Controller;
use app\index\model\Activityinfo;
use org\wechat\Jssdk;
use think\Request;

class Activity extends Controller
{
    public function __construct(Request $request)
    {
        parent::__construct($request);
                $this->wechatShare();
    }
    //jssdk分享功能封装
    public function wechatShare()
    {
        $jssdkObj = new Jssdk(Config::get('WEIXINAPPID'), Config::get('WEIXINAPPSERCET'));
        $res = $jssdkObj->getSignPackage();
        $appId = $res['appId'];
        $timestamp = $res['timestamp'];
        $nonceStr = $res['nonceStr'];
        $signature = $res['signature'];
        $link = 'http://www.baidu.com';
        $imgUrl = Config::get('ROOT').'/static/index/img/activity_logo.png';
        $this->assign(
            array(
                'appId'=>$appId,
                'timestamp'=>$timestamp,
                'nonceStr'=>$nonceStr,
                'signature'=>$signature,
                'link'=>$link,
                'imgUrl'=>$imgUrl
            )
        );
    }

我这个控制下的渲染的Html文件中几乎到调用到jssdk，所以我就在构造函数中将其赋值。这样，同一个控制一下的html模板只要写{include file='public/jssdk'}
就可以来使用jssdk的功能。假如更多的使用的话，可以自己定义基类来使用。that`s all.