uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)

目录标题

    • 授权手机号
      • 新旧版本核心差异对比
      • 强制使用新版的情况
      • 代码实现方案
      • 特殊处理逻辑
      • 企业账号要求
      • 最佳实践建议
    • 授权头像和昵称
      • 新旧版本核心差异对比
      • 强制使用新版的情况
      • 代码实现方案
      • 最佳实践建议
      • 注意事项

授权手机号

新旧版本核心差异对比

触发方式
旧版(2023年前)通过 <button open-type="getPhoneNumber"> 触发,新版(2023年后)沿用相同方式但要求企业资质

数据返回
旧版返回 encryptedDataiv 需后端解密,新版直接返回 code 供后端换取手机号。

费用
旧版免费,新版每次调用需支付 0.03 元起。

兼容性
旧版仅支持基础库版本低于 2.21.2,新版强制要求基础库版本 ≥ 2.21.2。


强制使用新版的情况

新注册小程序
无论基础库版本如何,必须使用新版接口。

已过审小程序
若更新代码需适配新版接口,否则无法通过审核。

安全要求
新版需完成企业认证并开通微信支付。


代码实现方案

版本检测与兼容处理

const systemInfo = getCompatSystemInfo();
const isNewVersion = compareVersion(systemInfo.SDKVersion, '2.21.2') >= 0;

utils.js


/*** 获取兼容性系统信息* @returns {Object} 包含SDKVersion/windowWidth/system等字段的对象*/
export const  getCompatSystemInfo = () =>{// 优先尝试新API组合 (2.20.1+)if (uni.getDeviceInfo && uni.getWindowInfo) {const deviceInfo = uni.getDeviceInfo();const windowInfo = uni.getWindowInfo();return {SDKVersion: uni.getAppBaseInfo().SDKVersion,windowWidth: windowInfo.windowWidth,windowHeight: windowInfo.windowHeight,system: deviceInfo.system,platform: deviceInfo.platform};}// 降级使用旧APIconst legacyInfo = uni.getSystemInfoSync();return {SDKVersion: legacyInfo.SDKVersion,windowWidth: legacyInfo.windowWidth,windowHeight: legacyInfo.windowHeight,system: legacyInfo.system,platform: legacyInfo.platform};
}
/*** 比较两个版本号字符串的大小* @param {string} v1 - 版本号1 (格式如"1.2.3")* @param {string} v2 - 版本号2 (格式如"1.2.4")* @returns {number} *   1: v1 > v2*  -1: v1 < v2*   0: v1 == v2*/
export const  compareVersion = (v1, v2) => {// 将版本号字符串拆分为数字数组(如"1.2.3" → [1,2,3])const v1Arr = v1.split('.').map(Number);const v2Arr = v2.split('.').map(Number);// 比较最多3位版本号(支持4位可修改循环条件)for (let i = 0; i < 3; i++) {// 如果当前位v1大于v2,直接返回1if (v1Arr[i] > v2Arr[i]) return 1;// 如果当前位v1小于v2,直接返回-1if (v1Arr[i] < v2Arr[i]) return -1;}// 所有位都相同则返回0return 0;
}
<button  open-type="getPhoneNumber" @getphonenumber="registerUser">授权手机号一键登录
</button>

旧版实现代码

getPhoneNumber(e) {if (!isNewVersion && e.detail.encryptedData) {uni.login({success: (res) => {uni.request({url: 'YOUR_API',data: {code: res.code, iv: e.detail.iv,encryptedData: e.detail.encryptedData}})}})}
}

新版实现代码

getPhoneNumber(e) {if (isNewVersion && e.detail.code) {uni.login({success: (res) => {uni.request({url: 'YOUR_API',data: {wx_code: res.code,phone_code: e.detail.code}})}})}
}
if (e.detail?.errMsg !== "getPhoneNumber:ok") {console.log("授权失败")return;
}

特殊处理逻辑

降级方案
通过 wx.canIUse() 检测接口可用性,确保兼容性。

错误处理
需捕获 getPhoneNumberfail 回调,处理授权失败情况。

UI适配
建议使用条件渲染展示不同按钮文案,提升用户体验。


企业账号要求

旧版
仅需完成企业认证即可使用。

新版
需额外完成微信支付认证并开通相应权限。

测试号
提供 1000 次免费调用额度供开发测试使用。


最佳实践建议

新项目
必须使用新版接口,并提前规划调用预算。

存量项目
建议逐步迁移至新版接口,过渡期做好双版本兼容。

个人开发者
无法使用手机号授权功能,需升级为企业主体。

授权头像和昵称

新旧版本核心差异对比

微信小程序获取用户头像和昵称的新旧版本在API接口、触发条件、数据返回等方面存在显著差异:

旧版实现方式(2022年前)

  • 使用wx.getUserInfowx.getUserProfile接口
  • 需要用户主动授权弹窗
  • 直接返回包含用户信息的对象
  • 对基础库版本无特殊要求

新版实现方式(2022年后)

  • 使用chooseAvatar按钮和nickname输入框
  • 必须通过按钮点击触发
  • 头像返回临时路径,昵称需安全检测
  • 要求基础库版本≥2.21.2

强制使用新版的情况

  • 新注册的小程序必须使用新版接口
  • 已过审的小程序在更新代码时必须适配新版
  • 头像内容需通过微信安全检测

代码实现方案

新版标准实现
chooseAvatar接口返回的是临时文件路径。为了确保头像能够长期存储和展示,需要通过uni.uploadFile将该路径上传至服务器,并保存服务器返回的永久URL。

<!-- 头像获取 -->
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">选择头像
</button><!-- 昵称获取 -->  
<input type="nickname" @blur="onNicknameBlur" />
export default {methods: {onChooseAvatar(e) {this.avatarUrl = e.detail.avatarUrlthis.uploadAvatar()},onNicknameBlur(e) {this.nickName = e.detail.value}}
}

旧版兼容方案
如果不满足上述提及的使用旧版本的要求,以下代码获取得到的个人信息数据是默认数据,不是用户真实的头像和昵称。(加密的数据中存放的也是默认数据。)

<button v-if="showLegacy" open-type="getUserInfo" @getuserinfo="getLegacyInfo">授权获取信息
</button>
export default {data() {return {showLegacy: false}},mounted() {this.checkSDKVersion()},methods: {checkSDKVersion() {const { SDKVersion } = uni.getSystemInfoSync()this.showLegacy = this.compareVersion(SDKVersion, '2.21.2') < 0},compareVersion(v1, v2) {// 版本比较逻辑},getLegacyInfo(e) {console.log(e.detail.userInfo)}}
}

最佳实践建议

  • 新项目必须使用新版方案
  • 存量项目建议通过条件编译实现多版本共存

注意事项

  • 开发者工具与真机表现可能存在差异,需进行真机测试
  • 头像临时路径需在24小时内上传到服务器
  • 需提供用户拒绝授权时的备选方案

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/91486.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/91486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java函数式编程之【Stream终止操作】【下】【三】【收集操作collect()与分组分区】【下游收集器】

分组收集器groupingBy()&#xff1a;groupingBy()收集器用于按条件对元素象进行分组&#xff0c;并将结果存储在Map实例中。其作用与数据库的SQL语句的group by的用法有异曲同工之妙。 分区收集器partitioningBy()&#xff1a;partitioningBy()可以看作是分组groupingBy()的特殊…

python设计模式-工厂模式

工厂模式的核心思想&#xff1a;封装对象创建过程、解耦对象使用与创建 。示例代码&#xff1a;from enum import Enum# 基类&#xff1a;人类 class Person:species Homo sapiensdef __init__(self, name):self.name namedef __str__(self):return f"{self.__class__._…

Rust:anyhow::Result 与其他 Result 类型转换

当函数返回的不是 anyhow::Result 而是其他 Result 类型时&#xff08;如 std::io::Result、serde_json::Result 或自定义 Result&#xff09;&#xff0c;可通过以下方法统一处理错误类型&#xff0c;确保与 anyhow 兼容或实现错误传播&#xff1a;&#x1f6e0;️ 一、错误类…

PLC-梯形图编程

1.位运算,比较 如&#xff1a;>,<,, 2.定时器 生成脉冲TP&#xff0c;常开触点闭合触发&#xff0c;赋值10秒时长&#xff0c;PT配置参数&#xff0c;ET运行时已PT计时 接通延时TON&#xff0c;常开触点闭合触发&#xff0c;延时10秒后赋值 关断延时TOF&#xff0c;常开触…

LLM学习笔记5——InstructGPT

系列文章目录 参考文献 参考文献 参考文献 参考视频 文章目录系列文章目录前言目前大模型不同的技术流派与框架路线&#xff1a;1. ​​BERT&#xff1a;Encoder-only架构​​​​1&#xff09; 架构特点​​​​2&#xff09; 训练目标​​3&#xff09; ​​​​应用场景2. …

热能小车cad【12张】三维图+设计说明书

摘要 无碳小车来自全国大学生工程能力训练大赛题目&#xff0c;根据“节能减排&#xff0c;绿色出行”的环保理念&#xff0c;提出了一种基于热力驱动的具有方向自动控制的无碳小车。 本文设计的无碳小车主要是将热能转化成机械能&#xff0c;用来驱动小车前进的装置&#xff0…

云原生 DevOps 实战之Jenkins+Gitee+Harbor+Kubernetes 构建自动化部署体系

技术背景​ 在云原生生态中&#xff0c;工具链的选择直接决定 CI/CD 流水线的效率与稳定性。本次方案的工具组合并非偶然&#xff0c;而是基于各组件的核心优势与生态适配性&#xff1a;​ 代码管理层&#xff1a;Gitee 作为国内主流的代码托管平台&#xff0c;支持 Git 分布…

二建机电工程专业都考哪些知识点?

二建机电工程专业需要考《建设工程施工管理》《建设工程法规及相关知识》和《机电工程管理与实务》三个科目。其中《机电工程管理与实务》是专业科目&#xff0c;也是考试重点&#xff0c;主要考查机电工程技术、机电工程相关法规与标准、机电工程项目管理实务等内容。具体如下…

React + ts + react-webcam + CamSplitter 实现虚拟摄像头解决win摄像头独占的问题

一、安装 CamSplitter 这块网上有很多教程了&#xff0c;这里不再赘述&#xff0c;就一点&#xff0c;需要分几个虚拟摄像头&#xff0c;就要在CamSplitter 的安装目录下 driver_install.cmd 执行几次。二、React ts react-webcam 调用虚拟摄像头import { useState, useEffec…

【深度学习①】 | Numpy数组篇

0 序言 本文为NumPy数组库的系统学习笔记&#xff0c;将自己先前的笔记做一个总结归纳。内容涵盖数组基础、创建、索引、变形、运算、函数、布尔型数组及与张量的衔接等内容。通过具体示例解析核心概念与操作&#xff0c;帮助读者掌握NumPy的使用逻辑与方法&#xff0c;为后续深…

5.实现 call

call 是 JavaScript 中非常核心的函数方法之一。它能改变函数的执行上下文&#xff08;也就是 this 的指向&#xff09;&#xff0c;在日常开发和面试中都极其常见。本文将带你一步步实现一个 Function.prototype.call 的自定义版本&#xff0c;真正理解它的底层原理。✨ 一、c…

Go语言中的盲点:竞态检测和互斥锁的错觉

&#x1f9e0; Go语言中的盲点&#xff1a;竞态检测和互斥锁的错觉 使用 -race 就能发现所有并发问题&#xff1f;加了 mutex 就万无一失&#xff1f; 这篇文章揭示了 Go 并发编程中的一个“危险盲区” —— 互斥锁并不能总能保护你免受数据竞争的影响&#xff0c;尤其是在 -ra…

从文件到文件描述符:理解程序与文件的交互本质

一、理解文件 抛一个概念&#xff1a; 文件 内容 属性。 1. 那么&#xff0c;空文件有大小吗&#xff1f;答案是有的。因为空文件指的是文件内容为空&#xff0c;文件属性也要占据大小啊。 将来对文件操作&#xff0c;无非分为两类&#xff1a; 1.对文件内容做修改。 2.对文件…

优化算法专栏——阅读导引

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…

[ The Missing Semester of Your CS Education ] 学习笔记 Vim篇

“Writing English words and writing code are very different activities. When programming, you spend more time switching files, reading, navigating, and editing code compared to writing a long stream.” —— < The Missing Semester of Your CS Education &g…

Linux 系统中定时执行指定命令 crontab 定时任务配置

crontab 定时任务配置是 Linux/Unix 系统中用于自动、周期性执行指定命令或脚本的工具&#xff0c;相当于系统的 “定时闹钟”。它可以让系统在预设的时间&#xff08;如每天凌晨、每周一、每月 1 号等&#xff09;自动完成重复性工作&#xff0c;无需人工干预。自动化运维定期…

[ Leetcode ]---快乐数

题目链接 Leetcode快乐数 题目描述 如下图&#xff1a; 题目解析&#xff1a; 1.双指针法 算法核心思路 判断快乐数的关键挑战是如何检测是否进入无限循环。这里使用了快慢指针法&#xff08;Floyd 循环检测算法&#xff09;&#xff0c;这是一种高效检测循环的技巧&#…

智慧社区构建——2

1.实现Token校验## Token校验URLjson GET /checkToken 参数json HttpServletRequest request 返回json {"msg": "操作成功","code": 200,"status": "ok" }{"msg": "操作成功","code": 200,&q…

K-Means聚类:当数据没有标签时,如何让计算机自动“物以类聚”?

K-Means聚类&#xff1a;当数据没有标签时&#xff0c;如何让计算机自动“物以类聚”&#xff1f;&#x1f44b; 大家好&#xff0c;我是小瑞瑞&#xff01;欢迎回到我的专栏&#xff01; 在我们之前的旅程中&#xff0c;解决的问题大多都有一个明确的“目标”&#xff0c;比如…

万事皆可用 GeeLark AI

在今年4月&#xff0c;GeeLark AI 全面接入 DeepSeek AI 大模型&#xff0c;你可以在独立窗口中便捷地使用 GeeLark AI。除了帮助你编写文案等基础内容&#xff0c;在使用 GeeLark 过程中&#xff0c;如果遇到问题&#xff0c;也可以通过询问 GeeLark AI&#xff0c;及时获取帮…