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

开发微信小程序，前提是申请到一个 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 的后台代码，在下一篇文章中，请见谅。

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

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

猜你喜欢