zl程序教程

您现在的位置是:首页 >  工具

当前栏目

微信小程序(原生)——授权登录、授权手机号

微信程序 登录 原生 授权 手机号
2023-09-14 09:13:44 时间

一、简介

头疼死,最近进行一个项目,弄得差不多了,结果11.9号小程序发布公告说是用户头像昵称获取规则已调整,不得不又得更改。。。。
wx.getUserProfile:
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html
调整的公告:
https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01
头像昵称获取的网址:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
在这里插入图片描述
在这里插入图片描述
参考网址:https://blog.csdn.net/weixin_44937336/article/details/105378061

二、代码

wxml:

 <form bindsubmit="submit">
    <view class="main">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
            <image class="avatar" mode="aspectFill" src="{{avatarUrl}}"></image>
        </button>
        <view class="nickname">
            <label>昵称</label>
            <input value="{{nickName}}" placeholder-style="color:#fff" type="nickname" name="nickname" bindblur="onNickname" class="weui-input" placeholder="请输入昵称" />
        </view>
        <button class="login" form-type="submit" open-type="getPhoneNumber" lang="zh-cn" withCredentials="true" bindgetphonenumber="getPhoneNumber">授权登录</button>
    </view>
</form>

js:

// pages/login.js
import {
    request
} from '../request/request';
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        avatarUrl: defaultAvatarUrl,
        canIUseChooseAvatar: wx.canIUse('button.open-type.chooseAvatar'),
        is_show: true,
        loginCode: '',
        nickName: '微信用户',
    },
    onChooseAvatar(e) {
        const {
            avatarUrl
        } = e.detail
        this.setData({
            avatarUrl,
        })
    },
    onNickname(e) {
        console.log(e)
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getLogin()
    },
    submit(e) {
        this.setData({
            nickName: e.detail.value.nickname
        })
    },
    getPhoneNumber(e) {
        console.log(e)
        if (e.detail.errMsg == "getPhoneNumber:fail:user deny"||e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户拒绝授权  
            //拒绝授权后弹出一些提示  
            wx.showToast({
                title: '请同意授权后才能继续使用',
                icon: 'none'
            });
            return;
        }
        if(!this.data.nickName){
            wx.showToast({
              title: '请输入昵称',
              icon:'none'
            })
            return;
        }
        request('api/user/wxLogin', 'POST', {
            nickname: this.data.nickName,
            avatar: defaultAvatarUrl,
            code: this.data.loginCode,
            mobile_code: e.detail.code
        }).then(res => {
            if (res.code == 1) {
                wx.showToast({
                    title: res.msg,
                })
                wx.setStorageSync('TOKEN', res.data.userinfo.token)
                app.globalData.isLogin = true
                wx.setStorageSync('nickName', this.data.nickName);
                wx.setStorageSync('avatarUrl', this.data.avatarUrl)
                setTimeout(()=>{
                    wx.navigateBack({
                        delta:1
                    })
                },1200)
            }
        })
    },
    getLogin() {
        wx.login({
            success: (res) => {
                this.setData({
                    loginCode: res.code
                })
            }
        })
    },
})

app.js

// app.js
import {
    request
} from './request/request';
App({
    onLaunch() {
        wx.showLoading({
            title: '加载中...',
            mask: true
        })
        request('api/user/index', 'POST').then(res => {

            if (res.code == 1) {
                this.globalData.isLogin = true
            }
            if (res.code == -2) {
                wx.login({
                    success: (res) => {
                        request('api/user/code2Session', 'POST', {
                            code: res.code
                        }).then(res => {
                            if (res.code == 1) {
                                if (!res.data.need_login) {
                                    wx.setStorageSync('TOKEN', res.data.userinfo.token)
                                    this.globalData.isLogin = true
                                }
                            }
                        })
                    }
                })
            }
            wx.hideLoading()
        })
    },
    globalData: {
        userInfo: null,
        isLogin: false
    }
})

代码图片

在这里插入图片描述
在这里插入图片描述