常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码。但往往我们都是直接给推广图片加了一个下载链接(App Store中的)。所以咱们来模拟一下用户的操作步骤:
1、用户第一次访问宣传页面
a、点击Banner,进入到APP Store中对应的APP下载页
b、APP下载页中提示:安装;用户点击安装
c、安装完成后,APP下载页中提示:打开;用户继续点击打开
d、用户正常使用APP
2、用户第二次访问宣传页面
a、点击Banner,进入到APP Store中对应的APP下载页
b、APP下载页中提示:打开;用户直接点击打开
c、用户正常使用APP
3、用户第三次、第四次、...、第N次访问,操作步骤同2
能看出来,不管是点击Banner还是扫描二维码的方式,对于已经安装过APP的用户来说,这个体验都是非常糟糕的。
更优的体验是:点击Banner(或扫描二维码)后,程序判断当前系统是否已安装App,如果未安装,则自动跳转到App Store下载页;否则直接打开App。
而对于点击链接后,能否直接打开,可以通过下面的代码来实现。
前提条件:你得知道你的APP对应的打开协议,如贴吧APP,协议为:com.baidu.tieba:// ,微信的:weixin://
测试给Banner加点击事件,点击打开App
document.querySelector("#Banner").onclick = function(){
setTimeout(function(){
window.location.href = "com.baidu.tieba://"//唤起APP
},2000);
window.location.href = "download.html"//2秒内没有唤起,表示手机中没有该APP,去下载页
}
给ID为Banner的元素添加点击事件,用户点击链接,打开协议启动APP
如果是在微信中,我们用工具转换openapp页面的链接,转换后的链接可以在微信中自动在打开浏览器访问openapp页面,这样用户点击的时候一样可以唤起APP了
使用教程:
①:输入需要在微信中打开的网址链接。
②:点击生成按钮,生成转换后的链接和二维码。
③:复制生成后的链接或者扫一扫二维码即可。
简单的说,就是在微信中做不了的事在浏览器中却可以做,我们就可以把需要打开的链接用工具转换