用户登录

用 getUserInfo 获取用户微信数据失败以后,需要用一种方法让用户授权我们使用他们的用户数据 .. 回到 UserAccount .. 在页面顶部 .. 从 Taro UI 里,把 AtActionSheet 组件拿出来用一下 ..

然后去编辑一下页面视图 .. 添加一个 AtActionSheet .. 组件上面需要一些属性,先用 className 添加一个 action-sheet 类 .. 它的 title 设置成 需要您授权我们使用微信帐户数据。

isOpened 控制了动作面板的开启状态 .. 用 openGetUserInfoActionSheet 这个 state 决定 ..

动作面板里面,添加一个 View .. 上面加上 action-sheet__action ..

里面包装一个 AtButton .. 按钮文字是 授权获取用户信息 ..

按钮的 type 设置成 primary ..

然后把按钮的 open-type 设置成 getUserInfo .. 这样点击这个按钮可以申请授权使用微信帐户数据 ..

onClick 绑定点击事件 .. 用 this.handleClickActionSheet 处理 .. bind this 还有 primary

再添加一个 onGetUserInfo .. 授权的结果可以在这个事件的处理方法里面得到 .. this.handleGetUserInfo .. bind this ..

复制一下 openGetUserInfoActionSheet .. 把它从页面的 state 里解构出来 .. 然后在页面的 state 里面,添加一个 openGetUserInfoActionSheet .. 默认让它等于 false ..

下面去添加事件处理方法 .. 先添加 handleClickActionSheet .. 接收一个 item 参数 .. 方法里面用 switch 检查 item 的值 .. 如果它的值是 primary ..

在控制台上输出 action sheet primary action .. 再 break 出来 ..

再添加一个 handleGetUserInfo 这个事件处理 .. 接收一个 result 参数 ..

在控制台上输出这个 result ..

找到 wxUserInfo 这个方法 .. 获取用户信息失败,现在可以设置一下页面的状态,显示出动作面板 ... 把 openGetUserInfoActionSheet 设置成 true ..

到模拟器上试一下 .. 按一下 微信登录 ..

会弹出动作面板 .. 按一下面板上的 授权按钮 .. 又会弹出对话框,提醒用户授权 ..

按了授权按钮以后应该关掉这个动作面板 .. 再去处理一下 ..

在 handleClickActionSheet 里面, 用一下 this.setState ... 把 openGetUserInfoActionSheet 设置成 false ..

再到模拟器上试一下 .. 按一下微信登录 .. 弹出授权面板 .. 按一下授权 .. 出现对话框 .. 先试一下,点击 拒绝 ..

输出的结果里面 . detail 里的个 errMsg .. 提示获取用户信息的时候被拒绝了 ..

再试一下 .. 微信登录 .. 授权 .. 这次按一下 允许 .. onGetUserInfo 的事件处理里面会输出结果 .. 这回这个结果的 detail 属性里面会有用户信息相关的数据 ...

让用户授权使用微信用户数据《 电商小程序案例:微信登录 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点