导航
当前位置:首页>>小程序

微信小程序开发用户信息获取和授权代码教程

2023-11-13 围观 : 6次

我们在使用微信小程序开发工具的时候,我们需要先创建一个项目,看微信官网给我们自动生成的代码。

首先我们看一下app.js代码:

App({

onLaunch: function () {

// 展示本地存储能力

var logs = wx.getStorageSync(‘logs’) || []

logs.unshift(Date.now())

wx.setStorageSync(‘logs’, logs)

// 登录

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

}

})

// 获取用户信息

wx.getSetting({

success: res => {

if (res.authSetting[‘scope.userInfo’]) {

// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框

wx.getUserInfo({

success: res => {

// 可以将 res 发送给后台解码出 unionId

this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

},

fail:res=>{

wx.showToast({

title: ‘getUserInfo failed’,

icon: ‘none’,

duration: 2000

})

}

})

}else{

wx.showToast({

title: ‘没有授权’,

icon: ‘success’,

duration: 2000

})

}

}

})

},

globalData: {

userInfo: null

}

})

上面的代码共发三部分,分别是本地存储能力展示,微信登录展示和用户信息获取功能展示。由上可知通过wx.login方法得到res.code,然后将其发到后台调用微信接口可以获取openid等信息。

wx.getSetting方法

该方法是获取用户设置信息,通过此方法得到用户对当前程序的授权设置情况,如是否有获取头像权限。

用户权限配置检查

if (res.authSetting[‘scope.userInfo’])

这个意思是用户是否设置了用户授权,如果没有,我们会弹出一个 “没有授权”提示。如果已经授权了,我们就使用wx.getUserInfo方法获取资料。注意的是,因为这个方法是访问网络远程的数据,因为在访问等待结果之前,可能我们的默认页面(小程序第一个页面也是就我们常说的首页)已经加载完了。那么怎么判断我们的页面加载早于这个方法的结果返回之前呢?这里有一个巧妙的方法。我们先看一下index页面的js文件内容:

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

motto: ‘Hello World’,

userInfo: {},

hasUserInfo: false,

canIUse: wx.canIUse(‘button.open-type.getUserInfo’)

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: ‘../logs/logs’

})

},

onLoad: function () {

console.log(‘page onload’);

if (app.globalData.userInfo) {

console.log(‘set data’);

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo: true

})

} else if (this.data.canIUse){

console.log(‘canIUse’);

// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

app.userInfoReadyCallback = res => {

console.log(‘get call back’);

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

} else {

console.log(‘兼容处理’);

// 在没有 open-type=getUserInfo 版本的兼容处理

wx.getUserInfo({

success: res => {

console.log(‘get user info success’)

app.globalData.userInfo = res.userInfo

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

})

}

},

getUserInfo: function(e) {

console.log(‘do get user info’+e);

if(e){

app.globalData.userInfo = e.detail.userInfo

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

}else{

console.log(‘用户选择了拒绝’);

}

}

})

上面代码,我们重点看onLoad这个方法里,这里做了三个判断,第一种情况判断app.globalData.userInfo是否有值 ,如果有那就直接给页面的数据赋值。

第二种情况判断当前微信是否支持button.open-type.getUserInfo这个版本属性,如果有,那么重点来了:我们给app页面增加一个方法userInfoReadyCallback,这个方法作用就是接收wx.getUserInfo的结果,然后赋值给index页面中的数据。

相关文章
  • 江门好的微信小程序开发工具在哪里

    江门是一个拥有较大市场潜力的城市,很多企业都在积极探索市场发展新途径。而微信小程序,是一种由微信平台提供的轻量级应用,具有快速便捷、易传播等优点。因此,开发微信小程序也成为了越来越多的企业选择。那么,江门市里有哪些好的微信小程序开发工具呢?首先,我们需要了解微信小程序开发的原理和流程。微信小程序不需...

    2023-11-26
  • 魔方小程序开发工具

    魔方小程序开发工具是一款基于微信开发者工具的拓展工具。借助这个工具,开发者可以在小程序中实现更为丰富的功能和界面。其基本原理如下:1.语言:小程序开发工具主要支持JavaScript语言。在使用小程序开发工具的过程中,开发者需要通过这种语言对小程序进行编程。2.界面:小程序开发工具支持WXML和CS...

    2023-11-26
  • 模拟小程序开发工具

    模拟小程序开发工具是一种基于模拟器的开发工具,它可以使开发者在没有真实设备的情况下,开发和调试小程序的应用。此类工具不同于一般意义上的开发工具,如IDE、编辑器等,它们主要是为了方便开发者在真实设备上进行开发,而模拟小程序开发工具则通过虚拟的设备、环境和运行时模拟器等方式,让开发人员在不实际操作真实...

    2023-11-26
  • 河北直播类小程序开发工具

    河北直播类小程序开发工具是一种用于开发直播类小程序的工具,可让开发者快速创建、配置和部署直播小程序。正如其名,“河北”指的是该工具提供直播服务的地域范围,即河北省内,可以为当地企业和个人提供直播功能的支持。以下是关于河北直播类小程序开发工具的原理和详细介绍。1. 原理河北直播类小程序开发工具基于微信...

    2023-10-30
  • 微信小程序开发工具不能预览

    微信小程序开发工具是一款基于微信开发者工具的专门用于开发微信小程序的一个软件。然而,在使用开发工具时,我们有时会遇到不能预览的情况,这种情况可能与多种原因相关。本篇文章将会从网络请求、文件权限等方面来介绍为什么微信小程序开发工具不能预览。首先,一个微信小程序主要分为两个部分:客户端和服务端。访问小程...

    2023-11-28