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 ...
最新文章
- 百度程序员:经理让背一个绩效4的名额,才批准离职!
- oracle,build path,linux
- SQL Inject of Code to bypass
- 启用nginx status状态详解
- 常见计算机英语词汇翻译,常见计算机英语词汇解释(1)
- c#生成随机位数的汉字字符串
- Java黑皮书课后题第4章:4.20(字符串处理)编写一个程序,提示用户输入一个字符串,显示它的长度和第一个字符
- mysql blob 内容查看_这些被你忽视的MySQL细节,可能会让你丢饭碗!
- python 循环技巧
- 拾遗----javascript一些实用方法
- php解escape,PHP下escape解码函数用法示例
- ElasticSearch遇到问题
- PostgreSQL一些简单问题以及解决办法
- MS CRM 2011实施指南5.20版已经发布
- 解决'python -m pip install --upgrade pip',显示“'python' 不是内部或外部命令,也不是可运行的程序”
- GameEntity(四)—— Ientity
- golang并发资源的竞争
- 1计算机世界中的时间概念
- SyntaxError: Non-ASCII character ‘\xe9‘ in file dun.py on line 4
- 山东财经大学python实验六答案_金融学(山东财经大学)智慧树知道2020章节测验答案...
热门文章
- Vue 3.X 结合 arcgis 4.X 加载国内四种在线底图 百度、腾讯、高德、天地图(学不会揍我)
- 测试恋爱值的软件,全国恋爱等级测试
- 用 Java 实现人脸识别功能(附源码)
- Petya and Exam(字符串模拟)
- 安徽省2016“京胜杯”程序设计大赛_D_梯田AGAIN
- shortcuts for contructor 创建对象捷径
- 动态追踪技术(中) - Dtrace、SystemTap、火焰图
- Ping操作 ICMP的数据包的分析(基础学习)
- 六一元宇宙公益~上链购寻找元宇宙少年
- oracle RAC环境 1521端口NAT映射后,端口能通,数据库报ORA-12541