关于开发微信小程序获得授权登录及异步问题

这是微信开发登录页面


可以清除登录信息，进行调试

这里是wxml页面
下面进入正题，小程序第一次运行时，什么数据都没有，如上方图片显示的。
第一部分
异步问题，是由于函数没有按照顺序进行，wx.getuserinfo或者 wx.request等有网络请求的存在都会发生异步问题，需要妥善解决，否者取不到数据。
button按钮中：
一、wx：if 判断与index.js中data中的数据绑定。
二、opentype=“getuserinfo”是固定用法，与点击事件bindgetuserinfo绑定，bindgetuserinfo和wx.getuserinfo一样触发了会弹窗并返回用户信息，而点击事件有一个函数是getUserInfo（此函数作用获取用户信息并返回）。
三、if不满足时会显示获取头像昵称按钮，点击后会弹窗，弹窗的原因就是上面的二。

第二部分

这个就是index.js中的gerUserInfo函数
这个就是index.js中的gerUserInfo函数。
一、app.globalData.userInfo是app.js中的全局变量，这里在index.js中用的getApp（）进行获取，具体一会再说。
二、这个gerUserInfo函数有一个参数为e，而 e.detail.userInfo就是获取用户信息（后台运行规定这样，不用管为什么），因为这个函数是点击事件bindgetuserinfo绑定的，而opentype=“getuserinfo”是固定用法又与事件bindgetuserinfo绑定。你只要触发了这个事件，就会用e.detail.userInfo返回信息。
三、this.setData进行赋值，index.js中的data有下方这几个数据，motto不用多说了吧，helloworld。userinfo是用户信息，hasuserinfo是一个标志，用户信息更新后设为true，wx.canIUse(‘button.open-type.getUserInfo’)是判断小程序的API，回调，参数，组件等是否在当前版本可用，小程序文档中有，就是判断button组件的属性可否用，可用为真，不可用为假。button组件的属性就是getuserinfo弹窗。

index.js中的data有这几个数据

如果弹窗你点了接受，那么数据就会通过函数gerUserInfo（），进行传递赋值，这样data中的userinfo和hasuserinfo标志都会赋值，用户信息就获取到了，wxml就会显示数据，此时{ {!hasUserInfo && canIUse}}为假，会执行else显示头像和名字。还没接受，{ {!hasUserInfo && canIUse}}为真，你仔细想想就明白了。数据绑定的时候，数据一旦更新，会实时进行显示。
数据绑定的时候，数据一旦更新，会实时进行显示

第三部分

然后我们来看完整的app.js和index.js。

index.js

微信开发工具截不全，用的别的编辑软件，最下方就是点击事件函数，还是没截全
app.js

讲讲对授权登录的见解，wx.login没啥用

app.js中最后的globalData，是全局变量，null空，想调用就要在其他js文件中引入const app = getApp（），调用时用app.globalData.XXX进行使用。
一、index.js 和 app.js 由于存在网络请求，wx.login和wx.getUserInfo都是网络请求，会发生异步，小程序第一次运行时，app.js的onlunch函数先运行，但当运行到wx.login是网络请求，不会运行wx.getsetting，就会转而运行index.js中的onload函数，这就是异步，如果你想了解关于异步的具体知识，自己百度一下，我也半吊子。
二、然后执行onload， console.log(app.globalData.userInfo)会输出一个null（想调试可以自己在控制台输出看顺序），然后if判断也是假的，然后else if判断，是真的，会执行，caniuse是什么上面说了。再看下方的else分支，是上方两个判断都不行时才进行，可以看注释，进行版本兼容处理，一般不用考虑。
三、重点来了，解决异步问题的方法，callback回调函数，当执行到

这里时，onload会挂起，也就是说onload里的else if后边的都不会运行了，包括app.userinforeadycallback中的语句，而要等待app.js中的onlunch函数中的userInfoReadyCallback函数返回值了在进行。但是第一次运行时还没有授权，所以wx.getsetting的if判断不过，什么都没发生。具体看下方
四、app.js中的

wx.getsetting上面的wx.login是干嘛的可以去查查小程序文档，先不用管，这里只讲授权登录，可以删除，删除后，不会碰到网络请求wx.login，也就不会转而运行index.js中的onload函数，删除后会继续运行wx.getsetting，当执行到网络请求wx.getUserInfo再去运行index .js的onload，wx.getsetting是查看用户是否授权，判断if（res.authSetting[‘scope.userInfo’]）就可得到是否授权，没有授权，if判断为假（当然第一次运行时，用户没有任何操作，判定为假）什么都不会发生，然后再运行index.js中的onload，（其实顺序无所谓，因为有一个回调函数）。用户点击授权登录按钮，授权后就会显示头像和名称，详情就看第二部分。
上面讲的都是第一次运行时！！用户什么都不做，或者点击按钮发生的事件。
第四部分
授权后的执行，wx.getSetting就会有记录了，

当用户第二次，或者后面再进行登陆小程序时，因为授权过了，有记录，所以小程序加载时，app.js的onlunch函数进行执行时，wx.getSetting的if判断通过，执行到wx.getUserInfo了，这是网络请求，再转而执行index.js的onload，接下来回到第三部分的二，再遇到

回调函数这里时，就是第三部分的三中，onload会挂起，也就是说onload里的else if后边的都不会运行了，包括app.userinforeadycallback中的语句，而要等待app.js中的onlunch函数中的that.userInfoReadyCallback(res)函数返回值了在进行，接着网络请求wx.getUserInfo执行

that.globalData.userInfo = res.userInfo，是将获取的用户信息给全局变量globalData.userInfo，

传递到app.js的that.userInfoReadyCallback（res）就是你在index.js中的app.userinforeadycallback（）函数内的语句。有点绕口，意思就是this.setData（{。。。}）

that.userInfoReadyCallback(res)将res就是请求到的用户信息，传递回去给this.setData（{。。。}），传递完了，继续执行onload。
第四部分是授权后，以后的登录流程。注意区分
以上就是对授权登录的个人见解。