搜索

+

95

-

vue如何获取微信用户的基本信息及用户图像？

vue 小程序公众号 html5 javascript

请问vue如何获取微信用户的基本信息及用户图像？

网友回复

+

15

-

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

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

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

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

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


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


        var app = new Vue({
            el: '#app',
            mounted() {
                if (!window.localStorage.getItem('openId')) {
                    // 如果缓存localStorage中没有微信openId，则需用code去后台获取
                    this.getCode()
                } else {
                    alert("openid为"+window.localStorage.getItem('openId'));
                    // 别的业务逻辑
                }
            },
            methods: {
                getCode () {
                    // 非静默授权，第一次有弹框
                    this.code = ''
                    var local = window.location.href // 获取页面url
                    var appid = 'wxac8d6782856ea0f7'
                    this.code = this.getUrlCode().code // 截取code
                    if (this.code == null || this.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`;
                   ...

点击查看剩余70%

我知道答案，我要回答

我有问题

最新提问