thinkphp5.x中合拢微信JS-SDK

具体的宏图请参见下边  当然倘若有更加好的建议方可联手沟通 

3、下载微信安装的sdk安装包并计划文件

下载地址:下载完今后,找到php的版本,包涵access_token.json、
jsapi_ticket.json、jssdk.php。其师长前七个文件内容设置如下:图片 1
然后在你的thinkphp5.x框架的的第三方接口扩充目录下(小编那边是extend)里面建设构造文件夹,命名称为org(为了标准)。然后成立类公事Jssdk.php,把jssdk.php中的内容复制进去。不要忘记安装命名空间,如下图所示
图片 2
那八个文件的职位如下图所示:
图片 3
因为tp路由的涉嫌,所以大家要对Jssdk.php的剧情开始展览改写。
充分私有属性path,并且在构造函数中装置

this->path = DIR.DS。如下图所示:
图片 4

选择ngrok+express消除地点境遇中微信接口调节和测试难点,ngrokexpress

在微信项指标付出的时候,日常要求对微信jssdk提供的接口实行调弄整理,比如说录音,
分享
,上传图像等接口,可是微信jssdk供给绑虞诩全域名本事运用其提供的一系列功用, 而在开辟意况中运用localhost或然本地ip无法做到域名的辨证和绑定,
所以不恐怕在本地调节和测试 。当然有一种迫不得已方法 ,正是在本土开采完
,打包发到公司的测试服务器上
,利用测试服务器认证后的域名实行调整,每回更换,调节和测试都要发一回测试,分明这种方法十一分麻烦且很不正确,所以那篇作品就对准这一个标题介绍一下怎么着运用ngrok和express消除开荒境况中微信接口的调理难点。

一:首先介绍一下ngrok,ngrok首要的机能正是将地面包车型大巴ip映射到外网
,并且分配给你贰个可用的域名,通过这几个域名能够让外网用户展开你的地面包车型客车web服务,使用起来也非常的粗略,官方网址也可能有文书档案也可能有详实介绍
。这里大致的介绍一下使用办法,首先去ngrok 的官方网址下载ngrok的相应的客户端
,并且注册用户 ,能够透过你的github账号可能google账号注册
,注册成功后再个人基本张开auth选项,复制这里的authtoken,如下图:

图片 5 

(这里就以window版本为例),然后下载达成解压,会有三个ngrok.exe文件,双击运营晤面世下边包车型客车命令行:

图片 6 

率先我们供给做到ngrok的token认证,不然运维会发生错误,运营一下发令

ngrok authtoken *****************
//*号正是私人商品房大旨中的token ,复制下来就能够了

证实完结后,就足以操作了,上海教室中的examples就是部分常用的示范命令,咱们用到的就是ngrok
http,前边接的参数便是您本地web服务的端口号,运维后会分配三个外网域名,通过这一个域名就足以访问到您的地方web服务,

图片 7 

而是,这一个域名在重启后就能重新分配叁个新域名,导致重启后必要去微信公众平台重新安装一下安然无恙域名和token认证
。比较遗憾的是在ngrok1.0的时候能够通过 ngrok http
subdomain=***(自定义域名) 80
固定每一趟的分配的域名,不过在2.0版本后,免耗费户无法稳定域名,只有付开销户才方可,固然各类月只须要$5,但是对于不是经常测试的人来讲依旧完全未有购买发卖欲望,关键是临近只扶助visaa……。但是对此想要免费固定域名的胖友来讲,消除办法仍旧有个别,国内有个sunny-ngrok
,能够免费申请八个自定义的固定域名
,具体科目能够去其官方网站查阅,也不是很复杂,有标题话能够在评价里面问笔者,就不详细讲了。当然想要实现外网映射的话还应该有许多别的方法,比方利用npm安装的Localtunnel和花生壳等等,能够活动驾驭一下。

二:获得域名后,接下去大家要做的正是行使该域名成功微信安全域名绑定啦,大家得以去微信公众平台报名三个测试号,不过这时填写时无法通过的,因为微信认证要求具有八个温馨的服务器准确响应配置诉求

图片 8 

测试号申请的时候填写配置消息的url,微信服务器会发送三个get央求到那几个地址上,get央浼会教导部分参数,大家须要用那些参数生成二个签字和微信参数的签名进行对照,相比较成功接口才会配备成功。

因为微信认证须要全体三个和煦的服务器
,所以这里大家就必要用到express搭建三个简便的服务器,用来达成微信的token认证和生成signature(签字),搭建的进度也很简短,参照express粤语文书档案,下边就贴一下官方网站的步调:

图片 9 

安装到位过后,进入myapp目录,创立三个app.js的文本 ,

var express = require('express');
var crypto = require('crypto') //使用npm安装后引入,用来生成签名
var http = require('request') //express的中间件,使用npm安装,用来发出请求
var jsSHA = require('jssha')//jssha是微信官网提供的nodejs版本签名算法,可以去官网下载官网的sample包
var app = express();
app.use(express.static('./review'))
app.get('/weixin',function (req, res) {//这个get接口就是测试号填写的接口,用来响应微信服务器的请求
  var token = 'weixin' //注意这里填写token,与微信测试号申请时候填写的token要保持一致  
  var signature = req.query.signature;
  var timestamp = req.query.timestamp;  
  var nonce = req.query.nonce;  
  var echostr = req.query.echostr;  
   /* 加密/校验流程如下: */  
   //1. 将token、timestamp、nonce三个参数进行字典序排序  
   var array = new Array(token,timestamp,nonce);  
   array.sort();  
   var str = array.toString().replace(/,/g,"");   
  //2. 将三个参数字符串拼接成一个字符串进行sha1加密  
  var sha1Code = crypto.createHash("sha1");  
  var code = sha1Code.update(str,'utf-8').digest("hex");  
   //3. 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信  
  if(code===signature){    
    res.send(echostr)  
  }else{
    res.send("error");
  } 
});
var server = app.listen(80, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

始建完结后,运营

node app.js

服务器就敞开好了,下面要留意的几点正是:

1:jssha无法用npm安装,因为npm安装的运作时候会报 Chosen SHA variant is
not supported

,必须运用官方网站提供的sample包,下载解压后,选拔node版本,展开后将node_module里面jssha文件复制到项目内的node_module里面就可以;

2:这里的token值须求和微信测试号中填入的token值一致;

今昔大家就可以开端填写测试号的参数了,填写完结微信服务器就能发送央求给你填写的接口了,都没有错响应的话就能够弹出布局成功。

理之当然到那还未有完毕,因为前端想要调用jssdk的接口还亟需经过接口央浼实现权限配置,这里大家能够看一下微信jssdk的验证文书档案,具体引用步骤这里就不赘述了,接口伏乞大约如下:

图片 10 

这么些接口首要正是交给当前的url诉求服务端获得相应的参数,达成权限配置,所以在express中还需求在写一个响应post央求的接口,那几个接口做的首要的劳作正是拿appid和appSerect(测试号提供)去乞请微信提供的接口生成access_token,然后拿那些access_token再去乞求微信提供的接口生成tiket,关于那五头文书档案上都有详细表达。最一生成签字,代码如下

// noncestr生成var createNonceStr = function() {
  return Math.random().toString(36).substr(2, 15);
};
// timestamp时间戳生成var createTimeStamp = function () {
  return parseInt(new Date().getTime() / 1000) + '';
};
//获取tiket
var getTiket= function (data) { //通过access_token获取tiket
  return new Promise((reslove,reject)=>{
    http.get(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${data}&type=jsapi`,
     function(err,res,body){
       if(res.body.tiket){
        resoleve(res.body.ticket)
       }else{
        reject(err)
       }     })   })}
// 计算签名方法
var calcSignature = function (ticket, noncestr, ts, url) {//使用jssha
  var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;
  shaObj = new jsSHA(str, 'TEXT');  return shaObj.getHash('SHA-1', 'HEX');
}
//返回给前端配置信息的post接口
app.post('/weixin',function(req,res,next){
   let appId = '******'
   let appSecret = '******'
   let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret }`
   http.get(url, function (err, response, body) {
    getTiket(response.body).then(resolve=>{
     let tiket = resolve//tiket
     let nonceStr = createNonceStr()//随机字符串
     let timeStamp = createTimeStamp()//时间戳
     let signature = calcSignature(tiket,nonceStr,timeStamp,req.body.url)
     let obj = { //将前端需要的参数返回
      data:{
        appId:appId,
        timestamp:timeStamp,
        nonceStr:nonceStr,
        signature:signature
      } 
     } 
     res.end(JSON.stringify(obj))
    }).catch(err=>{})
     res.end(JSON.stringify(err))
   });})

这里要注意的是微信重返的access_token
和tiket的都有7200s的限时,所以要开始展览缓存,小编的代码中未有写缓存的操作代码了,大家有二种办法:

1.拿到access_token和tiket后,直接写在变量中存下来,限制期限内就无须继续呼吁接口了,直接开始展览签订契约操作就足以了;过期后,在呼吁二次就好了,即使这种方式有个别笨,可是好歹限时还算长。

2.在服务器获得access_token和tiket后,写入本地的json文件中,具体步骤也不赘述了,然后剖断是或不是过期,过期后就再一次央求,没过期就一向读取json文件中的数据开始展览签订契约。

末尾吧,有三种采用:

首先:把咱们的前端项目实践 npm run build
后,把dist文件放入我们的服务器文件夹中,能够直接用express的static中间件

app.use(express.static('./dist'))

然后微信开拓者工具,输入分配的域名展开大家的类型,那样大家毫不安装代理了,不过需求实施build,项目大学一年级点的话依然有一些浪费时间的;

其次:正是为大家的花费条件在申请叁个域名,因为将来脚手架的热更新其实正是运营了一个webpack-dev-sever的微服务器,申请域名是后填写开拓的端口号就能够了,使得开拓地址和大家的服务器地址的二级域名同样,不过对于服务器的接口,开拓处境急需设置一下代理,而且热更新也会失灵,要求手动刷新一下,可是相对于第一种艺术大概会更加好一些。

二种方法运营成功后翻看发出诉求如若布署成功,调节台会产出布局成功的音信如下:

图片 11 

然后我们就足以愉悦的在动用jssdk的接口了,再也不求后端,能够自个儿在该地质衡量试好全数的接口了,且不是喜欢。

总结

以上所述是笔者给我们介绍的运用ngrok+express化解本地意况中微信接口调节和测试难点,希望对我们享有帮忙,倘诺大家有任何疑问请给自己留言,笔者会及时恢复生机大家的。在此也非常感激咱们对帮客之家网址的支撑!

在微信项指标开荒的时候,平常索要对微信jssdk提供的接口举行调整,比方说录…

因为项目中众多地点都关系到微信接口的调用 比方大多前台模块须要用到
后台模块也是有少数调用 别的模块也说不定会供给调用
 为了让他们都能很有利的第一手调用 作者把她们独立成为二个模块
那几个模块包蕴了基础的微信接口和微信jssdk

Question

运用thinkphp框架开辟微信公众号要求利用jssdk的一部分职能。Mark一些什么样缓和计划、模块设计某些小的case啦。
上边是参考的某个传送门:

图片 12

2、登入微信公众平台后台恐怕测试账号后台

进去后台之后。设置js安全域名。如图:图片 13填写顶尖域名就ok了。设置完事后,会容许推迟生效一小会,不要着急。

本身先成立了四个新的模块叫Weixin 并在其下部构建了调节器BaseController
也等于一个微信类

1、环境

thinkphp5.0.2
微信测试账号为例

 

4、开端调用

成功上述操作之后,我们早已打响的将微信jssdk安排到大家的花色中。通过阅读微信jssdk开辟的手册,大家得以窥见,大家选取jssdk首倘使要取得部分重视的参数:首尽管appId、

timestamp、$nonceStr…..不赘述,本身看文书档案。而那么些是足以复用的代码,所以自个儿在view层创建了public文件夹和jssdk.html文件,让急需利用到jssdk的模块增加那个文件就好了。如图:图片 14
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.

图片 15

public function mytest () {                            $Weixin = new \Weixin\Controller\BaseController();
          $domain = C('WEB_DOMAIN');              $request_url = $_SERVER['REQUEST_URI'];              $redirect_url = $domain.$request_url;            if(!isset($_GET['code'])){                             header('Location:  https://open.weixin.qq.com/connect/oauth2/authorize?appid='.$Weixin->appId.'&redirect_uri='.$redirect_url.'&response_type=code&scope=snsapi_base&state=1/');                 exit;                        }              $code = $_GET['code'];                 $access_token_arr = $Weixin->WechatAuth ->getAccessToken('code',$code);   //oauth2.0网页授权的access_token          //$access_token_arr数据结构如下          /* Array          (              [access_token] => OezXcEiiBSKSxW0eoylIeLrIQT6NoDaXZIUcW_1wOj_TwSQ_Jqp2CBj0RLBbgvBCkzyZ74E6066btMwNPj6JYaR_TPn9PH02FgR4APr7iOhihlYgosPEyDZIVJXduuvUj3ay5cVYpv_TDA3TBNvLiA              [expires_in] => 7200              [refresh_token] => OezXcEiiBSKSxW0eoylIeLrIQT6NoDaXZIUcW_1wOj_TwSQ_Jqp2CBj0RLBbgvBCzJ6lw18Bb-cy9yUp2Tojmp48u_95jVHl1WTODEM0Z3yAPY8sORIlF0Gw8_99eEXsCagdc29djCjEWv2TovkPig              [openid] => o0r2njtFSolnsaBoVP5MxjhNjUlg              [scope] => snsapi_base          )*/          $globals_access_token = $Weixin->WechatAuth->getAccessToken();    //全局access_token            $userInfo = $Weixin->WechatAuth->userInfo($access_token_arr['openid']); //通过全局access_token获取用户基本信息 未关注是array('subscribe'=>0,'openid')            if(!$userInfo['subscribe']){ //用户未关注  只能通过网页授权api获取用户信息              $data = array();              $data['access_token'] = $access_token_arr['access_token'];                          $data['openid'] = $access_token_arr['openid'];                          $userinfo = $Weixin->WechatAuth->getUserInfo($data);                           p($userinfo);//打印信息                          /*                  Array(                      [openid] => o0r2njtFSolnsaBoVP5MxjhNjUlg                      [nickname] => 呼啦啦                      [sex] => 1                      [language] => zh_CN                      [city] =>                       [province] =>                       [country] => 赞比亚                      [headimgurl] => http://wx.qlogo.cn/mmopen/rBgkzASpGRQLPXPDlEGmPoHl35qjwaA8s4WfOncETZm7kDGEVicEJZORzO73m7ib9Av7AK7icLrfl1nmhxGsglmzJRcnryNPy6T/0                      [privilege] => Array                          (                          )                    )              */              }else{  //关注了公众号 直接返回用户信息                p($userInfo);  //打印信息              /*                  Array(                      [subscribe] => 1                      [openid] => o0r2njtFSolnsaBoVP5MxjhNjUlg                      [nickname] => 呼啦啦                      [sex] => 1                      [language] => zh_CN                      [city] =>                       [province] =>                       [country] => 赞比亚                      [headimgurl] => http://wx.qlogo.cn/mmopen/rBgkzASpGRQLPXPDlEGmPoHl35qjwaA8s4WfOncETZm7kDGEVicEJZORzO73m7ib9Av7AK7icLrfl1nmhxGsglmzJRcnryNPy6T/0                      [subscribe_time] => 1427793013                      [remark] =>                   )              */            }                  }

发表评论

电子邮件地址不会被公开。 必填项已用*标注