微信JSSDK实现微信分享

前两天是试了试微信分享,看看文档感觉挺简单的一个东西,但是写写的时候 费了好大的劲。


微信JSSDK实现微信分享_第1张图片
大概效果是这样的

首先查看文档,按照里面的要求引入JS文件并且通过config接口注入权限验证配置

微信JSSDK实现微信分享_第2张图片

这里其他都还好一般出问题的都是这个signature。查看文档获取signature之前需要有access_token和jsapi_ticket。前者用于获取jsapi_ticket,而jsapi_ticket用于加密生成signature。
微信JSSDK实现微信分享_第3张图片

这里我踩到的坑是其中的url,我的网址是 http://wx.zhaobo1.cn/jsshare。我很理所当然的使用这个网址作为url的值去生成signature。然后就是一直报invalid signature。然后突然想到会不会是网址的关系(因为看到了下面的网址和我的不一样)。多了一个form,然后试着那原来的url替换掉,然后就一点事情都没有了。
微信JSSDK实现微信分享_第4张图片

哦哦哦,,对了还有还有如果是订阅号使用测试号的话还有一个小坑。域名和网址的区别。域名不需要加上http://或者https://。- -虽然道理我也懂,但是做的时候,我是真的有点傻傻的分不清。


微信JSSDK实现微信分享_第5张图片

下面是用laravel实现的代码,可以参考

    /**
     * 获取access_token
     * @return mixed
     */
    function getAccessToken(){
        $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' . config('params.WXAPPID') . '&secret=' . config('params.WXAPPSCERET');
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_HEADER, 1);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $res = curl_exec($ch);
        curl_close($ch);
        return json_decode($res,FALSE);
    }

    /**
     * 获取jsapi_ticket
     * @param $access_token
     * @return mixed
     */
    function getJsapiTicket($access_token){
        $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' . $access_token .'&type=jsapi';
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_HEADER, 1);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $res = curl_exec($ch);
        curl_close($ch);
        return json_decode($res,FALSE);
    }

    /**
     * 微信jssdk分享
     * @param Request $request
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
     public function jsShare(Request $request){
        //获取accesstoken
        $access_token = $request->session()->get('access_token','');
        if (!$access_token){
            $access_token = $this->getAccessToken()->access_token;
            $request->session()->put('access_token',$access_token);
        }

        //获取jsapi_ticket
        $jsapi_ticket = $request->session()->get('jsapi_ticket','');
        if (!$jsapi_ticket){
            $jsapi_ticket = $this->getJsapiTicket($access_token)->ticket;
            $request->session()->put('jsapi_ticket',$jsapi_ticket);
        }

        $arr = [
            'appid' => config('params.WXAPPID'),
            'timestamp' => (string) time(),
            'noncestr' => str_random(16),
        ];
        $arrTmp = [
            'jsapi_ticket'=>$jsapi_ticket,
            'noncestr'=>$arr['noncestr'],
            'timestamp'=>$arr['timestamp'],
            'url'=>$request->getUri()
        ];
        $tmp = '';
        foreach ( $arrTmp as $k => $v){
            $tmp .= $k . '=' . $v . '&';
        }
        $tmp = substr($tmp,0,strlen($tmp)-1);
        $arr['signature'] = sha1($tmp);
        return view('wx.jsshare',$arr);
    }

这里我把access_token和jsapi_ticket写在session里面了。也可以写到地方去的。您开心就好。

你可能感兴趣的:(微信JSSDK实现微信分享)