uniapp获取微信用户信息登录

简介: uniapp获取微信用户信息登录

想要获取用户信息需要先使用wx.login功能

wx.login({
          success: res => {
            if (res.code) {
              // 获取 code 成功后,通过微信开放接口获取用户 openid
              wx.request({
                url: '后台接口',
                data: {
                  code: res.code,
                },
                success: res => {
                  console.log(res.data.openid);
                  this.openid = res.data.openid
                  uni.setStorageSync('openid', res.data.openid)
                }
              });
            }
          },
          fail: err => {
            console.log(err);
          }
        });

然后使用按钮的open-type获取用户的头像,想要获取完整用户信息可以使用getUserInfo

 

<view class="">
               // 调用微信开放能力
      <button open-type="chooseAvatar" @chooseavatar="chooseAvatar"
        style="width:190rpx;height: 190rpx;border-radius: 50%;padding: 0;margin-top: 20px;">
        <image :src="image" class="imageAsdf" style="width: 200rpx;height: 200rpx;border-radius: 100%;" />
      </button>
    </view>

获取用户昵称

<view style="width: 60%;margin: auto;margin-top: 10px;">
      <input id="nickname-input" v-model="nickname" class="authorization white" type="nickname"
        placeholder="请输入用户昵称" style="width: 100%;text-align: center;" @change="change">
    </view>

保存头像和昵称

change(e) {
        this.nickname = e.detail.value
      },
      chooseAvatar(e) {
        console.log(e);
        this.image = e.detail.avatarUrl
      },

登录判断:

// 登录
      logins() {
        let that = this;
        if (that.nickname == '') {
          uni.showToast({
            icon: 'none',
            title: '请输入用户昵称',
            // duration: 2000
          });
        } else if (that.image == '') {
          uni.showToast({
            icon: 'none',
            title: '请上传用户头像',
            // duration: 2000
          });
        }
        if (that.nickname != '' && that.image != '') {
          uni.request({
            url: '登录接口',
                        //参数
            data: {
              openid: that.openid,
                  value:value
            },
            dataType: 'json',
            method: "POST",
            success(res) {
              console.log(res);
              if (res.data.err == '请求成功') {
                console.log(res.data.userid);
                uni.setStorageSync('userid', res.data.userid);
                uni.showToast({
                  title: '登录成功',
                  duration: 2000
                });
                                // 跳转路径
                let path = uni.getStorageSync('paths');
                setTimeout(() => {
                  uni.reLaunch({
                    url:`/pages/${path}/${path}`
                  })
                }, 2000)
              } else {
                uni.showToast({
                  title: '登录失败',
                  icon:'none',
                  duration: 2000
                });
              }
            }
          })
        }
      }
相关文章
|
1月前
|
小程序 前端开发 算法
|
2月前
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
333 3
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
51 2
|
4月前
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
181 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
|
2月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
90 0
|
2月前
|
小程序 算法 前端开发
微信小程序---授权登录
微信小程序---授权登录
104 0
|
2月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
53 0
|
4月前
|
移动开发 小程序 前端开发
|
4月前
|
小程序 前端开发