1、登录获取用户头像昵称
代码
app.js
App({globalData: {userInfo: null},onLaunch() {}})
.
.
.
index.js
const app = getApp()var thatPage({data: {userInfo: {},hidden_actionSheet: true,},/*** 页面加载*/onLoad: function () {that = thisthat.isAuthorize().then(res => {//用户已经授权获取头像昵称//获取头像昵称wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothat.setData({userInfo: app.globalData.userInfo,})}})}).catch(res => {//用户没有授权获取头像昵称that.setData({hidden_actionSheet: false,})})},/*** 是否授权获取头像和昵称，已经授权返回到then，没有授权返回到catch*/isAuthorize() {return new Promise((resolve, reject) => {// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {console.log("全局--用户已经授权")resolve()} else {console.log("全局--用户还没有授权获取昵称和头像")reject()}}})})},//点击头像----事件bindViewTap: function () {console.log("点击了头像")},// 底下的取消actionSheetChange: function (e) {console.log("点击了取消")this.setData({hidden_actionSheet: true})wx.showModal({content: '部分功能需要登录才能使用',})},// 用户选择 拒绝还是接受都会进入这里getUserInfo: function (e) {// console.log("权限选择了：", e.detail)if (e.detail.rawData) {//权限选择了：允许console.log("权限选择了：允许")// app.globalData.userInfo = res.userInfothat.setData({userInfo: app.globalData.userInfo,})//获取头像昵称wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothat.setData({userInfo: app.globalData.userInfo,})}})} else {//权限选择了：拒绝console.log("权限选择了：拒绝")wx.showModal({content: '部分功能需要登录才能使用',})}// 隐藏actionSheetthis.setData({hidden_actionSheet: true})},})
.
.
index.wxml
<view class="container"><view class="userinfo"><!-- hasUserInfo为false表示没有用户信息，就显示获取头像昵称的按钮 --><action-sheet hidden="{{hidden_actionSheet}}" bindchange="actionSheetChange"><button class="bt_login" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 微信授权登录 </button><!-- 取消按钮可以不用 --><action-sheet-cancel class='cancel'>取消</action-sheet-cancel></action-sheet><!-- 表示有用户信息，就显示头像和昵称 --><block hidden="{{!hidden_actionSheet}}"><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view></view>
.
.
index.wxss
page {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;}.bt_login {width: 200rpx;height: 70rpx;color: #6699FF;border: 3rpx solid #6699FF;border-radius: 80rpx;font-size: 35rpx;margin: 20rpx 0;display: flex;justify-content: center;align-items: center;}.userinfo-nickname {color: #aaa;}.usermotto {margin-top: 200px;}
2、不需要获取权限就能显示头像和昵称
wxml代码：
<open-data class="image_radius" type="userAvatarUrl"></open-data>
wxss代码（设置圆角需要加overflow: hidden; 有时候不生效就加入 position: absolute;）：
.image_radius {width: 32px;height: 32px;border-radius: 5px;position: absolute;overflow: hidden;}
3、获取手机号
wxml代码：
<button bindtap="tapModal" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">弹窗</button>
js代码：
//index.jsconst app = getApp()let thatPage({data: {showTuiModal: false},onLoad: function () {},// 通过自身云后台获取手机号getPhoneNumber(e) {wx.cloud.callFunction({name: 'getPhone',data: {action:'getcellphone',id:e.detail.cloudID}}).then(res => {console.log('res: ', res)}) },// 通过第三方后台获取手机号// getPhoneNumber(e) {// console.log("getPhoneNumber==>", e)// const encryptedData = e.detail.encryptedData// const iv = e.detail.iv// if (e.detail.errMsg == "getPhoneNumber:ok") { //用户授权允许//wx.login({// success(e) {// console.log("login==>", e)// const data = {// appId: "wx26c7560a9f8f6c49",// code: e.code,// encryptedData: encryptedData,// iv: iv// }// wx.request({// url: 'https://XXXXX/app/wechats/users/phone/decrypt',// data: data,// success(e) {// console.log("request==>", e)// }// })// },//})// } else { //用户已拒绝//wx.showToast({// title: '您已经拒绝',//})// }// }})
云后端代码
// 云函数入口文件const cloud = require('wx-server-sdk')// cloud.init()cloud.init({// API 调用都保持和云函数当前所在环境一致env: cloud.DYNAMIC_CURRENT_ENV})// 云函数入口函数exports.main = async (event, context) => {switch (event.action) {case 'getcellphone':{return getCellphone(event);}default: {return}}}async function getCellphone(event){const res = await cloud.getOpenData({list: [event.id], // 假设 event.openData.list 是一个 CloudID 字符串列表}) const phone=res.list[0].data.phoneNumberreturn {phone,event};}
微信小程序——按钮登录获取用户头像昵称 不需要获取权限就能显示头像和昵称 获取手机号（云端）
