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

文章目录

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

一、获取用户授权

以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”即可。