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

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

浏览量：424 时间：2019-12-18 来源：帅气的小白

文章目录

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

一、获取用户授权

以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.注意：由于微信小程序与小游戏获取用户信息接口调整，从2018年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.userInfo              var 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合法域名为：“https://wx.qlogo.cn”即可。