小程序填坑之路—读取用户信息、缓存其数据、读取其数据（button、wx.setStorage、wx.getStorage）

        深深以为，遇见一个好的文章不容易，希望自己也能用心填坑。

        首先来说读取用户信息，之前是用getUserInfo()，但在2018年4月30日之后，该接口不适用于开发版和测试版，正式上线的小程序不受影响。很不幸，我就是4月30后后的这批。出于优化用户体验（我真的不是自己想省事。。。），用了这个方法，测试的时候，提示“该接口不适用，请升级。”好的吧，就这样我开始在网上各种找，“小程序自动弹出用户登录”、“小程序自动弹窗”……各种关键词真的都用到了，没错……没有找到……（大写的沮丧…）

        还是用微信小程序修改后的button按钮吧，具体代码如下：

wxml：

 <button open-type='getUserInfo' lang="zh_CN" bindgetuserinfo="onGotUserInfo" class='moto'>点击开启您的购物之旅</button>

js：

//获取用户信息
  onGotUserInfo: function(e) {
    console.log(e);
    if (e.detail.userInfo != null) { //用户点击允许授权
      App.imageUrl = e.detail.userInfo.avatarUrl,
      App.nickName = e.detail.userInfo.nickName,
      App.authorize = true;
    }
    console.log("nickname=" + e.detail.userInfo.nickName);
}

以上代码运行后，可以直接获取到用户的微信公开信息，我列出来获取后的数据

这一部分就是微信用户的公开信息，获取到公开信息后，就要写入缓存，以便后台调用，在刚才的js中添加wx.getStorage()方法，直接上代码理解，

  console.log("nickname=" + e.detail.userInfo.nickName);   //接上段js的
    wx.setStorage({    //数据缓存方法
      key: 'user_key',   //关键字，本地缓存中指定的key
      data: e.detail.userInfo,    //缓存微信用户公开信息，
                                  //看到上面的截图就能看到，数据是在detail里的
      success: function() {      //缓存成功后，输出提示
        console.log('写入userInfo缓存成功')
      },
      fail: function() {        //缓存失败后的提示
        console.log('写入userInfo发生错误')
      }
    })

    wx.switchTab({     //先获取到用户信息，在执行跳转，
                       //wx.navigateTo会形成父子级关系，wx.switchTab是同级
      url: "../index/index"
    })
  }

到目前为止，已经实现了数据存储，那我要是在index页面调用这个数据该怎么做呢？那就要用到wx.getStorage，读取本地存储。wx.getStorage要根据刚才的key关键字找到存储的data。上代码理解

   //在index.js中读取本地缓存，这段代码要写在index.js的onLoad里

    wx.getStorage({
      key: 'user_key',    //这个是刚才在缓存数据时的关键字，保持一致
      success: function(r) {   //成功后回调的函数，先打印出来
        console.log(r.data);
        that.setData({       //这个地方我等下要详细讲解，毕竟栽了两次坑了，这是第二次
          user_value: r.data
        })
        console.log(that.data.user_value)
      },
      fail: function() {      //失败后回调的函数
        console.log('读取user_key发生错误')
      }
    })

关于这段代码中，首先来说这个that是干什么用的？是用来保存读取缓存的数据的。那为什么要用that，不用this呢？

这个地方需要牵扯到this的指向问题，且不说别处，单在这里，我在onLoad先定义了"var  that  =  this"，首先，this是指当前对象，如果我没有定义这个that，把这句代码改成“this.setData”会报错，报错截图如下，打印没问题，却出现了这个，在这里，this仅仅是在这个函数方法里，并不能在外部被调用，那这个this就是指向不明确了，同样在下面调用的时候也是不对的。

再说下注意事项：

that后面不要少了data，一定要看that包含了什么，什么下面才有自己想要的数据，一定要在小程序的调试器—Sources下多打断点调试。