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

一、前言

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

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小结所述三步直接搞定通用链接。

先决条件:必须有一个支持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-appuniCloud 页面,点击创建服务空间, 创建后,再点击开通按钮 ,进入前端网页托管页面,选择【参数设置】,单击【添加域名】,进行域名添加,如下图所示: 点击确定,选择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(通用链接)才生效。

四、问题汇总

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

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

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

五、拓展阅读

相关推荐
无咎.lsy2 分钟前
vue之vuex的使用及举例
前端·javascript·vue.js
fishmemory7sec10 分钟前
Electron 主进程与渲染进程、预加载preload.js
前端·javascript·electron
fishmemory7sec12 分钟前
Electron 使⽤ electron-builder 打包应用
前端·javascript·electron
豆豆1 小时前
为什么用PageAdmin CMS建设网站?
服务器·开发语言·前端·php·软件构建
twins35202 小时前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky2 小时前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~2 小时前
分析JS Crash(进程崩溃)
java·前端·javascript
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n03 小时前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
昨天;明天。今天。3 小时前
案例-任务清单
前端·javascript·css