PHP+TP框架生成使用微信JS-SDK所需的配置信息,并验证

我在前几篇博客中写到了获取调用JS-SDK需要使用的access_token,网页授权获取用户基本信息,获取JS-SDK使用签名算法需要使用的jsapi_ticket,现在我们使用微信JS-SDK,注入配置,并验证是否正确.我用的是微信测试号


一.绑定域名(填写JS接口安全域名).PHP+TP框架生成使用微信JS-SDK所需的配置信息,并验证


二.引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js


三:通过config接口注入权限验证配置

使用wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

    appId: '', // 必填,公众号的唯一标识

    timestamp: , // 必填,生成签名的时间戳

    nonceStr: '', // 必填,生成签名的随机串

    signature: '',// 必填,签名

    jsApiList: [] // 必填,需要使用的JS接口列表

});验证配置是否正确.


四.生成签名.

1.签名需要的字段:noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分

2.在公共方法中定义函数nonceStr()用于获取随机字符串.

//生成随机字符串
function nonceStr(){
    //定义一个字符串
    $chars='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
    //当前的时间戳
    $time = time();
    //从该字符串中获取随机字符串
    $chars = $chars.$time;
    //打乱字符串
    $chars = str_shuffle($chars);
    return substr($chars,0,16);
}

3.生成签名.

在公共方法中定义signature()函数,用于生成签名

//生成签名函数,参数$time(生成签名的时间),$url(网页的url),$nonceStr(随机字符串)
//因为我们注入网页的配置信息中,生成签名的时间和随机字符串必须和注入的一样,
//所以我生成签名的时候传递一个参数,以达到相同的时间戳,和随机字符串。
function signature($time,$url,$nonceStr){
    //拼接字符串
    $string = 'jsapi_ticket='.getJsapiTicket().'&noncestr='.$nonceStr.'&timestamp='.$time.'&url='.$url;
    //生成签名
    $string = sha1($string);
    return $string;
}

五.生成调用微信JS-SDK接口所需要的配置信息

在公共方法中定义getConfig()函数,用于生成配置信息

//生成使用微信JS-SDK需要注入的配置信息,参数$url(当前网址的url)
function getConfig($url){
    $array = [];
    $array['debug'] = true;
    $array['appId'] = C('appID');
    //生成签名的时间戳
    $time = time();
    $array['timestamp'] = $time;
    //签名使用的随机字符串
    $nonceStr = nonceStr();
    $array['nonceStr'] = $nonceStr;
    $array['signature'] = signature($time,$url,$nonceStr);
    //设置需要使用的js接口
    $array['jsApiList'] = ['chooseImage'];
    //返回配置信息
    return json_encode($array);
 }

六.获取配置信息并注入到网页,通过微信开发者工具查看配置是否正确.

class IndexController extends BaseController {
    public function index(){
        //当前的网址
        // 注意 URL 一定要动态获取,不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
        //获取配置信息
        $config = getConfig($url);
        //传入配置信息到网页中
        $this->assign('config',$config);
        $this->display();
    }
}

在网页中获取配置信息并通过

wx.config({$config});验证

我们在微信开发者工具中打开该网页,会发现配置正确.

以上是生成配置信息并验证的流程,有问题请大家指出,谢谢