微信小程序-获取用户信息-前端写法

2021年4月25日 38点热度 0条评论 来源: RenQiang_Cheng

开发微信小程序,前提是申请到一个 appId 并拿到 appSecret ,并在微信公众平台配置好小程序对应的服务器域名。

小程序可以通过两种方式获取到用户信息,并且获取到信息之后,推荐直接存到小程序的全局变量中,后续直接在全局变量中读取,无需在重新获取。

方法一:

使用 appId 新建小程序模板,在创建时,勾选中“建立普通快速启动模板”。创建成功后,在 pages/index/index.js文件中可以看到如下代码:

    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }

内容很好理解,通过微信的接口获取用户信息,并存入到全局变量中。注意:全局变量 userInfo 是必须在 app.js 文件中已经定义好的,否则会出错。

方法二:

是通过自定义的后台接口,把必要的参数传递到后台,然后返回用户信息自定义的token,token是用来做之后授权校验使用。如下的例子是直接反馈了 token ,并没有把 用户信息返回回来:

    //测试授权
    wx.login({
      success: function (res) {
        var code = res.code;
        wx.getUserInfo({
          success: function (res) {
            console.log(res.userInfo);
            var iv = res.iv;
            var encryptedData = res.encryptedData;
            var signature = res.signature;
            var rawData = res.rawData;

            wx.request({
              url: "https://kevin.kevinkevin.com/login_status",//上传用户信息和登录用的code,获取token
              data: {
                code: code,
                signature: signature,
                rawData: rawData,
                encryptedData: encryptedData,
                iv: iv
              },
              success: function (res) {
                
                if (res.statusCode && res.statusCode == "200"){
                  //从后台获取的token,前端自己保存到全局变量中,备用;以后每次使用request都把该变量存入header变量
                  console.log("token : " + res.data);
                  
                  app.globalData.token = res.data;
                  
                }
              }
            })

          },
          fail: function () {
            _this.authSetting();
          }
        })
      }
    })

获取到的 token 也是直接存到了全局变量,备用。

因为小程序的前后台我是分开电脑开发的,所以第二种获取用户信息和 自定义 token 的后台代码,在下一篇文章中,请见谅。

之后会在评论里附加上源代码下载链接

 

 

    原文作者:RenQiang_Cheng
    原文地址: https://blog.csdn.net/u013276512/article/details/81605719
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。