一、问题描述

这两天学习使用mpvue开发微信小程序遇到一个版本问题，之前老版本可以通过wx.getUserInfo就可以获取到用户信息了，但是在4月15号的时候，微信以提升用户体验，更改了获取用户信息的方式，使用的是button获取用户信息，而且使用mpvue开发时获取用户信息比较麻烦，下面是我个人学习的配置步骤。

我先抛出一个令我看不太懂的一个连接小程序与小游戏获取用户信息接口调整，请开发者注意升级

二、在mpvue中实现下面代码的操作获取用户信息

<template>
  <div>
    <button open-type="getUserInfo" @getuserinfo="bindgetuserinfo">用户授权</button>
  </div>
</template>
<script>
  export default {
    methods: {
      bindgetuserinfo: function (e) {
        console.log(e)
      }
    }
  }
</script>
<style></style>

实现上面的效果需要配置，下面是配置步骤

三、配置mpvue中获取用户信息的步骤

进入

1. 进入到node_modules --> mpvue --> index.js，操作index.js文件

2. 操作LIFECYCLE_HOOKS

在 LIFECYCLE_HOOKS 字段中添加'onGetUserInfo'

在 LIFECYCLE_HOOKS 字段中添加'onGetUserInfo'

3. 在initMP（方法里判断 mpType 格式时除 app component 的 else 里添加方法）

onGetUserInfo: function onGetUserInfo (options) {
   callHook$1(rootVueVM, 'onGetUserInfo', options)
}

onGetUserInfo方法

四、实现

<template>
  <div>
    <button open-type="getUserInfo" @getuserinfo="bindgetuserinfo">用户授权</button>
  </div>
</template>
<script>
  export default {
    methods: {
      bindgetuserinfo: function (e) {
        console.log(e)
      }
    }
  }
</script>
<style></style>

image.png image.png image.png