小程序-用户授权授权后的信息读取流程

在小程序中，不允许直接d出用户授权的选择框，所以需要开发人员在界面上来设置提示信息，诱导用户点击，然后完成用户数据的录入和存取。在开发的过程中，某些请求是依托用户登录之后获取到的openId才能继续执行的，所以在页面上，某些数据渲染之前需要判断用户是否登陆，如若没有登录，怎样设计更好的交互来让用户登录。

使用小程序时，首先会进入到appjs这个文件中，这个文件里包含了俩个方法，一个是wxlogin()，另一个是wxgetSetting()，wxlogin()的目的是为了在用户登陆之后获取到一个对应的 code 值，然后通过这个值去自己的后台换取一个openId；wxgetSetting()第一是为了判断用户的授权范围，另一个是获取对应权限内的信息，比如说，用户授权小程序可以使用自己的基本信息，就可以在这个方法中获取到用户的头像、微信名、微信设置的城市这些字段，这就是一些需要掌握的基本流程，具体怎么实现登录呢？

在小程序中，官方给出了一种解决方案-button按钮：

在这个按钮中，有几个属性：

●  type ：按钮的类型，可以设置为primary，背景色为绿色

●  wx:if ：显示条件，内容分别为hasUserInfo和canIUse俩个字段，同时为真即可显示（俩个字段均需要在data中初始化赋值）

●  open-type ：按钮的功能类型，getUserInfo是为了获取基本信息（也可以设置为其他→getPhoneNumber：获取用户手机号）

●  bindgetuserinfo ：绑定的点击事件。在js中写对应的逻辑

在用户点击按钮之后，会出现一个d窗，确定用户是否授权 ：

当用户点击允许之后，进入我们绑定的getUserInfo函数中：

在执行逻辑中，首先通过wxlogin()方法获取到用户对应的openId，方便后续的 *** 作，然后再通过wxgetUserInfo()来获取到用户的基本信息，发送请求，将基本信息入库存储，或者展示到页面上，就完成了登录流程。

1在登陆中可能会涉及到多个页面登陆成功之后的状态同步，可以通过 appgloableData 来实现，在全局对象中设置一个字段，然后不论在哪个页面实现了登录，都可以通过全局对象来完成更新。

2在 获取用户信息 的时候，有时候需要获取的是 中文类型 的数据，可以在 wxgetSetting() 的请求体中加一个 lang:'zh_CN'。 这样获取到的数据就是中文格式的了

记得上次接小程序的项目已经是去年10月份了，隔了大半年，再次捡起来，这感觉，跟当初刚刚写的时候差不多。

先放个官方链接： >

一个很常用的功能，但是我还是发现有一些需要注意的地方在里面，简单记录一下。

第一个问题就是这个 button 组件需要添加 open-type 属性，并指定为 getUserInfo 类型，来获取用户基本信息。还有另外一种做法，具体可以参考 官方文档的说明 。

放一个动图哈哈哈

js 部分就是响应点击事件，使用 api wxgetUserInfo(Object object)

获取用户信息，注意传递给 wxgetUserInfo 的是一个字典其中包含了两个函数分别作为成功和失败的回调函数（callback function）

注意 this 的指代对象发生了变化，最开始的this是指代 Page() 构造出来的对象，在函数里面使用 this 会说未指定，所以我们使用了 that 承接一下，这也算传统艺能咯。

另外一点：获取用户信息时会自动d出一个对话框问用户是否提供信息，这个d窗只d出一次，如果用户点击了拒绝后来又想改为允许，可以使用 wxopenSetting({})

除了可以获取用户的昵称之外还有很多信息可以得到，还有一个比较常用的就是用户头像了也就是 resuserInfoavatarUrl 。

<!--indexwxml-->

<view class="container">

<view bindtap="bindViewTap" class="userinfo">

<image class="userinfo-avatar" src="{{userInfoavatarUrl}}" background-size="cover"></image>

<text class="userinfo-nickname">{{userInfonickName}}</text>

</view>

<view class="usermotto">

<text class="user-motto">{{motto}}</text>

</view>

</view>

[css] view plain copy

/indexwxss/

userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

userinfo-nickname {

color: #aaa;

}

usermotto {

margin-top: 200px;

}

[javascript] view plain copy

//indexjs

//获取应用实例

var app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {}

},

//事件处理函数

bindViewTap: function() {

wxnavigateTo({

url: '/logs/logs'

})

},

onLoad: function () {

consolelog('onLoad')

var that = this

//调用应用实例的方法获取全局数据

appgetUserInfo(function(userInfo){

//更新数据

thatsetData({

userInfo:userInfo

})

})

}

})

调用登陆接口 appjs

[plain] view plain copy

//appjs

App({

onLaunch: function () {

//调用API从本地缓存中获取数据

// var logs = wxgetStorageSync('logs') || []

// logsunshift(Datenow())

// wxsetStorageSync('logs', logs)

},

getUserInfo:function(cb){

var that = this;

if(thisglobalDatauserInfo){

typeof cb == "function" && cb(thisglobalDatauserInfo)

}else{

//调用登录接口

wxlogin({

success: function () {

wxgetUserInfo({

success: function (res) {

thatglobalDatauserInfo = resuserInfo;

typeof cb == "function" && cb(thatglobalDatauserInfo)

}

})

}

});

}

},

globalData:{

userInfo:null

}

})

public class UserInfo

{

private string _username;

private string _userpwd;

public string UserName

{

get { return _username; }

set { _username = value; }

}

public string UserPwd

{

get { return _userpwd; }

set { _userpwd = value; }

}

}

public class BUserInfo

{

public List<UserInfo> GetAll()

{

List<UserInfo> list = new List<UserInfo>();

listClear();

UserInfo userinfo = new UserInfo();

userinfoUserName = "css";

userinfoUserPwd = "css";

//add1

userinfoUserName = "admin";

userinfoUserPwd = "admin";

//add2

listAdd(userinfo);

return list;

}

}

这样应该可以吧，因为List<T>是一个集合，两条信息都会存在这个集合中吧

以上就是关于小程序-用户授权/授权后的信息读取流程全部的内容，包括:小程序-用户授权/授权后的信息读取流程、页面加载后仍未获取到openId和userInfo问题解决、微信小程序获取当前用户信息等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！