Como invocar aplicativo em HTML5

É comum que o h5 evoque essa necessidade nos aplicativos. Em uma era em que o celular é rei, o h5 desempenha um papel importante no desvio de tráfego de aplicativos.

O método de evocação que usamos atualmente é o esquema de URL (suportado pelas plataformas iOS e Android. Você só precisa registrar o esquema durante o desenvolvimento do APP nativo e, quando o usuário clicar nesse link, ele irá automaticamente para o APP).

iframe

 var last = Date.now(), doc = window.document, ifr = doc.createElement('iframe');//Cria um iframe oculto ifr.src = nativeUrl;ifr.style.cssText = 'display:none;border :0;largura:0;altura:0;';doc.body.appendChild(ifr);setTimeout(function() { doc.body.removeChild(ifr); //setTimeout menor que 2.000 geralmente é uma falha de chamada if (Date.now() - last <2000) { if (typeof onFail == 'function') { onFail() } else; { //Avisos pop-up ou processamento de download, etc.} } else { if (typeof onSuccess == 'function') { onSuccess() } }}, 1000);

O princípio de evocação da solução iframe é: quando o programa muda para segundo plano, o cronômetro será atrasado (outra situação em que o cronômetro é impreciso). Se o aplicativo for ativado, a página da Web inevitavelmente entrará em segundo plano. Se o usuário voltar do aplicativo, o tempo geralmente excederá 2s; se o aplicativo não for ativado, a página da Web não entrará em segundo plano. tempo, e o tempo não excederá 2s.

window.location.href salta diretamente

 janela.localização.href=nativoUrl;

uma tag evoca

 <a href=nativeUrl>Revogar aplicativo</a>

Teste de navegador de três cenários de evocação

1. X significa que a excitação falhou, √ significa que a excitação foi bem-sucedida.
2. A marca vermelha indica que será evocado diretamente após entrar na página, e a marca verde indica que será evocado após a operação manual do evento.
3. máquina de teste ios: iphone 6p máquina de teste android: Xiaomi 1s;

iframe evoca resultados de testes de aplicativos

window.location.href evoca resultados de teste de aplicativo

uma tag evoca resultados de testes de aplicativos

iframe e window.location.href evocam contraste

iframe, window.location.href e uma tag evocam uma comparação entre os três

Primeiro, os modelos e navegadores testados são limitados e os resultados acima são apenas para referência.

Comparando a evocação de iframe e location.href, podemos encontrar:

1. Para iOS, location.href jump é mais apropriado, porque esse método pode evocar com sucesso o aplicativo no Safari. Escusado será dizer que a importância do Safari como navegador padrão para iPhone, mas para clientes WeChat e QQ, esses dois métodos no iOS são inúteis==
2. Para Android, quando a página é invocada diretamente, iframe e location.href são iguais, mas se for orientado a eventos, iframe evoca melhor que location.href.
3. Por meio de testes, pode-se descobrir que, para muitos navegadores, o desempenho da evocação direta ao entrar na página e da evocação orientada a eventos é diferente. Simplificando, a evocação direta falha mais.

Através da análise comparativa acima, é mais apropriado usar iframe para Android e window.location.href para iOS.

A diferença entre evocação direta e evocação orientada a eventos ao entrar na página

Existem diferenças óbvias entre esses dois cenários de excitação no Android, seja evocado por iframe ou location.href, tome o cromo do Xiaomi 1s como exemplo:

 <a id=goApp href=javascript:void(0);>Clique em mim para abrir o APP</a>

Os eventos de ligação conduzem manualmente a evocação:

 //window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl; });};

Entre na página para invocar diretamente:

 //Falha na recuperação de window.onload = function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl;};

Evento de ligação, js evoca

 //Falha na recuperação de window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl; }); $('#goApp).trigger('clique');};

Originalmente, pensei que o método $('#goApp).trigger('click'); era o mesmo do clique manual, mas o desempenho real é que o desempenho dos eventos acionados por js é tão inválido quanto o salto direto de página.

Na postagem do blog de referência, podemos ver que a plataforma Android e vários fabricantes de aplicativos são muito diferentes. Por exemplo, o Chrome não suporta mais o acionamento de saltos de esquema por meio de js (cliques de não usuários), configuração de endereços src de iframe, etc. em diante. Portanto, ainda há uma grande diferença entre o acionamento de js e os cliques diretos do usuário, que pode ser semelhante às restrições à reprodução de áudio.

Após os testes e análises acima, foi basicamente determinado que é mais apropriado usar window.location.href para iOS e iframe para Android. Quando usamos iframe para evocar, geralmente tratamos a falha de evocação baixando diretamente. Porém, há um problema aqui, ou seja, o navegador não consegue detectar se a evocação foi bem-sucedida. a evocação for bem-sucedida, o navegador ainda aparecerá. A experiência de download de informações é muito ruim. Claro, também precisamos lidar com algumas funções de retorno de chamada de sucesso ou falha. Talvez nosso cenário só precise ser evocado e não exija download após falha.

Quanto ao uso de location.href para evocar o aplicativo nativo no iPhone, o método de pular para a página intermediária pode ser melhor do que o processamento direto da página atual.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.