uni-app——一键获取用户信息

简介: 一键获取用户信息

用户不想输入账号密码,一键登录

<label for="" @click="LoginDL">一键登陆</label>

uni.getUserProfile(只支持微信小程序)

获取用户信息。每次请求都会弹出授权窗口,用户同意后返回 userInfo。

参数说明:

df207edeb22a4b0cb0fa10658d3dd52d.png

4a14bcc1f7284c5b916a4c2f8865c270.png

uni.getUserProfile({ //获取微信信息
      desc: '用于获取您的个人信息', // 声明获取用户个人信息后的用途,不超过30个字符
      success: res1 => { //接口调用成功的回调
        uni.showLoading({
        title: '登录中'
        })
        setTimeout(() => {
        uni.hideLoading(); //关闭登陆中状态
        uni.switchTab({
          url: '../myfile/myfile'
        })
        uni.$emit('updateCart') //为了同步渲染购物车数量
        }, 1000)
        var wxfor = {
        wx: res1.userInfo
        }
        //写成键值对形势添加到数据库中
        res.data.data = Object.assign(res.data.data, wxfor)
        this.login(res.data.data)
        console.log(res1);
      }
      })

 

LoginDL() {
                // 传用户名和信息的接口
    getLogin(this.username, this.password).then(res => {
      console.log(11111111111);
      console.log(res);
      uni.getUserProfile({ //获取微信信息
      desc: '用于获取您的个人信息', // 声明获取用户个人信息后的用途,不超过30个字符
      success: res1 => {  //接口调用成功的回调
        uni.showLoading({
        title: '登录中'
        })
        setTimeout(() => {
        uni.hideLoading(); //关闭登陆中状态
        uni.switchTab({
          url: '../myfile/myfile'
        })
        uni.$emit('updateCart') //为了同步渲染购物车数量
        }, 1000)
        var wxfor = {
        wx: res1.userInfo
        }
        //写成键值对形势添加到数据库中
        res.data.data = Object.assign(res.data.data, wxfor)
        this.login(res.data.data)
        console.log(res1);
      }
      })
    })
    },

4c9896f260a0474a980d8ac58ecfd3da.png

在要获取头像的页面接收新增的wx数据,渲染即可,效果如下:(点击一键登录 ——出现弹窗,点击允许——获取成功)

58d3e487b42a40c2a17f7f9138d29527.pngdfa06170de094441941333b9ed445456.png

相关文章
|
存储 JavaScript 开发工具
uniapp-实现微信授权登录
uniapp-实现微信授权登录
3466 0
|
小程序 API 索引
uniapp中uview组件库中丰富的Picker 选择器用法
uniapp中uview组件库中丰富的Picker 选择器用法
2731 0
|
存储 移动开发 小程序
【uniapp小程序】上传图片
【uniapp小程序】上传图片
2598 0
【uniapp小程序】上传图片
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
1402 0
|
小程序 定位技术
uniapp小程序地图选点uni.getLocation() uni.chooseLocation()
思路先通过uni.getLocation()获取当前位置,然后uni.chooseLocation()通过这个函数进行地图选点
989 0
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
4210 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
814 4
|
存储 小程序 JavaScript

热门文章

最新文章