1.用户进来一个页面时,按照微信小程序的生命周期,开始解析onLoad里面的内容。
所以我们在第一步,就把代码放在这里,看看全局变量是否已经有值,
2.如果之前没有授权,则查看用户是否有请求一个授权登录的按钮,
3.最后查阅这个函数的授权结果,是成功返回还是失败。代码如下:
onLoad: function () { if (app.globalData.userInfo) { console.log(1) this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ console.log(2) // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { console.log(12) app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { console.log(3) // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) }, fail:res=>{ console.log(4); this.setData({ getUserInfoFail:true }) } }) } },
第二步:通常我们这里会进入第二步,允许使用按钮提示用户授权。在onLoad周期里面我们没获取到用户是否有成功授权,我们下一周期onShow,在这里,我们就可以查阅授权的状态,如果进入了fail操作,说明还没有授权,在失败的时候,我们赋值告知授权失败,我们页面根据这个状态值,来显示需要用户点击授权。代码如下:
login: function () { console.log(111) var that = this // if (typeof success == "function") { // console.log(6); // console.log('success'); // this.data.getUserInfoSuccess = success // } wx.login({ success: function (res) { var code = res.code; console.log(code); wx.getUserInfo({ success: function (res) { console.log(7); app.globalData.userInfo = res.userInfo that.setData({ getUserInfoFail: false, userInfo: res.userInfo, hasUserInfo: true }) //平台登录 }, fail: function (res) { console.log(8); console.log(res); that.setData({ getUserInfoFail: true }) } }) } }) },
页面xml中根据这个getUserInfoFail来显示按钮。
<button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
当用户点击授权后,弹出一个弹窗,提示他授权,这个时候调用的是getUserInfo这个函数,代码如下:
getUserInfo: function(e) { console.log(5); console.log(e) if(e.detail.userInfo){ app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }else{ this.openSetting(); } },
如果我们可以获取到detail.userInfo的值,说明参数正确,用户点击了允许授权。如果用户点击拒绝,这个时候我们就要调用openSetting这个函数。这个函数主要是打开授权的地方,有兼容性问题,低版本不支持。
openSetting: function () { var that = this if (wx.openSetting) { wx.openSetting({ success: function (res) { console.log(9); //尝试再次登录 that.login() } }) } else { console.log(10); wx.showModal({ title: '授权提示', content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法:删除小程序->重新搜索进入->点击授权按钮' }) } }
如果用户进入了授权页后,点击允许我们获取用户信息,返回成功时,我们执行login这个函数,这时,我们就可以进入getuserInfo() 里面拿到授权的信息了。那么头像、用户信息和其它一些个人的资料都可以查到了。
完整的index.js如下:
//index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, getUserInfoFail:false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onShow:function(){ this.login(); }, onLoad: function () { if (app.globalData.userInfo) { console.log(1) this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ console.log(2) // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { console.log(12) app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { console.log(3) // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) }, fail:res=>{ console.log(4); this.setData({ getUserInfoFail:true }) } }) } }, getUserInfo: function(e) { console.log(5); console.log(e) if(e.detail.userInfo){ app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }else{ this.openSetting(); } }, login: function () { console.log(111) var that = this // if (typeof success == "function") { // console.log(6); // console.log('success'); // this.data.getUserInfoSuccess = success // } wx.login({ success: function (res) { var code = res.code; console.log(code); wx.getUserInfo({ success: function (res) { console.log(7); app.globalData.userInfo = res.userInfo that.setData({ getUserInfoFail: false, userInfo: res.userInfo, hasUserInfo: true }) //平台登录 }, fail: function (res) { console.log(8); console.log(res); that.setData({ getUserInfoFail: true }) } }) } }) }, //跳转设置页面授权 openSetting: function () { var that = this if (wx.openSetting) { wx.openSetting({ success: function (res) { console.log(9); //尝试再次登录 that.login() } }) } else { console.log(10); wx.showModal({ title: '授权提示', content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法:删除小程序->重新搜索进入->点击授权按钮' }) } } })
index.xml如下:
<!--index.wxml--> <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:if="{{hasUserInfo}}"> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>
至此,我们就完成了用户的流程了。