uniapp微信小程序授权获取用户信息封装

根据平台公告信息，2022年底wx.getUserProfile 与 wx.getUserInfo 接口被回收。新的小程序不能再授权获取头像和昵称；可以通过wx.login 接口直接获取用户的 openId 与 unionId 信息；

所以需要获取头像和昵称的同志们需要自己写一个完善资料了

1、在 common 中创建一个 setUserInfo.js

 export default() => {return new Promise((resolve, reject) => {uni.getUserProfile({desc: '用于完善个人资料' // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写}).then((response) => {if (response[1].errMsg === 'getUserProfile:ok') {uni.setStorageSync('userInfo', response[1].userInfo); //存储用户信息resolve(response[1]);//返回的信息 }else {uni.showToast({title: '授权失敗',icon: 'error'});}}).catch((reject) => {console.log('拒绝授权',reject)})})
}

2、在 main.js 中全局引入

import setUserInfo from "common/setUserInfo.js" //微信用户信息
Vue.prototype.$setUserInfo = setUserInfo

3、在 components 中创建一个组件 authorize.vue

html

<template><view v-if="ifAuthorize" style="background: rgba(0,0,0,0.3);position: fixed;top: 0;width: 100%;height: 100%;"><view style="width: 320px;margin: auto;margin-top: 30px;background: #fff;border-radius: 10px;"><view class="header">需要您的授权</view><view style="text-align: center;"><view style="text-align: center;padding-top: 17px;"><view>为了提供更好的服务</view><view>请允许获取您的用户信息</view><view>如暂不需要，可点击取消或拒绝</view></view><view style="text-align: center;"><image src="../static/image/shouquan.png" mode="widthFix" style="width: 230px;"></image></view><view style="padding-bottom: 5px;"><button type="default" class="btn" @click="authorize()">授权</button><button type="default" class="btn" @click="cancel()">取消</button></view></view></view></view>
</template>

script

<script>export default {name:"authorize",data() {return {ifAuthorize:true};},methods:{cancel() {this.ifAuthorize = false},authorize() {this.$setUserInfo().then(res => {this.ifAuthorize = false});}}}
</script>

css

<style lang="scss">.header {padding: 8px 0;line-height: 33px;border-bottom: 0.5px solid #eee;text-align: center;}.btn {background-color: #04be01 !important;color: #fff !important;border-radius: 44px;width: 275px;margin-bottom: 20px;}
</style>

4、在需要授权的页面中引入组件 authorize.vue

5、效果图

uniapp微信小程序授权获取用户信息封装相关推荐

微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...
微信小程序授权获取用户信息
微信小程序授权获取用户信息小程序昵称突然变成了"微信用户",头像也不显示, <!-- 近期很多小伙伴通过该方法获取头像和昵称,代码也没有做改变,突然就变成了下面这样子 - ...
Java-(二)微信小程序授权获取用户信息和手机号码
第一篇我们已经知道了微信小程序怎么授权登录获取用户信息. openId 和 unionId .下面将高速告诉大家,微信小程序如何授权获取用户信息和手机号码. 微信官方文档:https://develo ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
支付宝小程序授权/获取用户信息
支付宝小程序授权/获取用户信息目录: 文章目录支付宝小程序授权/获取用户信息获取支付宝小程序授权token 解析支付宝小程序接口响应加密数据获取支付宝小程序授权token 前提准备工作: ...
【微信小程序】获取用户信息
文章目录获取用户信息组件open-data button组件中的open-type 接口getUserProfile 查看授权结果获取用户信息组件open-data 组件 open-data用 ...
微信小程序如何获取用户信息
自我介绍我是IT果果日记,微信公众号请搜索 IT果果日记一个普通的技术宅,定期分享技术文章,欢迎点赞.关注和转发,请多关照. 微信小程序用户基本信息有哪些? 除了基本信息,微信还会提供openId ...
uniapp 微信小程序授权获取手机并绑定登录
检查是否已登录 onLoad(option) {//检查用户是否已授权登录this.checkLogin();}, //检查用户是否登录checkLogin() {let token = wx.get ...
玩转微信小程序之获取用户信息以及玩转基本列表渲染（2019/04/14）
LZ-Says:总是要各种颠沛流离,才能换得片刻安宁.努力让自己变得更好,加油- 前言前几天,完成了微信小程序的首章,学习起来,还是多多少少有点坑,不舒服. 今天我们继续开启微信小程序 Study ...

uniapp微信小程序授权获取用户信息封装

根据平台公告信息，2022年底wx.getUserProfile 与 wx.getUserInfo 接口被回收。新的小程序不能再授权获取头像和昵称；可以通过wx.login 接口直接获取用户的 openId 与 unionId 信息；

所以需要获取头像和昵称的同志们需要自己写一个完善资料了

html

script

css

uniapp微信小程序授权获取用户信息封装相关推荐

最新文章

热门文章