微信小程序(原生)——授权登录、授权手机号
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
}
})
代码图片
相关文章
- Flex 布局新旧混合写法详解(兼容微信)
- 微信小程序_(组件)可拖动movable-view
- 微信小程序开发(九)获取手机连接的wifi信息
- 微信小程序——扫码后提示“打开失败缺少ID”
- 微信小程序获取到Openid
- 微信小程序为什么引入 rpx
- uni-app:微信小程序登录:获取code时返回the code is a mock one(hbuilderx 3.7.3)
- 判断微信版本号,使用打开微信小程序的开发标签
- 最新微信小程序抓包方法
- uni-app:微信小程序中用户登录(hbuilderx 3.6.18)
- 微信小程序----获取二维码
- uniapp-微信小程序分包操作步骤详解
- html、vue、uni-app微信小程序的区别
- 微信公众平台java开发具体解释(project代码+解析)