前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp 微信小程序获取用户信息、手机号

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

作者头像
风花一世月
发布2024-03-19 13:28:37
2320
发布2024-03-19 13:28:37
举报
文章被收录于专栏:前端前端
代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档