您现在的位置是:网站首页 > 心得笔记

微信公众号开发——JS-SDK

盛悦2019-02-21488人围观
简介微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的一个封装好的网页开发工具包,简而言之,你可以在自己的第三方网页上调用这些JS接口(写好的封装方法),只要按照他的规则调用便可,最常用的就是分享到朋友圈或者分享给朋友

1、主要用途


        在于我们的分享朋友圈、分享朋友


2、什么是微信JS-SDK


        微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的一个封装好的网页开发工具包,简而言之,你可以在自己的第三方网页上调用这些JS接口(写好的封装方法),只要按照他的规则调用便可,最常用的就是分享到朋友圈或者分享给朋友


3微信JS-SDK开发步骤


       步骤一:绑定域名

             开发者工具-》公众平台测试账号-》JS接口安全域名 填写合法的域名

        js1(1).png

            步骤二:引入js文件(http://res.wx.qq.com/open/js/jweixin-1.4.0.js

             在你想实现一些js的封装功能时,你就必须要引入微信公众平台提供的js 文件 引入之后js文件才会有其中的方法

        注意:我这里按照官方文档所说,引用的是1.4.0,但是在接口调用过程中报错“没有此SDK或暂不支持此SDK模拟”,导致我分享出去的内容不能正常显示设置的图文信息,最终我引入了低版本的1.1.0 —— //res.wx.qq.com/open/js/jweixin-1.0.0.js,成功解决了问

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

             每一个需要分享的页面都需要写config配置


wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机字符串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});


    参数介绍:

    1、appId:公众号的唯一标示,可直接获取

    2、timestamp:生成签名的时间戳time()

    3、nonceStr:生成签名的随机字符串,通过观察文档例子中的nonceStr可知,是由A-Z、a-z、0-9随机生成的16位字符串

    4、signature:签名

            如何生成签名呢?

                    生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket。

                    生成签名步骤:

                        1、获取全局access_token

            $access_token = $this->getWxAccessToken();

                       

                         2、通过access_token采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

            if (!empty(session('jsapi_ticket')) && session('jsapi_ticket_expire_time') > time()) {//如果session中保存有效的jsapi_ticket
                $jsapi_ticket = session('jsapi_ticket');
            } else {
                $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
                $res = $this->http_curl($url, 'get', 'json', '');
                $jsapi_ticket = $res['jsapi_ticket'];
                session(['jsapi_ticket' => $jsapi_tickect]);
                session(['jsapi_ticket_expire_time' => time() + 7200]);
            }
            return $jsapi_ticket;

                   

                     3、获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名signature

                            3.1、对所有待签名参数jsapi_ticket、noncestr、timestamp、url,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

                $signature = 'jsapi_ticket='.$jsapi_ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url;

                            3.2、对string1进行sha1签名,得到signature

               $signature = sha1( $signature );


步骤四:通过ready接口处理成功验证

             如果说分享成功后可以做后续操作,比如:我们想统计有多少人分享了这个活动

        wx.ready(function(){
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        });


            步骤五:通过error接口处理失败验证

             有可能处理失败,他会提供一些原因,比如:网络带宽、参数写错等

        wx.error(function(res){        
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        });


4、代码实现分享到朋友圈、分享给朋友、微信扫一扫、拍照或从手机相册中选图接口

//分享接口
public function shareWx () {//不是在控制器里操作了 是在一个视图上
    $timestamp = time();
    $jsapi_ticket = $this->getJsApiTicket();
    $url = "https://blog.blonglee.me/test/shareWx";
    $noncestr = $this->getRandCode(16);//随机字符串
    $signature = 'jsapi_ticket='.$jsapi_ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url;
    $signature = sha1( $signature );
    return view('front.test.index',compact('timestamp', 'noncestr', 'signature'));
}

//1、获取jsapi_ticket全局票据
public function getJsApiTicket () {
    //如果session中保存有效的jsapi_ticket
    if (!empty( session('jsapi_ticket') ) && session('jsapi_ticket_expire_time') > time()) {
        $jsapi_ticket = session('jsapi_ticket');
    } else {
        //1、获取全局access_token
        $access_token = $this->getWxAccessToken();
        //2、调用接口
        $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
        $res = $this->http_curl($url, 'get', 'json', '');
        $jsapi_ticket = $res['ticket'];
        session(['jsapi_ticket'=>$jsapi_ticket]);
        session(['jsapi_ticket_expire_time'=>time()+7200]);
    }
    return $jsapi_ticket;
}

//获取16位随机码
public function getRandCode ($num=16) {
    $array = array(
        'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9'
    );
    $tmpstr = '';
    $max = count( $array );
    for  ($i=0;$i<$num;$i++) {
        $key = rand(0, $max-1);
        $tmpstr .= $array[$key];
    }
    return $tmpstr;
}


    测试方法同之前讲解的网页授权,通过草料生成二维码 微信扫码测试

js2(1).png