1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序简单实现获取用户授权 用户头像并保存到本地

微信小程序简单实现获取用户授权 用户头像并保存到本地

时间:2023-06-13 20:42:36

相关推荐

微信小程序简单实现获取用户授权 用户头像并保存到本地

文章目录

一、获取用户授权二、获取用户头像并保存三、实现效果

一、获取用户授权

以index单页面示例,

1.在index.js中的Page-data注册canIUse,用于调用微信开放接口申请用户授权。

data: {canIUse: wx.canIUse('button.open-type.getUserInfo')}

2.在index.wxml中添加“授权登录”按钮,设置open-type=“getUserInfo” 类型。

<button wx:if="{{canIUse}}" size='mini'open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

3.注意:由于微信小程序与小游戏获取用户信息接口调整,从4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。具体要求可参考官方开发文档。

二、获取用户头像并保存

以index单页面示例,

1.在index.js实现获取头像的相关函数,注意保存头像到相册需要用户授权

//获取用户头像时调用的函数getUserImg: function (e) {// 查看是否授权wx.getSetting({success: function (res) {if (res.authSetting['scope.userInfo']) {// 已经授权,可以直接调用 getUserInfo 获取头像昵称wx.getUserInfo({success: function (res) {var userInfo = res.userInfovar avatarUrl = userInfo.avatarUrl; //获取微信用户头像存放的Url wx.getImageInfo({src: avatarUrl,success: function (sres) { //访问存放微信用户头像的Url wx.saveImageToPhotosAlbum({ //下载用户头像并保存到相册(默认为手机相册weixin目录下)filePath: sres.path,})}})}})}}})},bindGetUserInfo: function (e) {console.log(e.detail.userInfo)}

2.在index.wxml中添加“获取头像”按钮,调用获取头像的函数。

<button id='getUserImg' size='mini' type='warn' bindtap='getUserImg'>获取头像</button>

3.登录微信公众平台,进行服务器域名设置,若不进行设置将无法访问外部服务器资源。

(如果没有AppID的话需要注册微信公众平台账号,并创建一个自己的小程序,测试号无法设置服务器域名信息。)

设置方法如下图所示,设置downloadFile合法域名为:“”即可。

三、实现效果

!!注意手机端和微信开发者工具模拟器端的效果不一样!!

1.用户授权

2.保存图片到相册授权

3.成功保存头像到本地相册

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。