(微信小程序云开发入门-含完整代码和视频教程)Vant weapp案例1授权登录获取用户基本信息

预备教程

vant weapp导入

效果

点击登录前
登录后

实现

新建文件夹login和page

在这里插入图片描述

添加编译模式

在这里插入图片描述
在这里插入图片描述

index.json引入组件

   {
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  }
}

index.wxml编写页面

<van-button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" type="primary">授权登录</van-button>
<van-cell-group>
  <van-cell title="{{userInfo.nickName}}" value="{{userInfo.gender=='性别未知'?'性别未知':userInfo.gender==1?'':''}}" label="{{userInfo.country}}" border="{{ false }}" />
</van-cell-group>

index.js编写逻辑

// miniprogram/pages/login/index.js
Page({
  data: {
    userInfo:{
      nickName:'未登录用户',
      gender:'性别未知',
      country:'国家未知'
    }
  },
  onGetUserInfo(e){
    this.setData({
      userInfo:e.detail.userInfo
    })
  },
})

后续

  • 获取用户头像并显示
  • 登录之后隐藏登录按钮
  • 将数据保存到云端

资料

demo仓库
vant weapp组件-cell
按钮开放能力文档

视频教程

视频演示

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页