- 准备一个H5页面(用vue写也行,html写也行)
- 打开友盟官方文档,可能需要登陆,也可通过链接到达友盟JS SDK接入
<button id="xxl">点我唤起</button> <script src="https://g.alicdn.com/jssdk/u-link/index.min.js"></script> <script> ULink([{ id:"userxxx",// 后台生成的裂变活动LinkID data:{// 传递的自定义动态参数,选填,连接APP端再填也可 goodid:''xxxx'', usrid:''xxx'', }, selector:"#xxl",//按钮的名称 // 可选高级功能,具体含义请看下方U-Link API文档 auto:true, //是否自动唤起,默认false,就是不自动唤起应用 timeout:2000,//未唤起app时,会等待两秒(设置多久等待多久)出现弹框 lazy:false //活动配置下发,文档解释得更清楚 }]); </script>
- 以上代码可直接c到html页面中带入使用,控制台成功会提示如下 使用vue来写的话,ULink需在html页面引入一次,再在需要使用的.vue文件引入一次也可正常使用
- 完成以上后就可以添加一些弹框或者提示下载的蒙层,弹框在未唤起APP时会弹出,见下图(判断App是否已安装/唤起成功)。两秒内未唤起app,或者未打开浏览器;打开浏览器后,两秒内未唤起app,这两种情况会弹出。弹框自定义见下图,图中选项可找到自定义代码
- 提示下载的蒙层,有官方提供的默认蒙层(见下图),也可自定义
- 如果和App端连接后,需要接收传来的数据,就需要在data中自定义,通过获取路径的参数,再把参数存入data中
以上是只写分享页面的流程,iOS端,Android端的配置请参考其他大佬的博客。