使用Promise获取用户信息

2019独角兽企业重金招聘Python工程师标准>>>

前言

在4月份的时候，微信发出了公告：小程序与小游戏获取用户信息接口调整，请开发者注意升级。

后续浏览了一下有关获取用户信息的接口的API（wx.getUserInfo(OBJECT)），里面有提到此接口有调整，使用该接口将不再出现授权弹窗

当用户未授权过，调用该接口将直接报错；当用户授权过，可以使用该接口获取用户信息

看来得引导用户主动点击授权按钮了。下面将介绍如何通过使用Promise来实现获取用户信息。

获取用户信息流程图

首先建立wechat.js

class Wechat {

    /**
     * 登录
     * @return {Promise} 
     */
    static login() {
        return new Promise((resolve, reject) => wx.login({ success: resolve, fail: reject }));
    }

    /**
    * 获取用户是否授权
    * @return {Promise} 
    */
    static getSetting() {
        return new Promise((resolve, reject) => wx.getSetting({ success: resolve, fail: reject }));
    }

    /**
     * 打开授权设置
     */
    static openSetting() {
        return new Promise((resolve, reject) => wx.openSetting({ success: resolve, fail: reject }));
    }

    /**
     * 获取用户信息
     * @return {Promise} 
     */
    static getUserInfo() {
        return new Promise((resolve, reject) => wx.getUserInfo({ success: resolve, fail: reject }));
    }

    /**
     * 发起网络请求
     * @param {string} url  
     * @param {object} params 
     * @return {Promise} 
     */
    static request(url, params, method = "GET", type = "json") {
        return new Promise((resolve, reject) => {
            let opts = {
                url: url,
                data: Object.assign({}, params),
                method: method,
                header: { 'Content-Type': type },
                success: resolve,
                fail: reject
            }
            wx.request(opts);
        });
    }


    /**
     * 处理app.js中定义的回调函数；在onload中调用
     * @param {webchatApp} app 
     * @param {function} handle 
     */
    static handleCallback(app, handle) {
        if (app.globalData.params) {
            handle();
        } else {
            app.openIdCallback = data => {
                if (data !== null) {
                    handle();
                }
            }
        }
    }


}

export default Wechat;

修改app.js

//app.js
import wechat from "./utils/wechat.js";
App({
  onLaunch() {
    let params = {};
    wechat.login().then(data => {
      return data;
    }).then(data => {
      params.jsCode = data;
      return wechat.getSetting()
    }).then(data => {
      params.auth = data.authSetting['scope.userInfo'] === true;
      return params;
    }).then(data => {
      if (data.auth) {
        //已经授权
        //获取用户信息
        console.log('已经授权');
        return wechat.getUserInfo();
      } else {
        console.log('未授权');
      }
      return data;
    }).then(data => {
      //增加回调
      if (data.auth == undefined) {
        params.ui = data;
      }
      this.globalData.params = params;
      if (this.openIdCallback) {
        this.openIdCallback(data);
      }
    }).catch(e => {
      console.log(e);
      return Promise.reject(e);
    });
  },
  globalData: {
    params: null,
  }
})

修改index.wxml

<!--index.wxml-->
<view class="container" wx:if="{{!auth}}">
    <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">微信授权</button>
    <view wx:else>请升级微信版本</view>
</view>
<view wx:else>
    {{userInfo}}
</view>

修改index.js

//index.js
//获取应用实例
import wechat from "../../utils/wechat.js";

const app = getApp()

Page({
  data: {
    auth: false,
    call: false,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数

  onLoad: function () {
    wechat.handleCallback(app, () => {
      console.log(app.globalData)
      let auth = app.globalData.params.auth;
      let ui = app.globalData.params.ui;
      this.setData({
        auth: auth,
        userInfo: ui !== undefined ? ui.rawData : {},
        call: true
      });
      if (!auth) {
        this.showAuthDialog();
      }
    });
  },
  onGotUserInfo: function (e) {
    console.log(e.detail.encryptedData);
    console.log(e.detail.iv);
    //此处如何能获取到用户信息 可以回传用户信息至服务器即可
    //获取到用户信息同时 this.setData({auth: true})
  },
  onShow: function () {
    if (!this.data.auth && this.data.call) {
      this.showAuthDialog();
    }
  },
  showAuthDialog: function () {
    wx.showModal({
      title: '用户未授权',
      content: '需要授权获取您的公开信息；请点击微信授权-允许-即可正常使用。',
      showCancel: false
    })
  }
})

最后有关Promse的用法，可以参考Promise 对象（ECMAScript 6 入门——阮一峰）

转载于:https://my.oschina.net/u/1863616/blog/1833695