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

相关文章
|
8月前
|
JavaScript Android开发 Swift
uni-app-x
uni-app-x
218 0
|
小程序
小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用
小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用
411 0
|
3月前
|
开发框架 移动开发 前端开发
uni-app基础
【10月更文挑战第3天】
|
8月前
|
数据库
uni-app 127收藏相关接口开发
uni-app 127收藏相关接口开发
39 0
|
JSON 前端开发 API
uni-app学习笔记-uni.request请求和渲染页面(九)
uni-app学习笔记-uni.request请求和渲染页面(九)
90 1
|
存储 缓存 数据安全/隐私保护
【uni-app】使用uni-app实现简单的登录注册功能
前言 大家好,今天和大家分享一下如何在uni-app中实现简单的登录注册功能。 首先你需要掌握一下知识点:
|
开发框架 移动开发 JavaScript
初识uni-app
uni-app是由DCloud公司研发的一款基于Vue.js的开源跨平台应用开发框架。使用uni-app,开发者只需编写一次代码,就可以同时构建出iOS、Android、H5、小程序(微信/支付宝/百度/字节跳动/快手)等多个平台的应用。uni-app是一款强大的跨平台开发框架,适用于多种场景。通过本文的介绍,希望您对uni-app有了初步的了解,并能够开始尝试使用uni-app开发您的项目。更多关于uni-app的详细信息,请访问官方文档。希望大家多多交流!共同进步。
157 0
|
开发框架 JavaScript Android开发
什么是uni-app
什么是uni-app
|
数据格式
uni-app 两个页面传值
1 可以使用路由传参的方式来打开页面并传递数据。 2 可以通过 uni-app中的全局变量来传递值。