巧用微信小程序，同时获取用户信息和用户手机号！

2023-11-20 07:06:04

在开发微信小程序时，有时我们需要同时获取用户信息和用户手机号，那么如何实现呢？本文将介绍一种巧妙的方法，利用微信小程序的mask层，引导用户授权手机号。

### 步骤 1：创建 mask 层

<template>
  <view class="container">
    <mask v-if="showMask" @close="closeMask" @success="success">
      <view class="content">
        <text>请授权手机号</text>
        <button @tap="getPhoneNumber">获取手机号</button>
      </view>
    </mask>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showMask: false,
    };
  },
  methods: {
    openMask() {
      this.showMask = true;
    },
    closeMask() {
      this.showMask = false;
    },
    success() {
      // 获取手机号成功后的操作
    },
    getPhoneNumber(e) {
      // 获取手机号
      this.closeMask();
      this.success();
    },
  },
};
</script>

步骤 2：在需要的地方打开 mask 层

wx.login({
  success: res => {
    // 获取用户信息
    wx.getUserInfo({
      success: res => {
        // 打开 mask 层
        this.openMask();
      },
    });
  },
});

步骤 3：在 mask 层中获取用户手机号

getPhoneNumber(e) {
  // 获取手机号
  wx.checkSession({
    success: () => {
      // session 未过期，可以直接调用 wx.getPhoneNumber
      wx.getPhoneNumber({
        success: res => {
          // 获取手机号成功后的操作
          this.closeMask();
          this.success();
        },
      });
    },
    fail: () => {
      // session 过期，重新登录
      wx.login({
        success: res => {
          // 重新获取用户信息
          wx.getUserInfo({
            success: res => {
              // 重新打开 mask 层
              this.openMask();
            },
          });
        },
      });
    },
  });
}