JS SDK接入
接入前请先U-Link后台填写Deeplink基础参数，创建裂变活动，拿到LinkID。完成JS SDK集成后需查看Android &iOS SDK的接入。
JSSDK功能
U-Link能够实现通过连接启动App或引导用户下载App，实现该能力需要App（iOS或Android）集成Native SDK，并在分享出去的URL链接中集成JS SDK，两个SDK相互通信，完成启动链路。
JS SDK的作用是：
获取Deeplink配置参数
启动或引导用户下载App的能力
传递参数到App中，包括启动或新安装应用场景
向U-Link统一后端上报统计信息
追踪用户在社交平台中的分享链路功能（需结合U-Share SDK）
准备H5页面
请先准备一个裂变活动所需的H5页面，用户在点击链接时会先打开该H5页面，并从该页面唤起App，H5页面中需要填入linkid。
iOS端Universal link的域名与此H5页面域名不能为同一个，否则H5页面将不能唤起App ，详情请见文档
如您需要在U-Share后台看到分享回流次数、分享新增用户等指标，由于分享是唯一一个跨端的渠道（例如从安卓手机分享H5页面到微信中，被一个iOS手机打开），而友盟+安卓和iOS是两个appkey，所以分享渠道需要您自己在H5页面链接后携带上当前应用的Appkey ，格式是”um_from_appkey=xxx“
举例：在创建裂变营销活动时勾选了分享渠道，后台生成了分享渠道的专属链接https://test.com?id=123&um_chnnl=share。然后您需要在后面再拼上当前应用的appkey，就变成了https://test.com?id=123&um_chnnl=share&um_from_appkey=xxxxx)”这种形式
快速集成JS-SDK
我们在Gitee上同步了JS-SDK的集成文档，也可在Gitee上访问。
通过cdn引入在script标签中使用
新版api示例（推荐）
注：自2021年2月23日JSSDK更新功能，兼容旧版API
<buttonid="xxl">点我唤起</button>
<scriptsrc="https://g.alicdn.com/jssdk/u-link/index.min.js"></script>
<script>
ULink([{
id:"linkidxxx",// 后台生成的裂变活动LinkID
data:{// 传递的自定义动态参数
goodid:''xxxx'',
usrid:''xxx'',
},
selector:"#xxl",//按钮的名称
// 可选高级功能，具体含义请看下方U-Link API文档
auto:true,
timeout:2000,
lazy:false
}]);
</script>data传递的自定义参数的key不要以url结尾，例如是pageurl:'xxx'，这样会造成App新安装或者唤起时接收到的参数出现异常情况，详情请看文档
旧版api示例
<scriptsrc="https://g.alicdn.com/jssdk/u-link/index.min.js"></script>
<script>
ULink.start({
id:"xxx",
data:{
a:4,
b:'xx
},
}).ready(function(ctx){
console.log(ctx.solution);// --> ISolutions;
ctx.wakeup();
});
</script>U-Link API文档
UMD模块封装顶级对象
/**
* Ulink配置
*/
interface LinkConfig {
id: string; // 必填参数,后台生成的linkid
data?: object; // 自定义参数例如{a:1,b:2} 换起应用时会携带过去并映射成a=1&b=2
}
/**
* 配置下发回调
*/
type ReadyCallback = {
(ctx: LinkInstance): void;
};
/**
* 配置下发内容
*/
interface ISolutions {
wakeupUrl: string; // 唤起地址
type: "scheme" | "universalLink"; // 唤起类型
downloadUrl: string; // 下载地址
appkey: string; // 对应appkey
clipboardToken?:string; // 友盟后台开启剪切板能力时返回此字段，开启后可提高带参安装匹配成功率。
}
interface IWakeup {
action?: "" | "load" | "click"; // 设置统计上报的唤起方式
proxyOpenDownload?: IProxyOpenDownload; // 代理打开下载提示行为
beforeOpenDownload?: ICallback;
afterOpenDownload?: ICallback;
timeout?: number; //触发弹窗等待超时时间单位毫秒，默认200毫秒，安卓中微信强制为0
}
type ICallback = {
(ctx: LinkInstance): void;
};
type defaultActionCallback = {
(extdata?: object): void;
};
type IProxyOpenDownload = {
(defaultAction: defaultActionCallback, ctx: LinkInstance): any; // 如仍需执行默认弹窗行为可调用defaultActionCallback
};
/**
* Ulink实例
*/
interface LinkInstance {
ready(callback: ReadyCallback): void; // 配置下发
wakeup(config: IWakeup): LinkInstance; // 唤起
solution: ISolutions; // 配置下发内容
}
declare namespace ulink {
/**
* sdk版本
*/
export const version: string;
/**
* 创建Link实例
* @param config 实例配置
*/
export function start(config: LinkConfig): LinkInstance;
export interface tracker {}
}
type ProxyOpenInBrowerTips = {
(): string;
};
type ProxyShowLoading = {
(): void;
};
type ProxySHideLoading = {
(): void;
};
/**
* 自由拼接待写入剪切板内容，入参为服务端下发的token，返回值将被写入剪切板
*/
type SetClipboardText = {
(clipboardToken:string): string;
}
type LinkOption = {
id: string; // 必填参数,后台生成的linkid
selector?: string; // 需要点击唤起的元素选择器（采用事件代理模式，不必等元素创建后绑定），示例 '#idxx,#idxxx',参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors
data?: object; // 自定义参数例如{a:1,b:2} 换起应用时会携带过去并映射成a=1&b=2
proxyOpenDownload?: IProxyOpenDownload; // 自定义打开下载提示行为
timeout?: number; // 触发弹窗等待超时时间单位毫秒，默认200毫秒，安卓中微信强制为0
auto?: boolean; // 是否自动唤起,默认false,配置下发后不自动唤起应用(特别注意，部分web容器会限制自动唤起)
lazy?: boolean; // 是否将配置下发延迟到点击时下发，默认false，如果需延迟到点击时下发配置应设置为true
useOpenInBrowerTips?: string | ProxyOpenInBrowerTips; // 是否在微信和qq中使在浏览器中打开的提示，当值为string类型时，默认'default',值为function时，需要该函数返回蒙层html片段。
useLoading?: string | [ProxyShowLoading, ProxySHideLoading]; // 即将支持 当值为string类型时，默认'default',启用自带loading,当值为数值时，数组第一个函数触发唤起时触发，第二个函数关闭loading时触发
onready?:ReadyCallback; // 配置下发后触发
useClipboard?:boolean | SetClipboardText; //开发者在产品后台打开剪切板功能后此功能才生效，默认 为true, true 代表在唤起时用clipboardToken覆盖剪切板内容;false代表不会覆盖剪切板内容，开发者可以在onready后获取配置下发的token;如果是一个function，则将function返回的string写到剪切板，function的入参是配置下发的clipboardToken，当且仅当开发者需要自定义剪切板内容时使用。特别注意，若服务端剪切板功能关闭，则此配置完全失效。（2021.04.23上架生效）
};
declare class ulink {
/**
* ulink新版初始化函数
* @param option 初始化参数
*/
constructor(option: LinkOption);
/**
* ulink新版多参数初始化函数
* @param options 多个linkid初始化参数
*/
constructor(options: Array<LinkOption>);
}
export as namespace ULink;
export = ulink;
start ： 初始化Ulink实例 version ：sdk版本号x.x.x
演示DEMO
https://share.umeng.com/demo/ulink/index.html
网页右键查看源码可以查看此DEMO的代码
场景示例
我们总结了开发者常见使用场景和多种自定义功能，具体代码含义请看上文快速集成和API文档部分
免填邀请码安装功能
后台创建裂变活所填写的【App页面传参】和【首次安装传参】是固定参数。
如果您想要传递动态参数（商品id、文章id、用户id等），则需要在JSSDK的data: { }里传递您想要携带的自定义参数。 在App工程内调取安装参数接口（Andriod参考文档，iOS参考文档），即可获取【首次安装传参】和wakeupurl，wakeupurl里就包含自定义动态参数 。详情请看文档
具体流程请看FAQ
判断App是否已安装/唤起成功
微信和浏览器官方并未提供此api，可通过“间隔一定时间后，根据浏览器页面是否被隐藏掉来判断app是否被唤起成功”间接实现。
“timeout”参数：触发弹窗等待超时时间，默认200毫秒。
需要配置“timeout”参数，例如可设置为2秒，则用户在点击唤起app按钮后，会等待2秒。
如果2秒内浏览器页面被隐藏掉了，则视为App已经被成功唤起（说明该用户已安装了App）。
如果2秒后浏览器页面还在，则视为App唤起失败（说明用户未安装App），此时就会弹出下载提示框。
Android 微信环境此参数强制为0，由于微信政策限制，Android端大部分App无法在微信内直接唤起App。
自定义下载框弹出样式
当用户点击按钮却未安装时，U-Link默认会弹出下载弹框，样式如下：
如果您希望修改此下载框的样式，如文字和颜色，请参考如下Demo：
// ULink 集成代码参数修改
proxyOpenDownload: myDownloadStyle,
// 自定义下载样式
function myDownloadStyle(defaultAction, LinkInstance) {
if(downloadStyle === true) {
var element = document.getElementById("downloadStyle"); // 在body标签后面添加一个元素 <div id="downloadStyle"></div>
element.innerHTML = `
<div id="download-window" style="
width: 70%;
height: 130px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
position: absolute;
top: 30%;
left: 10%">
<div onclick="window.ulinkCloseDownloadTip()" style="
position: absolute;
top: 4px;
right: 10px;
">X</div>
<p>请点击下方下载按钮跳转至商店进行下载!</p>
<button style="
width: 70%;
height: 40px;
background-color: #3b82fe;
color: #fff;
border-radius: 20px;
border: none;
margin: 0 auto;
display: block;
" onclick="window.ulinkOpenDownload()">立即下载</button>
</div>
`
window.ulinkCloseDownloadTip = function() {
document.getElementById('download-window').remove();
}
window.ulinkOpenDownload = function() {
window.location.href = LinkInstance.solution.downloadUrl
}
} else {
defaultAction();
console.log("原版下载样式")
}
}Demo实现的自定义样式如下图：
实现未安装App时自动跳转到下载页面
同上，当用户点击按钮却未安装时，U-Link默认会弹出下载提示弹框
如果您希望浏览器内实现App未安装时自动跳转到下载页面，可参考以下demo代码，实现"微信qq内通过蒙版引导浏览器打开，在浏览器内如未安装直接跳转下载地址“的功能：
<button id="xxl">点我唤起</button>
<script src="https://g.alicdn.com/jssdk/u-link/index.min.js"></script>
<script>
ULink([
{
id: "linkidxxx",
data: {
a: 4,
b: "xx",
},
selector: "#xxl",
useOpenInBrowerTips: "default",
proxyOpenDownload: function (defaultAction, LinkInstance){
if (LinkInstance.solution.type === "scheme"){
// qq或者微信环境特殊处理下
if (ULink.isWechat || ULink.isQQ) {
// 在qq或者微信环境执行内置逻辑，具体内置逻辑为:当设置了useOpenInBrowerTips字段时，qq&&微信&&scheme时，启用蒙层提示去浏览器打开
defaultAction();
}else{
window.location.href = LinkInstance.solution.downloadUrl;
}
}else if(LinkInstance.solution.type === "universalLink"){
// universalLink 唤起应当由服务端提供一个带重定向到appstore的universallink地址。因此，此处不应写逻辑，友盟已于6月2日上线universalLink生成及重定向功能。
}
},
},
]);
</script>演示DEMO代码效果为未如未安装直接跳转下载地址
蒙版+文字形式引导至右上角浏览器形式打开（微信QQ内）
因大部分App的Scheme不在微信、QQ白名单内，因此大部分Android App不能在微信、QQ内直接唤起App，唯一解决方法是引导用户通过右上角浏览器形式打开。当微信内唤起app失败时，U-Link会有以下两种样式：
默认下载提示框样式：
在微信QQ内的蒙版样式：
以蒙版+文字箭头形式，引导用户通过右上角浏览器形式打开。体验在线DEMO
（1）如想使用U-Link提供的默认蒙层，需设置 useOpenInBrowerTips: default；（2）如想实现提示去浏览器打开的自定义蒙层，可以参考以下demo示例：
<buttonid="xxl">点我唤起</button>
<scriptsrc="https://g.alicdn.com/jssdk/u-link/index.min.js"></script>
<script>
ULink([{
id:"linkidxxx",
data:{
a:4,
b:'xx
},
selector:"#xxl",
useOpenInBrowerTips:function(ctx){
return`<div style="position:fixed;left:0;top:0;background:rgba(255,0,255,0.5);width:100%;height:100%;z-index:19910324;"></div>`；
}
}]);
</script>自定义剪切板写入内容
剪切板功能涉及到后台打开开关、剪切板写入和剪切板读取等，此功能可以提升拉新统计率，详情请看文档
此功能需要先在后台打开剪切板开关，体验DEMO
<button id="xxl">点我唤起</button>
<script src="https://g.alicdn.com/jssdk/u-link/index.min.js"></script>
<script>
ULink([{
id: "linkidxxx",
data: {
a:4,
b:'xx'
},
selector:"#xxl",
useClipboard:function(clipboardToken){
// 如果H5以前用到了剪切板，且剪切板内容是 scheme://xxx/xx?key=value这种类型的,考虑到app升级，可以参考这种拼接方式`scheme://xxx/xx?key=value&um_clp=${clipboardToken}`
return '用户自定义内容' + clipboardToken;
}
}]);
</script>修改【活动触发次数】指标统计规则（配置下发延迟到点击时下发）
活动配置下发会上报init事件，活动触发次数指标统计与此有关，
如果希望H5页面打开时就开始配置下发，那么需要设置“
lazy:false”，此时【活动触发次数】指标等于H5页面打开次数。如果希望等用户点击【唤起app】按钮时才开始配置下发，那么需要设置“
lazy:true”，此时【活动触发次数】指标等于按钮的点击次数
实现页面加载时自动唤起App
设置“auto:true”，则H5页面打开加载时会尝试唤起App。
默认是false，即点击按钮唤起App。
注意部分浏览器web容器会限制自动唤起功能，所以更建议采取点击按钮唤起app功能
JS-SDK提供的工具函数
以下是JSSDK提供的可选参数
ULink.getUriParams() // 解析url中的所有查询参数
ULink.getUriDecodeParams() //解析url中的所有查询参数，并解码参数