全国服务热线:4008-888-888

技术知识

浅谈Html5网页页面开启app的1些思索

1. 要求

前段時间开发设计新项目,遇到了1个要求,简易来讲,便是大家H5的网页页面有1个“在App中开启”的按钮,客户点一下后,假如客户早已安裝app,则立即开启app,假如客户沒有安裝app,那就自动跳转到免费下载app的网页页面

最先,在我的认知能力中,H5应当是沒有工作能力检验到某1款app是不是有安裝的(假如有小伙子伴了解怎样检验,欢迎评价区告知我,谢谢!),因此大家必须1些技能来进行分辨app是不是安裝这1全过程。

以后的流程以安卓系统手机上为事例详细介绍,现阶段ios9版本号以后的系统软件不必须大家H5做这些分辨app是不是安裝的步骤(ios9以后能够根据出示1个通用性连接(Universal link),保证沒有安裝app提醒开启iPhone运用商城,安裝了app则立即自动跳转开启)

2. 有关scheme协议书

scheme协议书是1种网页页面内自动跳转协议书,大家能够根据订制scheme协议书,自动跳转到app中的要想自动跳转的各个网页页面。scheme协议书是根据url的方式开展自动跳转的,因此大家H5还可以根据这个url去自动跳转到app内特定网页页面,这便是H5开启app的基本原理。

scheme的url文件格式相近: [scheme]://[host]/[path]?[query]

3. H5完成在App中开启的两种方式

3.1 单纯性应用定时执行器分辨

这类的方式的思路是,最先把大家要自动跳转的详细地址设定为与原生态App同学1起界定好的scheme的url,以后,设定1个定时执行器,定时执行器里实行的逻辑性是自动跳转到免费下载app网页页面,这样,假如客户手机上沒有安裝app,就会在1段時间后自动跳转到免费下载网页页面。

关键编码以下:(可使用iframe进行自动跳转,但必须考虑到iframe是不是在ios等机器设备中被容许)

const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const wait = 500
try {
    location = schemeUrl
    setTimeout(() => {
        location = downloadUrl
    }, wait)
} catch (e) {
    console.error(e)
}

存在的难题

上述完成计划方案的难题是,即便取得成功自动跳转到App,本来的H5网页页面也会在定时执行時间后,自动跳转到免费下载网页页面,这样体验很不太好

3.2 应用window的hidden特性分辨

这个方式的思路是,假如取得成功勾起了app,大家的H5网页页面被置于后台管理,window.hidden特性会变成true,能够根据这个特性转变来分辨app有木有开启,没开启就自动跳转到免费下载网页页面,自然这里也用到定时执行器

关键编码以下:

function checkOutApp() {
    const schemeUrl = 'xxx'
    const downloadUrl = 'XXX'
    const wait = 1000
    // 是不是进到后台管理
    const hidden = false
    location = schemeUrl
    // 假如1定时执行间内,网页页面沒有掩藏,则自动跳转到免费下载页
    setTimeout(() => {
        if (!hidden) {
            location = downloadUrl
        }
    }, wait)
    // 网页页面可见性转变恶性事件
    document.addEventListener("visibilitychange", function(){
        if (document.hidden) {
            hidden = true
        }
    });
}

存在的难题

现阶段1些安卓系统访问器,在app存在时,会最先跳出来1个确定框,了解客户是不是开启app,仅有客户愿意时,才会自动跳转app,假如客户自始至终沒有点一下确定,最终還是会跳到免费下载网页页面,体验不太好

4. 1些思索

鉴于上面说到的1些难题,本人感觉能够在互动中提升1个“去免费下载网页页面”的互动,假如客户沒有安裝app,1定时执行间后,最先提醒客户“是不是沒有安裝app,点一下去免费下载”相近的按钮,客户点一下自动跳转到免费下载网页页面,这样会不容易更好呢。

到此这篇有关浅谈Html5网页页面开启app的1些思索的文章内容就详细介绍到这了,更多有关Html5开启app內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服