先来看下下面这样写有什么问题？
me/index.wxml:
<view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button> <block wx:else> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view></view>me/index.js:
Page({ /** * 页面的初始数据 */ data: { userInfo:{}, hasUserInfo:false, canIUse:wx.canIUse("button.open-type.getUserInfo") }, //实现获取用户信息的方法 getUserInfo:function(e){ //console.log(e); this.setData({ userInfo:e.detail.userInfo, hasUserInfo:true }) }})getUserInfo方法能够获得该事件e,打印该事件可以看到用户信息：
但是会发现这样做有个问题，一旦重新编译进入小程序会让我们再次点击获取信息，这不是我们想要的。
接着看到app.js里有globalData这个全局变量，一旦用户授权后，信息就会存到这个全局变量中
globalData: { userInfo: null }如果想要在其他页面拿到总组件的对象，可以直接在每个页面的index.js里面获取应用实例，然后打印app，发现有我们所需要用到的东西。
然后需要不管打开哪一个页面，都是能够获取数据的，所以选onLoad这个生命周期
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { 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 }) } } },
