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

推荐订阅源

Vercel News
Vercel News
Recorded Future
Recorded Future
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
The GitHub Blog
The GitHub Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Google DeepMind News
Google DeepMind News
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Microsoft Azure Blog
Microsoft Azure Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
M
MIT News - Artificial intelligence
云风的 BLOG
云风的 BLOG
Y
Y Combinator Blog
N
News | PayPal Newsroom
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Help Net Security
Help Net Security
博客园 - Franky
SecWiki News
SecWiki News
Recent Announcements
Recent Announcements
T
Troy Hunt's Blog
The Register - Security
The Register - Security
The Last Watchdog
The Last Watchdog
Webroot Blog
Webroot Blog
S
Security Affairs
博客园 - 司徒正美
S
Schneier on Security
I
InfoQ
博客园_首页
www.infosecurity-magazine.com
www.infosecurity-magazine.com
T
Threat Research - Cisco Blogs
Forbes - Security
Forbes - Security
腾讯CDC
N
Netflix TechBlog - Medium
N
News and Events Feed by Topic
Cloudbric
Cloudbric
T
The Exploit Database - CXSecurity.com
P
Proofpoint News Feed
A
About on SuperTechFans
Engineering at Meta
Engineering at Meta
Recent Commits to openclaw:main
Recent Commits to openclaw:main
B
Blog
V
Vulnerabilities – Threatpost
C
Check Point Blog
Google DeepMind News
Google DeepMind News
Google Online Security Blog
Google Online Security Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
Hacker News - Newest:
Hacker News - Newest: "LLM"
C
Cisco Blogs
Schneier on Security
Schneier on Security
O
OpenAI News
K
Kaspersky official 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 中实现获取用户手机号的功能。