博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用Promise获取用户信息
阅读量:6948 次
发布时间:2019-06-27

本文共 3905 字,大约阅读时间需要 13 分钟。

hot3.png

前言

在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.jsimport 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

请升级微信版本
{
{userInfo}}

修改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的用法,可以参考

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

你可能感兴趣的文章