uniapp 微信小程序 获取手机号并存储

在使用uni-app开发微信小程序时，获取用户手机号并进行存储是一项常见的需求。以下是如何在微信小程序中实现这一功能的详细步骤和对应的代码示例，包括用户授权、手机号解密以及数据存储。

一、准备工作

1. 确保你已经在微信开放平台注册并创建了一个微信小程序。
2. 在微信开发者工具中创建一个uni-app项目。
3. 在项目的manifest.json文件中，确保mp-weixin平台的appId和appSecret正确配置。

二、页面布局

在pages目录下创建一个获取手机号的页面，比如getPhone.vue，并添加以下代码：

<template>
  <view class="container">
    <button
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
    >获取手机号</button>
  </view>
</template>

<script>
export default {
  methods: {
    getPhoneNumber(e) {
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        const { encryptedData, iv } = e.detail;
        // 将加密数据和iv发送到服务器进行解密
        uni.request({
          url: 'https://your-server.com/decryptPhoneNumber', // 服务器解密接口
          method: 'POST',
          data: {
            encryptedData,
            iv,
            sessionKey: getApp().globalData.sessionKey // 从全局变量中获取sessionKey
          },
          success: res => {
            if (res.data.success) {
              console.log('用户手机号：', res.data.phoneNumber);
              // 在此处可以进行手机号的存储操作
            } else {
              console.error('解密失败', res.data.error);
            }
          },
          fail: err => {
            console.error('请求失败', err);
          }
        });
      } else {
        console.log('用户拒绝授权获取手机号');
      }
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

三、用户登录获取 session_key

在微信小程序中，用户登录可以获取到session_key，这是解密用户手机号的关键。需要在App.vue中添加登录逻辑：

// App.vue
<template>
  <view>
    <slot/>
  </view>
</template>

<script>
export default {
  onLaunch() {
    // 登录
    uni.login({
      success: res => {
        if (res.code) {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          uni.request({
            url: 'https://your-server.com/onLogin',
            method: 'POST',
            data: {
              code: res.code
            },
            success: res => {
              if (res.data.success) {
                // 将sessionKey存储在全局变量中
                this.globalData.sessionKey = res.data.sessionKey;
              } else {
                console.error('登录失败', res.data.error);
              }
            },
            fail: err => {
              console.error('请求失败', err);
            }
          });
        } else {
          console.log('登录失败！' + res.errMsg);
        }
      }
    });
  },
  globalData: {
    sessionKey: null
  }
};
</script>

四、服务器端解密手机号

服务器需要实现一个接口来解密手机号。以下是Node.js的示例代码，使用wxBizDataCrypt库解密数据：

const express = require('express');
const bodyParser = require('body-parser');
const WXBizDataCrypt = require('./WXBizDataCrypt'); // 自行下载并引用该库
const app = express();

app.use(bodyParser.json());

app.post('/onLogin', (req, res) => {
  const { code } = req.body;
  // 调用微信登录凭证校验接口
  // 获取 session_key 和 openid
  // 这里只是一个示例，需要替换为实际请求
  const sessionKey = 'mockSessionKey'; // 假设从微信获取的sessionKey
  res.json({ success: true, sessionKey });
});

app.post('/decryptPhoneNumber', (req, res) => {
  const { encryptedData, iv, sessionKey } = req.body;
  const appId = 'yourAppId'; // 微信小程序的appId
  const pc = new WXBizDataCrypt(appId, sessionKey);
  const data = pc.decryptData(encryptedData, iv);

  if (data) {
    res.json({ success: true, phoneNumber: data.phoneNumber });
  } else {
    res.json({ success: false, error: '解密失败' });
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

五、完整项目结构

以下是完整的项目结构：

├── pages
│   └── getPhone.vue
├── App.vue
├── manifest.json
└── server
    ├── WXBizDataCrypt.js
    └── app.js

六、代码详细解释

getPhone.vue 代码解释

1. 模板部分：

   • open-type="getPhoneNumber"：按钮的open-type属性设置为getPhoneNumber，用于触发获取手机号的操作。
   • @getphonenumber="getPhoneNumber"：按钮绑定getPhoneNumber方法。

2. 方法部分：

   • getPhoneNumber(e)：处理用户点击按钮后的逻辑。
     • 检查e.detail.errMsg是否为getPhoneNumber:ok，表示用户允许授权。
     • 通过uni.request将加密数据encryptedData和iv发送到服务器进行解密。

App.vue 代码解释

1. onLaunch方法：
   • 调用uni.login进行用户登录，获取登录凭证code。
   • 通过uni.request发送code到服务器，换取sessionKey。
   • 将sessionKey存储在全局变量globalData中，供后续使用。

服务器端代码解释

1. /onLogin接口：

   • 接受微信小程序的登录凭证code。
   • 调用微信服务器接口获取sessionKey和openid（示例代码中简化为直接返回sessionKey）。

2. /decryptPhoneNumber接口：

   • 接受客户端传递的encryptedData、iv和sessionKey。
   • 使用WXBizDataCrypt库进行解密，返回解密后的手机号。

总结

通过以上步骤和代码示例，你可以在uni-app开发的微信小程序中实现获取用户手机号并存储的功能。关键点在于用户授权、会话密钥session_key的获取以及服务器端的解密处理。希望这些内容对你有所帮助！