Micro letter applet simply achieve access to authorized users, and saves it to a user avatar

First, access to authorized users

In example of a single page index,
1. Data Page Register canIUse-in index.js is, the micro-channel open interface for applications calling user authorization.

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

Here Insert Picture Description
2. Add "unauthorized access" button index.wxml, set the open-type = "getUserInfo" type.

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

3. Note: Due to the small micro-channel programs and games to get user information interface to adjust, from April 30, 2018 began, applets and games experience, Developer calls wx.getUserInfo interface will not pop up box asking authorization, The default call failed. Refer to the specific requirements of official development documents .

Second, get the user avatar and save

To index example of a single page
1. index.js implementation-dependent function to get the picture, pay attention to the preservation picture albums that require user authorization .

  //获取用户头像时调用的函数
  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. Add "Get picture" button index.wxml, call the function to get the picture.

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

3. Log in micro-channel public platform for domain name server settings, if not set will be unable to access external server resources.
(AppID, then if there is no need to register micro-channel public platform account and create your own small program, test number can not set the domain name server information.)
Here Insert Picture Description
Setting method as shown below, set downloadFile legitimate domain name: "https: //wx.qlogo .cn "can be.
Here Insert Picture Description

Third, to achieve results

! ! Note that mobile terminal and micro letter Developer Tools simulator side effect is not the same! !
1. User Authorization
Developer Tools simulator micro-channel end
Phone micro-channel small program end
2. Save pictures into the album authorization
Developer Tools simulator micro-channel end
Phone micro-channel small program end
3. Head to the local successfully saved album
Developer Tools simulator micro-channel end

Published 18 original articles · won praise 40 · views 50000 +

Guess you like

Origin blog.csdn.net/seawaysyyy/article/details/101225390