iOS 微信打开第三方应用(Universal Links 和 URL Schemes)

本文介绍了在iOS中如何利用Universal Links和URL Schemes实现在微信等社交平台中点击链接直接打开应用或跳转到App Store。详细阐述了Universal Links的原理,需求场景,实现方案以及配置步骤,包括创建apple-app-site-association文件,配置app IDs,项目设置,以及验证过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、前言

项目中时常有这种需求, 是通过链接跳转到应用内部,现在iOS主流的方案有两个

  • Schema: 常用在于一个应用跳转到另一个应用内部,属于应用间的跳转。当然ios9以下,网页可以通过schema://跳转到App内部。但是这种方式跳转比较生硬,在每次跳转的时候都会弹框询问。如果iPhone中如果没有安装则会直接弹出错误提示。
  • Universal Links(通用链接): 常用于https链接来打开APP(手机中已经安装此APP),或者跳转到https链接(手机中没有安装此APP)。Universal Links就是一个通用链接,iOS9以上的用户,可以通过点击这个链接无缝的重定向到一个app应用,而不需要通过safari打开跳转。如果用户没有安装这个app,则会在safari中打开这个链接指向的网页。

备注:
  * 关于URL Schemes更多了解,可参考传送门
      * 关于Universal Links更多了解,可参考传送门

二,需求场景

(1)第三方应用集成了友盟分享到QQ和微信的功能

(2)第三方应用分享了一个web页面到微信或QQ

(3)打开分享的web页面,点击上面的某一个按钮

(4)如果用户安装了该应用,直接打开应用根据web地址中的参数跳转到对应的页面

(5)如果用户没有安装应用,直接跳转到appStore

三,需求实现方案 

iOS9 之后提供的 Universal Links 功能

四,需求实现步骤

(1)创建一个json文件,名称必须为 apple-app-site-association,⚠️该文件不可带 .json 的后缀名

         apple-app-site-association 文件必须放在https服务器的根目录下,例:https://kahui.huankaun.com 这个路径下 ⚠️一定是根目录,也就是说该文件必须是一级目录,供下载使用

        *  apple-app-site-association 文件格式:

{
"applinks": {
        "apps": [],
        "details": [
            {
                "appID": "teamID.bundleId
<think>我们正在使用UniApp开发iOS平台的微信登录功能。根据引用[2],我们可以使用uni.login方法,并设置provider为"weixin",同时注意配置参数安全性。由于是iOS平台,还需要确保在uni-app项目中正确配置了微信登录所需的权限设置。步骤:1.在manifest.json中配置微信登录的AppID。2.在iOS平台上,还需要配置通用链接(UniversalLink)以确保微信能正确跳转回应用。3.编写调用微信登录的代码。示例代码(基于引用[2]提供的示例):```javascript//点击微信登录按钮触发该方法wechatLogin(){uni.login({provider:'weixin',onlyAuthorize:true,//仅授权认证,不请求用户信息success:(loginRes)=>{//获取到codeletcode=loginRes.code;//将code发送到开发者自己的服务器,由服务器使用code、appid、appsecret等向微信换取session_keyopeniduni.request({url:'https://your-server-domain.com/login-by-weixin',//替换为你的服务器接口method:'POST',data:{code:code},success:(res)=>{if(res.data.code===0){//假设返回的数据中有tokenlettoken=res.data.data.token;//存储token,作为登录状态uni.setStorageSync('token',token);//登录成功,跳转到首页或其他页面uni.reLaunch({url:'/pages/index/index'});}else{uni.showToast({title:res.data.message,icon:'none'});}},fail:(err)=>{uni.showToast({title:'登录请求失败',icon:'none'});}});},fail:(err)=>{//失败原因:用户拒绝授权等console.error('微信登录失败',err);uni.showToast({title:'微信登录失败',icon:'none'});}});}```注意事项:1.服务器端需要实现通过code换取session_keyopenid的逻辑,并生成自己的token返回给客户端。2.在manifest.json中,需要正确配置微信小程序的AppID(如果同时做了小程序,这里要注意区分小程序移动应用的AppID是不同的)以及iOS平台的通用链接。实际上,对于微信登录,需要的是在微信开放平台申请移动应用,而不是小程序。所以这里需要的是移动应用的AppID。3.在微信开放平台申请的应用需要审核通过后才能使用微信登录功能。4.iOS上需要配置通用链接,具体配置在manifest.json的"App模块配置"->"OAuth(登录鉴权)"->"微信登录"中填写iOS平台的通用链接(UniversalLinks)。通用链接的配置需要按照微信官方文档要求来设置。另外,对于iOS平台,从2021年4月开始,微信要求使用UniversalLink方式进行跳转,所以务必正确配置。配置步骤(在manifest.json中):1.打开manifest.json,选择“App模块配置”。2.在“OAuth(登录鉴权)”中勾选“微信登录”。3.填写微信开放平台移动应用的AppIDAppSecret(注意保护AppSecret,不建议前端保存,应该由服务器保存)。4.填写iOS平台的通用链接(UniversalLinks)。通用链接的格式为:`https://你的域名/app/`(注意:必须https,且根目录下放apple-app-site-association文件,微信开放平台配置的通用链接也要这里一致)。注意:由于引用中并未提供完整的配置教程,以上步骤是基于微信登录的通用实践。具体操作可以参考微信开放平台文档uni-app官方文档。参考文献:[^2]提供了基本的登录代码,但需要注意配置服务器交互。[^1][^3]介绍了uni-app的基本特性。特别提醒:在开发过程中,如果遇到微信登录无法调起或者失败,请检查:-是否在微信开放平台绑定了正确的iOS应用的BundleID。-是否在微信开放平台配置了正确的UniversalLinks。-是否在manifest.json中正确填写了UniversalLinks(注意:iOS上要配置,Android不需要)。如果按照以上步骤操作,应该可以在uni-app中实现iOS平台的微信登录功能。相关问题:1.如何在uni-app中配置微信登录的UniversalLinks?2.微信登录的服务器端如何实现?3.如何保护微信登录的AppSecret?</think> 基于您提供的引用信息需求,以下是UniApp在iOS平台实现微信登录的完整教程示例代码: ### 一、实现步骤 #### 1. 微信开放平台配置 - 创建移动应用:[微信开放平台](https://open.weixin.qq.com/)注册账号并创建移动应用 - 配置Bundle ID:在"管理中心>移动应用详情>开发信息"填入iOS的Bundle ID - 配置Universal Link: - 生成Apple App Site Association文件[^1] - 配置域名HTTPS支持,例如:`https://yourdomain.com/app/` - 在微信开放平台填写此Universal Link #### 2. UniApp项目配置 ```json // manifest.json { "app-plus": { "distribute": { "ios": { "bundleIdentifier": "com.yourcompany.app", "urltypes": [{ "urlidentifier": "weixin", "urlschemes": ["wx1234567890"] // 微信AppID }] } }, "oauth": { "weixin": { "appid": "wx1234567890", // 微信开放平台AppID "appsecret": "your_app_secret", // 服务端保存,不写在此处 "UniversalLinks": "https://yourdomain.com/app/" } } } } ``` #### 3. iOS端登录实现代码 ```javascript // 触发微信登录 async function weixinLogin() { try { // 1. 获取微信登录凭证 const loginRes = await uni.login({ provider: 'weixin', onlyAuthorize: true // 仅授权获取code }); // 2. 发送code到服务端 const tokenRes = await uni.request({ url: 'https://api.yourserver.com/auth/weixin', method: 'POST', data: { code: loginRes.code, platform: 'ios' } }); // 3. 保存登录状态 if(tokenRes.data.success) { uni.setStorageSync('access_token', tokenRes.data.access_token); uni.showToast({ title: '登录成功' }); } } catch (err) { console.error('登录失败:', err); if(err.errCode === -1000) { uni.showToast({ title: '未安装微信', icon: 'none' }); } } } ``` ### 二、关键注意事项[^2] 1. **参数安全性** - `appsecret`必须存储在服务端,严禁写在客户端 - 服务端需验证openid用户信息的真实性 ```javascript // 服务端验证示例(Node.js) const axios = require('axios'); const appid = 'wx1234567890'; const secret = 'your_app_secret'; async function verifyCode(code) { const { data } = await axios.get( `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code` ); return data; // 返回包含openid的数据 } ``` 2. **iOS特殊适配** - 在`App.vue`中添加通用链接处理 ```javascript onLaunch() { plus.runtime.addEventListener('weixinLogin', (e) => { this.handleWeixinCallback(e); }); } ``` 3. **权限配置** - 在Xcode中启用Associated Domains: ``` applinks:yourdomain.com ``` - 添加URL Scheme:`wx1234567890` ### 三、常见问题排查 1. **授权窗口未弹出** - 检查Universal Link配置是否完成微信端验证 - 确认iOS的Associated Domains配置正确 2. **回调失败(错误码-1000)** ```javascript // 添加微信检测逻辑 function checkWeixinInstalled() { return new Promise((resolve) => { plus.runtime.isApplicationExist({ pname: 'com.tencent.xin', action: 'weixin://' }, resolve); }); } ``` 3. **审核注意事项** - 提供测试账号给苹果审核团队 - 隐藏未审核通过的功能模块 > 提示:iOS首次审核时微信登录功能需提供操作视频演示[^3] ### 四、服务端处理流程 ```mermaid sequenceDiagram participant iOS participant Server participant WeixinAPI iOS->>Server: 发送code(step1获取) Server->>WeixinAPI: code + appsecret请求 WeixinAPI-->>Server: openid + session_key Server->>Server: 生成access_token Server-->>iOS: 返回access_token iOS->>iOS: 本地存储token ``` --- ### 相关问题 1. 如何解决iOS微信登录时Universal Link验证失败问题? 2. UniApp微信登录如何实现不同平台的代码兼容? 3. 微信登录授权失败时应如何处理错误码? 4. 服务端如何防止微信登录的Code被恶意重放?[^2]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值