(unfinish)【微信小程序】获取用户信息的流程+javascript的回调函数代码分析

发布时间：2024-11-27 11:42

JavaScript中的函数是可重用代码块 #生活知识# #科技生活# #编程学习#

对于熟悉类C语言而又没接触过js的我来水，经常觉得js的语法很奇怪

//xxx.wxml <button> wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> 1234567

首先以上代码是在index.wxml里面截取的，代表了下图的一个button

js里面的data:

xxx.js data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, 12345678

然后了解总体情况以后来注意分解代码：

wx:if="{{!hasUserInfo && canIUse}}" 1

如果hasUserInfo != true 以及 canIUse == true 则显示这个按钮

1、hasUserInfo

//xxx.js data:{ .... hasUserInfo: false .... } 12345678

userInfo由哪些函数改变呢？

onLoad: function () { if (app.globalData.userInfo) { this.setData({ ... hasUserInfo: true }) } else if (this.data.canIUse){ app.userInfoReadyCallback = res => { this.setData({ hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { this.setData({ ... hasUserInfo: true }) } }) } }, getUserInfo: function(e) { this.setData({ ... hasUserInfo: true }) }

123456789101112131415161718192021222324252627282930

2、接下来看看 canIUse

//xxx.js data:{ .... canIUse: wx.canIUse('button.open-type.getUserInfo') .... } 12345678

判断小程序的API，回调，参数，组件等是否在当前版本可用。

wx.canIUse('button.open-type.getUserInfo') 1

-----------------------------------------------------------------------2019.4.1---------------------------------------------------------------------

获取用户授权状态

wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } })

12345678910111213141516171819

1.首先看到

if(res.authSetting['scope.userInfo']){} 1

然后来看看res.authSetting的内容
在这里插入图片描述

通过上述图片我们可以看到res.authSetting的结构

// res.authSetting = { // "scope.userInfo": true, // "scope.userLocation": true // } 1234'

所以 res.authSetting[‘scope.userInfo’] 就是用来获取”res.authSetting“对应的value

所以这个 object : key 的结构，如果要获取value的值，应该是这样的 object[key]

2.授权成功之后，进一步看if语句体里面的内容

wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) 123456789101112

调用wx.getUserInfo
在这里插入图片描述
这是getUserInfo的官方文档，然后会返回一个Object