纵有疾风起
人生不言弃

小程序个人中心授权登陆实现

点击下面网址可以在线观看视频

10小时零基础入门小程序系列在线视频教程

上一节带领大家实现底部tab导航栏,这一节带领大家实现个人中心与授权登陆。同样我们这节的代码也是基于第三天代码开发的。如果没有看过前3天视频的同学,点击上面链接去看前3天视频。

本节知识点

  • 1,认识botton组件
  • 2,使用button组件的 open-type来获取用户信息
  • 3,授权登陆功能实现,获取用户相关信息
  • 4,展示用户头像和用户昵称
  • 5,圆形头像实现

一,认识botton组件

同样是先看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

小程序个人中心授权登陆实现插图
获取用户信息

查看官方文档,我们可以看到botton的open-type里有个getUserInfo可以用来获取用户信息。
再来看下官方示例如下:

小程序个人中心授权登陆实现插图(1)
官方示例

接下来我们就使用官方示例看能不能获取到用户信息

二,获取用户信息

  • 1,在me.wxml实现下面代码

    小程序个人中心授权登陆实现插图(2)
    me.wxml
  • 2,在me.js里面实现下面代码

    小程序个人中心授权登陆实现插图(3)
    me.js
  • 3,点击编译,会弹出一个授权弹窗,这里点击允许

    小程序个人中心授权登陆实现插图(4)
    点击允许
  • 4,查看打印的log

    小程序个人中心授权登陆实现插图(5)
    获取到的用户信息.png

    可以看到我们的log日志里打印出来了用户信息。

三,展示用户头像和昵称

我们通过第二步获取到了用户的相关信息,接下来我们就来把获取到的用户信息展示出来。

  • 1,首先我们要在me.wxml里添加一个image和text组件用来展示头像和昵称。代码如下

    小程序个人中心授权登陆实现插图(6)
    me.wxml
  • 2,在me.js里把我们获取到的用户信息绑定到上面的image和text组件里

    小程序个人中心授权登陆实现插图(7)
    me.js

可以看到左边就是用户头像和昵称了。
我们通常头像应该是圆形居中的,接下来我们就借助与css来美化布局

四,使用css来实现圆形头像

小程序个人中心授权登陆实现插图(8)
设置圆形头像

这里重点是me.wxss里的border-radius,border-radius是用来实现圆角的,当我们的宽高和圆角的大小都是128rpx时,我们展示出来的也就是圆角头像了。

小程序个人中心授权登陆实现插图(9)
圆角头像

注意:这里的rpx和px的关系如下图

小程序个人中心授权登陆实现插图(10)
rpx和px的关系

虽然我们实现了上面的圆角头像,但是布局还是有些不太好看。
接下来我们就把头像和昵称居中显示

小程序个人中心授权登陆实现插图(11)
me.wxss和me.wxml

实现效果如下

小程序个人中心授权登陆实现插图(12)
头像和昵称居中

到此我们的个人中心页也就差不多实现了。

10天零基础入门小程序系列在线视频教程

有问题可以加我微信2501902696(备注小程序)

文章转载于:https://www.jianshu.com/p/8ae012f48715

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 小程序个人中心授权登陆实现

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活