惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
Vercel News
Vercel News
博客园 - 叶小钗
大猫的无限游戏
大猫的无限游戏
MyScale Blog
MyScale Blog
P
Proofpoint News Feed
量子位
Engineering at Meta
Engineering at Meta
B
Blog RSS Feed
博客园 - 【当耐特】
Recent Announcements
Recent Announcements
Google DeepMind News
Google DeepMind News
D
DataBreaches.Net
Stack Overflow Blog
Stack Overflow Blog
博客园 - 聂微东
小众软件
小众软件
Hugging Face - Blog
Hugging Face - Blog
人人都是产品经理
人人都是产品经理
IT之家
IT之家
T
The Blog of Author Tim Ferriss
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Jina AI
Jina AI
博客园 - 三生石上(FineUI控件)

博客园 - SHENHUANJIE

Windows 如何运行和更新 ComfyUI Architecture Windows 修改 SVN 仓库地址(relocate 与 switch) Marvis 使用进阶:联动与外部资源整合 这是一篇用 Marvis发布的文章,让大家都去用 Marvis 程序员保持高效的5个习惯 Kimi WebBridge:让 AI 真正操控你的浏览器 腾讯突然扔出王炸!马维斯一夜刷屏,打工人终于有救了? AIGC-测试库账号密码 openspec 是什么?怎么正确使用? # Hello World 的传奇起源 Please Start Here AI助手记忆系统:从金鱼到大象的进化之路 mac 快速切换 python 版本 卢曼卡片盒笔记法介绍 Introduction to the Zettelkasten Method Uni-app页面信息与元素影响解析 DevOps 入门指南:基础知识解读 「读书计划」《啊哈!算法》7日结构化学习规划 Java RestTemplate 发送 POST 请求设置请求体示例 跨平台开发方案:优缺点对比及选择指南 Java实现简单多层感知器神经网络 Google开发者账号注册步骤详解 ipify.org:免费IP查询服务详解 Google开发者利器:云平台与Firebase服务解析 Google Fonts字体库使用指南 UNI-APP + Spring Boot 实现小程序手机号登录 MySQL 8.0 如何禁用 ONLY_FULL_GROUP_BY 平衡工作与生活的10个实用方法 Linux安装Ollama并启用服务教程 如何在 LobeChat 中使用 Ollama
UNI-APP 获取用户手机号授权与服务器端处理指南
SHENHUANJIE · 2025-01-15 · via 博客园 - SHENHUANJIE

  在 UNI-APP 中,获取用户手机号的流程通常涉及到微信小程序的授权机制。以下是实现步骤:

1. 配置小程序权限

  首先,确保在微信小程序的管理后台已经开启了获取用户手机号的权限。

2. 使用 button​ 组件

  在 UNI-APP 中,你可以使用 button​ 组件来触发获取用户手机号的操作。button​ 组件需要设置 open-type​ 为 getPhoneNumber​,并绑定 @getphonenumber​ 事件。

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

<script>
export default {
  methods: {
    async getPhoneNumber(e) {
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        // 用户点击了允许授权
        const { code } = e.detail;
    
        // 将 code 发送到服务器,服务器通过 code 获取用户手机号
        const res = await this.$http.post('/api/getPhoneNumber', { code });
    
        if (res.data.success) {
          const phoneNumber = res.data.phoneNumber;
          console.log('用户手机号:', phoneNumber);
        } else {
          console.error('获取手机号失败:', res.data.message);
        }
      } else {
        // 用户点击了拒绝授权
        console.error('用户拒绝授权');
      }
    }
  }
}
</script>

3. 服务器端处理

  在服务器端,你需要使用微信提供的 API 来通过 code​ 获取用户的手机号。具体步骤如下:

  1. 获取 access_token​:首先,你需要通过小程序的 appid​ 和 secret​ 获取 access_token​。

    GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    
  2. 获取用户手机号:使用 access_token​ 和 code​ 来获取用户的手机号。

    POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
    

    请求体:

    {
      "code": "CODE_FROM_CLIENT"
    }
    

    响应示例:

    {
      "errcode": 0,
      "errmsg": "ok",
      "phone_info": {
        "phoneNumber": "12345678901",
        "purePhoneNumber": "12345678901",
        "countryCode": "86",
        "watermark": {
          "timestamp": 1630000000,
          "appid": "wx1234567890abcdef"
        }
      }
    }
    

4. 处理响应

  服务器端获取到手机号后,将其返回给前端,前端再进行相应的处理。

注意事项

  • 安全性:手机号是敏感信息,确保在传输和存储过程中进行加密处理。
  • 用户隐私:获取用户手机号需要用户明确授权,确保在用户同意的情况下进行获取。

  通过以上步骤,你可以在 UNI-APP 中实现获取用户手机号的功能。