搜索

+

80

-

h5页面如何通过js获取微信用户的昵称和图像？

html5 javascript 公众号

请问h5页面如何通过js获取微信用户的昵称和图像？

网友回复

+

0

-

首先登录公众号后台，选择开发-》接口权限

然后找到网页账号网页授权获取用户基本信息，点击修改，输入你代码运行的域名，不需要填http://或https://,比如baidu.com

确定后，我们来编写代码：

先写html代码，这个文件一定要放到上面填的域名下面运行，否则会报错的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>获取微信用户基本资料</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>


</head>
<body>
    <script type="text/javascript">

        $(function() {
            if (!window.localStorage.getItem('openId')) {
                // 如果缓存localStorage中没有微信openId，则需用code去后台获取
                getCode();
            } else {
                alert("openid为"+window.localStorage.getItem('openId'));
                // 别的业务逻辑
            }
        });


        function getCode () {
            // 非静默授权，第一次有弹框
            var code = ''
            var local = window.location.href // 获取页面url
            var appid = 'wxac8d6782856ea0f7'
            code = getUrlCode().code // 截取code
            if (code == null || code === '') {
                // alert(local);
                // 如果没有code，则去请求
                var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
                //  alert(url);
                window.location.href = url;

            } else {

                $.get('后端的url地址&code='+ code, function(data) {
                    if (data.err) {
                        alert(data.data);
                    } else {
                        alert("获取成功");
                        window.localStorage.setItem('openId', data.data.openid);
                    }


                },
                    "json");




                // 你自己的业务逻辑
            }
        };
       function  getUrlCode() {
            // 截取url中的code方法
            var url = location.search
            //winUrl = url
            var theRequest = new Object()
            if (url.indexOf("?") != -1) {
                var str = url.substr(1)
                var strs = str.split("&")
                for (var i = 0; i < strs.length; i ++) {
                    theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
                }
            }
            return theRequest
        };


    </script>
</body>
</html>

好了，前端在js中获取了code，然后把这个code传给后端吧，后端根据这个code去换access-token，最后根据access-token去获取用户的资料，代码如下，以php为例

<?php
$appid = "wxa423432423432423423";
$appsecret = "234234345345345345345";
function http_curl($url) {
    $curlobj = curl_init();
    curl_setopt($curlobj, CURLOPT_URL, $url);
    curl_setopt($curlobj, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curlobj, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curlobj, CURLOPT_SSL_VERIFYHOST, FALSE);
    $output = curl_exec($curlobj);
    curl_close($curlobj);
    return $output;
}


$url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$_GET['code'].'&grant_type=authorization_code';
$result = $this->http_curl($url);
$acessdata = json_decode($result, 1);

if (isset($acessdata['access_token'])) {
    $access_token = $acessdata['access_token'];
    $openid = $acessdata['openid'];
    $url2 = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$access_token.'&openid='.$openid.'&lang=zh_CN';
    $result2 = $this->http_curl($url2);
    $userinfo = json_decode($result2, 1);
    echo json_encode(['err' => false,
        "data" => $userinfo]);
} else {
    echo json_encode(['err' => false,
        "data" => "出错了"]);
}

我知道答案，我要回答

我有问题

私活外包

最新提问