uniapp 微信小程序获取用户信息、手机号

最新推荐文章于 2025-03-26 19:28:19 发布

风花一世月

最新推荐文章于 2025-03-26 19:28:19 发布

阅读量5.6k

点赞数

文章标签： python java 小程序 nodejs jwt

本文链接：https://blog.youkuaiyun.com/qq_34403164/article/details/124487423

版权

这段代码展示了在微信小程序中实现用户授权设置、获取用户信息、授权获取用户信息及获取手机号登录的流程。主要涉及openSetting、getUserProfile、getPhoneNumber等API的使用，以及对用户授权状态的判断和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <!-- #ifdef MP-WEIXIN -->
    <view>
        <view>
            <button  type="primary" class='btn' open-type="openSetting"
                @opensetting="openSetting">授权设置页</button>
            
            <!-- 没有授权窗口,获取到的信息匿名 ------废弃 -->
            <button  type="primary" class='btn' open-type="getUserInfo"
                @getuserinfo="getUserInfo">获取用户信息</button>
            
            <!-- 有授权窗口 -->    
            <button  type="primary" class='btn' @click="getUserProfile">授权获取用户信息</button>
            <!-- 获取手机号使用手机号登录 -->
            <button  type="primary" class='btn' open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber">使用手机号登录</button>
        </view>
    </view>
    <!-- #endif -->
</template>
<script>
    export default {
        data() {
            return {
            loginFlag: false,
            }
        },
        onLoad() {
            if (uni.getStorageSync('token')) {
                console.log('获取到token，前往验证')
                // token验证函数
            } else {
                console.log('未获取到token')
            }
        },
        methods: {
            // 授权设置页
            /*
             一些通知管理、位置信息设置
            */
            openSetting(e){
                console.log("授权设置页",e)
            },
            // 获取用户信息
            /*
                2021年4月30号之后上传小程序获取数据为加密，并且没有授权窗口
            */
            getUserInfo(e){
                console.log("获取到的用户信息",e)
            },
            // 授权获取用户信息
            /*
                2021年4月30号之后更换为getUserProfile，有授权框
                lang：指定返回用户信息的语言，默认为 en。
                desc：声明获取用户个人信息后的用途，不超过30个字符
            */
            getUserProfile(){
                uni.getUserProfile({
                  lang: 'zh_CN',
                  desc: '用户登录',
                  success: (res) => {
                    console.log('获取到的用户信息', res)
                  },
                  // 失败回调
                  fail: (err) => {
                    console.log('选择了拒绝')
                  },
                })
            },
            
            // 刷新微信登录态
            wxlogin(){
                uni.login({
                    success:(res)=>{
                      this.loginFlag = true;
                      console.log('获取得到的loginres', res)
                    },
                    fail:(err)=>{
                      reject(err)
                    },
                })
            },
            // 获取手机信息
            /*
                2.21.2版本之后，获取手机号不需要提前调用login进行登录
            */
            getPhoneNumber(e) {
                console.log("获取手机号码", e)
                if (e.detail.errMsg !== 'getPhoneNumber:ok'){
                    this.$u.toast("拒绝手机号登录");
                 return;
                }
                uni.showLoading()
                uni.request({
                    url: 'xxxxxx',
                    data: {
                        code: e.detail.code
                    },
                    method: 'GET',
                    header: {
                        'content-type': 'application/json',
                    },
                    success:(res)=> {
                        console.log('使用手机号登录', res)
                        if (data.statusCode == 200) {
                            wx.hideLoading()
                            // 实际不给手机号，只给token
                            // console.log('获取到的手机号是', res.data)
                            uni.setStorageSync('token', res.access_token)
                            
                        }else {
                            this.$u.toast(res.msg);
                        }
                    },
                    fail:(err)=> {
                        this.$u.toast('服务器开小差了呢，请您稍后再试')
                        console.log(err);
                    },
                })
            },
        }
    }
</script>

<style>

    .btn {
        background: #1890FF !important;
        line-height: 80rpx !important;
        border-radius: 80rpx !important;
        margin: 70rpx 50rpx !important;
        font-size: 35rpx !important;
    }
</style>