文章目录
一、获取用户授权二、获取用户头像并保存三、实现效果一、获取用户授权
以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.成功保存头像到本地相册