跨平台应用开发进阶 (三十四) ：uni-app 应用 Universal Link 实现 iOS 微信分享

一、前言

传统的微信分享可通过URLScheme 实现，具体实现方式详参博文《跨平台应用开发进阶(十六) ：uni-app实现URLScheme唤醒APP》，但URL scheme因为是自定义的协议，所以在没有安装 app 的情况下是无法直接打开的(在 Safari 中还会出现一个不可打开的弹窗)，而Universal Link(通用链接)本身是一个 HTTPS 链接，所以有更好的兼容性。

二、Universal Link

2.1 Universal Link(通用链接)概览

Universal Link是苹果在 WWDC 2015 上提出的 iOS 9 的新特性之一。此特性类似于深层链接，并能够方便地通过打开一个https链接来直接启动客户端应用(手机有安装 App)。对比以往所使用的URLSheme, 这种新特性在实现 web-app 的无缝链接时，能够提供极佳的用户体验。 使用前请阅读苹果官方文档。

由于苹果 iOS 13 系统版本安全升级，微信 SDK1.8.6 版本要求支持Universal Links方式跳转，以便进行合法性校验，提升安全性。更多详情请参考微信官方说明。

也就是说，以前你的 APP 要打开其他 APP 是通过URLScheme 实现，后来苹果提出用https链接来启动，手机上对应的 app（已安装），更方便与 web-app 的无缝对接。微信响应了这个方案。所以大家开发的 APP 无论是微信登录、微信支付，还是微信分享等一切会跳转到微信，再跳回来的场景，需要提供这个链接。要不然你的应用打开了微信，微信就打不开你的应用。

2.2 如何理解 Universal Link(通用链接)

Universal Link(通用链接)：看起来就是一条普通的 https 链接，当然是我们在该链接域名根目录配置过的一个链接，也可以在该链接中放置对应的 H5 页面。当用户的点击该链接，只要手机中安装了支持该链接的 APP 就会直接进入到 APP 中。如果没有安装 APP 则会跳转到 Safari 浏览器中，展示 H5 页面。对用户来说则是一个无缝跳转的过程。

2.3 Universal Link(通用链接)应用场景

使用 Universal Link(通用链接)可以让用户在 Safari 浏览器或者其他 APP 的 webview 中拉起相应的 APP，也可以在 APP 中使用相应的功能，从而来把用户引流到 APP 中。比如淘宝当在 Safari 浏览器中进入淘宝网页点击打开 APP 则会使用 Universal Link(通用链接)来拉起淘宝 APP。

2.4 使用 Universal Link(通用链接)跳转的好处

• 唯一性: 不像自定义的URL Scheme，因为它使用标准的 HTTPS 协议链接到你的 web 站点，所以一般不会被其它的 APP 所声明。另外，URL scheme因为是自定义的协议，所以在没有安装 app 的情况下是无法直接打开的(在 Safari 中还会出现一个不可打开的弹窗)，而Universal Link(通用链接)本身是一个 HTTPS 链接，所以有更好的兼容性；

• 安全:当用户的手机上安装了你的 APP，那么系统会去你配置的网站上去下载你上传上去的说明文件(这个说明文件声明了当前该 HTTPS 链接可以打开那些 APP)。因为只有你自己才能上传文件到你网站的根目录，所以你的网站和你的 APP 之间的关联是安全的；

• 可变:当用户手机上没有安装你的 APP 的时候，Universal Link(通用链接)也能够工作。如果你愿意，在没有安装你的 app 的时候，用户点击链接，会在 safari 中展示你网站的内容；

• 简单:一个 HTTPS 的链接，可以同时作用于网站和 APP；

• 私有: 其它 APP 可以在不需要知道你的 APP 是否安装了的情况下和你的 APP 相互通信。

传统方式配置通用链接需要:

1. 在苹果开发者中心：开启Associated Domains服务；

2. 获取相关参数，手动创建apple-app-site-association文件；

3. 部署apple-app-site-association文件到云服务器，配置 SSL 证书解析域名；

4. 然后手动在manifest.json中配置Associated Domains（域名）；

5. 粘贴通用链接到对应权限模块；

6. 在微信开放平台配置通用链接；

其中需要注意的细节较多，且调试起来困难繁琐，困扰了大量开发者。

现在通过HBuilderX（3.1.9 起）云打包，支持自动生成apple-app-site-association文件，并自动托管到：自带 cdn、ssl 等服务的“免费”的云服务空间uniCloud的前端网页托管，自动完成manifest.json中的相关配置。用自动化技术替代了，如上所示传统方式令人苦恼的（2-5）4 个步骤；只需如 3.2 小结所述三步直接搞定通用链接。

三、Universal Links 实现 iOS 微信分享

先决条件：必须有一个支持 HTTPS 的域名，并且拥有该域名下的上传到根目录的权限（为了上传 Apple 指定文件）。

3.1 传统方式

3.2 uniCloud 前端网页托管方式实现

首先打开项目的manifest.json文件，找到 App 模块配置，勾选微信分享会弹出一个 Android 和 ios 的配置项，ios 分享需要的是一个Universal Links链接，大概需要 3 步流程。

第一步：进入苹果开发者后台，点击Certificates, IDs & Profiles选项，选择identifiers 找到对应的 app 项目，如果没有，点击创建即可，勾选Associated Domains，然后保存即可。（注⚠️：如果之前生成过profile文件，修改后需要在profiles里重新下载进行替换！）

第二步：自动生成通用连接，打开项目的manifest.json文件，在“(App) SDK 配置”项中的微信登录（微信分享、微信支付）下的“iOS 平台通用链接（Universal Links）”中， 点击如图所示自动生成。

这时候选择新建，新建一个服务空间，会跳转到uni-app的uniCloud 页面，点击创建服务空间，

创建后，再点击开通按钮 ，进入前端网页托管页面，选择【参数设置】，单击【添加域名】，进行域名添加，如下图所示：

点击确定，选择DNS解析验证，文件验证会有问题，不建议选择。需要去域名那边配置，配置完成后点击验证，验证成功，点击确定即可，配置成功后，需要把http强转成https，需要更新证书。

正确输入即可，完成后，回到项目中。

点击完成就行了。

第三步：微信开放平台配置Universal Link，打开微信开放平台 (opens new window)，在“管理中心”页面的“移动应用”下找到已经申请的应用（没有申请应用请点击“创建移动应用”新建应用），点击“查看”打开应用详情页面。 在“开发信息”栏后点击修改，在“iOS 应用”下的“Universal Links”项中配置应用生产的通用链接，如下图所示：

然后对项目进行云打包后，即可查看微信分享效果。

3.3 Universal Link(通用链接)相关验证

在 iOS 设备中的备忘录中输入 APP 能识别的链接，然后直接点击此链接，就会直接跳转到你的 app 了。或是长按，在出现的弹出菜单中第二项是在’XXX’中打开，这也代表着成功：

或是你将要测试的网址在 Safari 中打开，在出现的网页上方下滑，可以看到有在”XX”应用中打开：

苹果为了方便开发者，提供了一个网页来验证我们编写的这个 apple-app-site-association 是否合法有效，进入验证网址进行验证：

注意⚠️：

• 前端开发经常面临跨域问题，必须要求跨域，如果不跨域，就不行。

• 只有当前 webview 的 URL 域名，与跳转目标 URL 域名不一致时，Universal Link(通用链接)才生效。

四、问题汇总

4.1 Universal Links 实现微信分享

uni-app在实现 iOS 微信分享时遇到以下问题：

之所以出现以上问题，是由于微信 iOS 安全机制，必须通过设置Universal Links实现微信分享功能。

4.2 域名还未通过验证,请选择方式通过验证后再进行添加

五、拓展阅读

• 《通用链接配置》