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

推荐订阅源

Cisco Talos Blog
Cisco Talos Blog
V
V2EX
C
Check Point Blog
GbyAI
GbyAI
D
Docker
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
B
Blog RSS Feed
H
Hackread – Cybersecurity News, Data Breaches, AI and More
N
Netflix TechBlog - Medium
T
Troy Hunt's Blog
博客园 - Franky
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Microsoft Security Blog
Microsoft Security Blog
P
Privacy & Cybersecurity Law Blog
WordPress大学
WordPress大学
The Cloudflare Blog
S
SegmentFault 最新的问题
Latest news
Latest news
Microsoft Azure Blog
Microsoft Azure Blog
P
Proofpoint News Feed
I
InfoQ
博客园 - 【当耐特】
NISL@THU
NISL@THU
A
About on SuperTechFans
T
Tailwind CSS Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
The Hacker News
The Hacker News
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Scott Helme
Scott Helme
雷峰网
雷峰网
C
CXSECURITY Database RSS Feed - CXSecurity.com
Security Latest
Security Latest
V
Vulnerabilities – Threatpost
Security Archives - TechRepublic
Security Archives - TechRepublic
A
Arctic Wolf
Hacker News: Ask HN
Hacker News: Ask HN
N
News and Events Feed by Topic
IT之家
IT之家
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
aimingoo的专栏
aimingoo的专栏
T
Threat Research - Cisco Blogs
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
阮一峰的网络日志
阮一峰的网络日志
SecWiki News
SecWiki News
大猫的无限游戏
大猫的无限游戏
S
Security Affairs
The Register - Security
The Register - Security
www.infosecurity-magazine.com
www.infosecurity-magazine.com
L
LINUX DO - 热门话题
T
Tor Project blog

博客园 - SHENHUANJIE

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 Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
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 中实现获取用户手机号的功能。