文档章节

使用Promise获取用户信息

387
 387
发布于 2018/06/21 20:26
字数 726
阅读 29
收藏 0

前言

在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 入门——阮一峰)

© 著作权归作者所有

共有 人打赏支持
387

387

粉丝 3
博文 9
码字总数 5457
作品 0
广州
私信 提问
如何更好的编写js async函数

首先,你需要了解Promise Promise是使用async/await的基础,所以你一定要先了解Promise是做什么的 Promise是帮助解决回调地狱的一个好东西,能够让异步流程变得更清晰。 一个简单的Error-fir...

前端攻城老湿
2018/11/22
0
0
基于JAVA的Promise模式实现

Promise模式是一种异步编程模式,即我们可以先开始一个任务,拿到这个任务的凭据而并不需要立即得到这个任务的执行结果才继续往下执行,我们拿着这个凭证可以在之后任何需要的时候去兑换结果...

Float_Luuu
2016/01/23
4.1K
6
小程序图片合成:异步并发渲染→同步阻塞渲染

故事开始了,小程序canvas图片合成 真机测试时,会报错:getImageInfo failed 。 也就是说,我这边异步请求50张图片,每张图片都是通过getImageInfo下载到本地并且绘制到canvas画布上,但是在...

趁你还年轻233
2018/02/03
0
0
PHP纯异步非阻塞框架--swPromise

swPromise 是基于 swoole 的 PHP promise 框架。 在日常的使用场景中,PHP一般用作接口聚合层。一个业务请求可能会串行的请求多个接口A->B->C,此时如果接口B的响应时间较慢(关键性业务,需...

coooold
2015/11/18
1K
0
JavaScript ES6 中的Promise

Promises/A+规范 CommonJS之Promises/A规范,通过规范API接口来简化异步编程,使我们的异步逻辑代码更易理解。 这里就不做更多的啰嗦了,详细请看 官方文档https://promisesaplus.com/ 中文翻...

sunshinewyf
2016/03/29
69
0

没有更多内容

加载失败,请刷新页面

加载更多

单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
0
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
2
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
2
0
JeeSite4.x 消息管理、消息推送、消息提醒

实现统一的消息推送接口,包含PC消息、短信消息、邮件消息、微信消息等,无需让所有开发者了解消息是怎么发送出去的,只需了解消息发送接口即可。 所有推送消息均通过 MsgPushUtils 工具类发...

ThinkGem
昨天
8
0
OpenML

https://www.openml.org/search?type=data

shengjuntu
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部