H5营销分享页技术总结

项目背景

为了配合市场部门进行营销活动，需要开发一个媒体黄页。在黄页内可以拉取运营配置的素材以及文案，方便用户一键分享到抖音/快手/小红书等社交平台。素材获取与下载等功能比较常规，本文不再赘述，主要分享一键分享到社交平台的技术实现。

调起app方案

最早的 url schema

调起本机安装的app，最早都是用 url schema 方案，直接在H5里用 a 链接或者 location.href = "myapp://"即可。这个appschema 是要被打开的app在安装时注册进系统里。
但是 url schema 有个缺点是如果用户本机没有安装对应应用，就不会有任何反应，也没有提示。而且还有一些安全问题，比如被恶意app伪装。

universal link

为了解决 url schema 的缺点，苹果引入了 universal link 方案。这个方案要求应用开发者有一个公开的https服务，在服务根目录放置一个 apple-app-site-association 文件 （简称AASA）。并且在开发APP时配置 Associated Domains。也就是说app和 https 的域名是绑定的，可以防止恶意伪装。具体如何生成AASA以及开发app时的配置，参考苹果开发者手册

当用户在H5页面点击这个 universal link 时，如果已安装了应用，就直接打开应用的对应页面。如果未安装则直接打开 这个 https域名下的网页，可以在网页里完成部分功能，或者在网页里引动用户下载应用。这样用户体验就会好很多。

例如用户访问：

https://example.com/product/123

如果安装了你的 App：

H5
 ↓
https://example.com/product/123
 ↓
iOS 判断该域名与 App 已建立关联
 ↓
打开 App
 ↓
App 收到 /product/123

如果没有安装：

https://example.com/product/123
 ↓
正常打开 H5

google app link

Android 对应 universal link 的方案叫 google app link ，原理与配置非常类似 universal link，但是由于google 服务在国内不稳定，所以应用的不多。Android环境大家还是沿用之前的 url schema 方案。

微信限制

以上说的是普通H5环境，即操作系统自带的webview。 微信内置自己的浏览器，对 url schema 和 universal link 都有拦截。微信禁止H5直接打开第三方APP，只能在自家域名打开自家app，且需要在微信开发平台注册+绑定。

由于微信限制较多，行业内通用做法是根据UA判断当前运行环境，如果是微信内H5，则引导用户用系统浏览器打开页面，再调起对应app。

社交平台发布

调起app的问题解决后，下一步就是如何简化用户在社交app内发表作品了。抖音/快手/小红书都有自己的开放平台，这些开发平台对外开发了发布作品接口，开发者可以调用对应api来上传素材到平台内，直接引导用户到发表作品页面，帮用户填好素材，用户直接点击“发布”按钮即可。

但是三个平台的注册，都需要一定的资质要求，比如营业执照，法人信息等，有的平台还需要收费。而且每个平台单独对接，开发周期也较长。所以本项目没有采用这个方案。而是选择让用户在H5页面手动下载视频/图片素材，自动复制文案到剪切板。然后打开app时落地到对应的发表作品页面，由用户手动填写素材，发表作品。

抖音/快手/小红书的 url schema 和 universal link 记录如下

// 抖音的 url schema 与 universal link 都没有直达发布页的路径，所以用了以下路径
scheme:"snssdk1128://user/homepage" // 我的页面
universalLink:"https://www.douyin.com/" //首页
liteScheme:"snssdk2329://user/homepage"
// 快手
scheme:"kwai://post",
universalLink:"https://m.ssl.kuaishou.com/app/"
liteScheme:"ksnebula://post"
// 小红书
scheme:"xhsdiscover://post_new_note"
universalLink:"https://www.xiaohongshu.com/post_new_note/"

总结

前端H5能做的是把「唤起、备料、降级」三件事做到极致；「替用户发布」只能靠官方开放平台加后端服务。

最终落地的唤起方案

降级链路统一为：主 Scheme → 2s 未切后台转极速版 → 再 1.5s 未切后台提示「未安装」；微信 / QQ / 微博内不尝试唤起，直接引导到系统浏览器重走全流程。