Alguns usuários relataram que existem alguns problemas com o desempenho do mapa de chamada de táxi de Meituan. Após investigação e análise, a equipe técnica de chamada de táxi de Meituan adotou um conjunto de estrutura de integração de mapa nativo e Web, que não só percebeu o mecanismo de distribuição inteligente de eventos de gestos do usuário, mas também resolveu o WebView. É difícil colocar na mesma página que o mapa nativo, e o desempenho também é totalmente otimizado. Este artigo resume e compartilha a experiência da tecnologia de fusão.
1. Fundo
O negócio de chamadas de táxi da Meituan fornece portais de serviço no aplicativo Meituan e no aplicativo Review há muito tempo e, tecnicamente, adota a tecnologia de desenvolvimento híbrido de H5 e Native. Com o lançamento do negócio, alguns usuários relataram que o desempenho do nosso mapa tem alguns problemas. A razão é que usamos a versão web do mapa para mapas de táxi (via API JavaScript do Tencent Maps), e produtos semelhantes na indústria usam o Native versão do mapa SDK, mapa nativo Em comparação com mapas da Web, tem vantagens naturais de desempenho, portanto, há uma certa lacuna entre o carregamento do mapa de táxi Meituan do primeiro mapa de tela para a experiência de operação do mapa subsequente.
Problemas e desafios
A fim de melhorar a experiência do mapa do negócio de caronas, a solução que pensamos foi usar mapas nativos na parte de exibição do mapa e usar a página H5 para exibir a parte que não é do mapa, que pode preencher a lacuna no mapa de desempenho com produtos concorrentes e dar jogo completo ao H5. Eficiência de desenvolvimento.
À primeira vista, esta solução parece ser um desenvolvimento Híbrido tradicional, sem qualquer dificuldade ou novidade. Por exemplo, o mapa é implementado usando o mapa SDK pré-integrado no aplicativo, e a interação entre o H5 e o Native usa a tecnologia JSBridge madura da indústria. Mas da perspectiva do negócio de táxi, porque muitas entradas funcionais do negócio de táxi precisam flutuar no mapa, como cartão de início e destino, entrada do centro do usuário, etc., esta função flutuante não é fácil de realizar tecnicamente e os usuários devem tocar Quando as ações ocorrem em elementos flutuantes e no mapa, elas são distribuídas para seus respectivos sistemas de eventos.A tecnologia híbrida não tem experiência para aprender a esse respeito.
Com esses desafios, conduzimos uma série de tentativas e experimentos e, finalmente, resolvemos o problema e encapsulamos a estrutura de chamadas do mapa de nosso negócio de táxi, que chamamos de Native Map e Web Fusion Framework (doravante denominado Fusion Framework). Nesse processo, somamos algumas experiências, na esperança de trazer alguma ajuda aos alunos engajados em pesquisas relacionadas.
2. Pesquisa
Com base no sistema de desenvolvimento de tecnologia híbrida, estudamos os cenários de aplicação da maioria das páginas H5 e mapas nativos do mercado, que são divididos principalmente nas duas categorias a seguir:
-
A página H5 e o mapa nativo são duas páginas separadas: Quando a lógica de negócios H5 usa o mapa, uma nova página de mapa é aberta por meio da tecnologia interativa. Na nova página, o mapa nativo chama o componente de mapa correspondente de acordo com os parâmetros de entrada para completar a função de negócios. Mostrar.
-
A página H5 e o mapa nativo estão na mesma página: os dois dividem a tela em duas partes, conforme mostrado na figura a seguir: o mapa nativo está na metade superior e a página WebView H5 está na metade inferior.
Após a análise, descobrimos que nenhuma dessas duas formas pode atender às necessidades do cenário de negócios de carona, porque o cenário de negócios de carona atualmente no mercado consiste em 4 peças, conforme mostrado na figura a seguir:
-
Iniciar e terminar o painel de seleção : ocupe a metade inferior da página, você pode deslizar para cima e para baixo para revelar mais conteúdo.
-
Parte do mapa : a parte superior da página exibe informações dos elementos do mapa, como pontos de partida e chegada e rotas.
-
Menu Mais : o ícone no canto superior esquerdo, clique para pular para a página do menu de funções H5.
-
Entrada de publicidade : o ícone no canto superior direito, clique para pular para a página de operação H5.
Na primeira categoria acima, a página H5 e o mapa nativo estão localizados em duas páginas separadas, que só podem atender às necessidades de algumas cenas de mapa, e não podem ser dispostos de forma que o H5 e o mapa na imagem acima sejam exibido no mesmo quadro.
Na segunda categoria acima, vários WebViews são necessários para implementar esse layout, que tem as seguintes desvantagens:
-
O WebView inferior e o mapa nativo superior são componentes de nível plano, cada um ocupando metade da tela e não há relação de sobreposição entre eles. É difícil obter o efeito de deslizar para cima e para baixo nos painéis inicial e final.
-
Para mais menus nos cantos superior esquerdo e superior direito, dois novos componentes WebView precisam ser adicionados à posição da entrada de publicidade para serem sobrepostos no mapa. O componente WebView carrega a página H5 correspondente para obter o layout acima. passo é complicado.
-
Para o layout de página composto de vários componentes do WebView, como o espaço da memória não é compartilhado, é difícil sincronizar as informações entre eles. Muitos componentes do WebView também são um desperdício de desempenho do sistema.
A conclusão da pesquisa é que nenhuma das tecnologias existentes no mercado pode atender às necessidades da cena de chamada de táxi.
Proposta de um novo plano
Com base na particularidade da cena de chamada de táxi, fizemos uma suposição ousada: divida a página em 2 camadas, a camada inferior é a camada do mapa nativo, cobrindo a tela; a camada superior é a camada WebView, que cobre completamente o nativo camada do mapa, conforme mostrado abaixo:
O efeito desejado é:
-
Quando o elemento H5 é clicado, o evento click será despachado para o contêiner H5 WebView para processamento.
-
Quando a área do mapa é clicada, o evento de clique é enviado ao componente de mapa nativo para processamento.
-
A interação de informações entre o H5 e o mapa nativo pode ser realizada usando a tecnologia JSBridge madura.
As idéias de implementação específicas são as seguintes, consulte a seguinte figura:
-
O mapa nativo está localizado na camada inferior, o WebView é colocado no mapa nativo, o fundo do WebView é transparente e o mapa abaixo pode ser visto por meio do WebView. A área da caixa vermelha é o elemento da página H5 aberto pelo WebView superior.
-
Adicione uma camada de distribuição de mensagem de gesto, que determinará de forma inteligente se o evento de gesto cai no elemento H5 ou no elemento do mapa. Exemplo: Clique na área da caixa vermelha, a mensagem será passada para o processamento lógico H5 da camada WebView, clique na área fora da caixa vermelha, a mensagem será passada para a camada do mapa nativo para processamento (movimento do mapa, zoom, etc. .).
-
A interação entre o H5 e o mapa nativo é feita usando JSBridge. Por exemplo, se você adicionar um marcador ao mapa, a lógica de negócios da camada H5 enviará uma mensagem para adicionar o marcador, a camada H5 enviará a mensagem para a camada do mapa nativo através da tecnologia JSBridge e o mapa nativo adicionará o elemento Marker para o mapa depois de receber a mensagem.
Para verificar se a ideia está correta, primeiro desenvolvemos um Demo através da plataforma Android para verificar se essa mensagem hierárquica inteligente é viável. A maior vantagem dessa solução é que leva em consideração a eficiência de desenvolvimento do H5 e do alto recursos de desempenho de mapas nativos, que são muito consistentes As necessidades do cenário de mapas de negócios da Meituan. Para tornar a ideia mais padronizada e mais sistemática, realizamos o seguinte design de moldura.
3. Design da moldura
3.1 Introdução aos dados de zona quente
Primeiro introduza o conceito de "dados de zona quente", a figura a seguir (seção 3.2) tem uma parte de dados de zona quente de distribuição de mensagem na camada de distribuição de gesto, que é referida como dados de zona quente abaixo. Os dados de zona ativa são um conceito para o WebView superior, válido apenas para a camada WebView e inválido para a camada de mapa nativo inferior. Se o usuário clicar no evento de tela e desejar que o H5 capture e processe, você pode definir uma área retangular lógica na área da tela, como: [0, 0, 50, 50] (canto superior esquerdo da figura acima) , esses dados são chamados de dados distritais quentes.
Escrevemos a lógica do código para controlar a estratégia de distribuição da mensagem de gesto. Se a mensagem de gesto ocorre dentro do retângulo de dados da zona ativa, enviamos a mensagem para WebView para processamento, caso contrário, ele a envia para o mapa nativo para processamento. Conforme mostrado na figura acima, você pode definir várias zonas ativas na mesma tela, [0, 0, 50, 50], [430, 0, 50, 50], [0, 200, 480, 200], O formato pode ser definido por você. O formato de coordenada de pixel usado aqui é baseado na origem do canto superior esquerdo do componente WebView: [esquerda, topo, largura, altura].
3.2 Introdução ao diagrama de quadro
Mensagens de gestos são distribuídas para o processo da camada WebView
Principalmente o processo de 1 -> 2 -> 3 -> 4 na figura acima, como segue:
-
A ação de toque do usuário é capturada primeiro pela camada de distribuição de gestos. A camada de distribuição de gestos julga que o usuário clica no intervalo de dados da zona ativa e distribui a mensagem para a camada WebView H5 para processamento.
-
A camada WebView H5 recebe a mensagem, processa a mensagem (por exemplo, adicionando um marcador de extremidade ao mapa) e transmite a mensagem para a camada de mapa nativo por meio da ponte de comunicação.
-
A camada de mapa nativo recebe a mensagem, executa a operação Adicionar marcador e retorna uma mensagem de sucesso após a conclusão. O processo geral acima é: camada de distribuição de gestos -> 1 -> 2 -> 3 -> 6 -> 7.
O processo de distribuição de mensagens de gesto para a camada do mapa nativo
Principalmente o processo de 5 -> 6-> 7 na figura acima, da seguinte forma:
-
A camada de distribuição de gestos captura a mensagem e descobre que o gesto do usuário não se sobrepõe ao retângulo de dados da zona ativa atual, de modo que distribui a mensagem adquirida para a camada do mapa nativo.
-
Se a mensagem for uma operação de arrastar, o Native Map reconhece automaticamente a mensagem do mapa de arrastar para obter o efeito de mover o mapa. O processo envolvido é: camada de distribuição de gestos -> 5.
-
Se a mensagem for uma operação de clique, por exemplo, queremos implementar a função de clicar no Marcador no mapa e passar a mensagem para H5 para processamento. As etapas de implementação são que adicionamos um evento de clique antes de adicionar o marcador (implementado pela camada do mapa nativo). Quando o marcador é clicado, a camada do mapa nativo despacha este evento. A mensagem do evento será transmitida da camada do mapa nativo para a camada H5 por meio da tecnologia JSBridge e, finalmente, a camada H5. Receba a mensagem de clique. Todo o processo de operação é: camada de distribuição de gestos -> 5 -> 6 -> 7.
Estratégia de atualização dinâmica de dados de zona quente
Como a altura do painel na parte inferior do negócio de saudação é escalável, os dados da zona quente na parte inferior não são estáticos. É necessário considerar que os dados da zona quente devem ser ajustados de forma síncrona com o alongamento do elemento DOM . Você pode monitorar as alterações de DOM na camada WebView H5. Quando o elemento DOM muda, a posição e o tamanho do elemento DOM após a alteração são obtidos, formatados como dados de zona ativa e atualizados para a parte de dados de zona ativa de distribuição de mensagem. Como a ação de alongamento é um efeito de animação contínuo, para ser eficiente, atualizamos apenas os dados da zona quente no final da animação e não tratamos do período de transição intermediário. O processo geral é: 2 -> 3 -> 4.
4. Comente sobre a prática de pouso no aplicativo
4.1 Código-chave da camada de distribuição de gestos
Esta parte da função precisa ser implementada por alunos nativos, incluindo iOS e Android. As duas extremidades, respectivamente, configuram três camadas de conteúdo ao iniciar o aplicativo. A camada superior é a camada de recebimento do evento de toque de gesto, a camada do meio é a camada WebView (o fundo é definido como transparente) e a camada inferior é o mapa nativo camada (como Tencent Map SDK). Use uma matriz para registrar os dados da zona quente atual. Quando ocorre um evento na camada de distribuição de gestos, as informações da posição do dedo são obtidas por meio do evento Touch e a matriz da zona quente é percorrida para determinar se a posição do dedo cruza o retângulo da zona quente Se isso acontecer, a mensagem será distribuída para a camada WebView. Caso contrário, ela será distribuída para a camada Nativa. Abaixo está o código-chave para distribuição de mensagens Android e iOS:
Código-chave da camada de distribuição do Android
@Override
public boolean dispatchTouchEvent(MotionEvent event){
if(event.getAction() == MotionEvent.ACTION_DOWN) {
// 分发层接收到手势触摸消息，通过dispatchService类判断手势是否落在热区内，从而确定消息分发的对象
this.touchHandler = dispatchService.inRegion(event) ? TouchHandler.WebView : TouchHandler.MapView;
}
// 分发给Native地图层
if(this.touchHandler == TouchHandler.MapView) {
return this.mapView.dispatchTouchEvent(event);
}
// 分发给WebView H5层
return super.dispatchTouchEvent(event);
}
Código-chave da camada de distribuição do iOS
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
UIView *hitTestView = nil;
// 分发层接收到手势触摸消息，通过pointInHotspot判断手势是否落在热区内，从而确定消息分发的对象
if ([self pointInHotspot:point]) {
// 分发给WebView H5层
hitTestView = [self.WebView hitTest:point withEvent:event];
}else{
// 分发给Native地图层
hitTestView = [self.mapView hitTest:point withEvent:event];
}
return hitTestView;
}
4.2 Camada WebView H5
Esta camada tem 2 funções:
-
Fornece a interface JS setHotRegion para definir a zona ativa e a empresa pode definir a zona ativa na tela por meio dessa interface.
-
Encapsule uma camada de interface de mapa em formato JS para fornecer serviços de mapa para negócios de camada superior. Esta camada usa ponte de comunicação JSBridge para realizar comunicação assíncrona entre H5 e camada nativa.
4.3 Introdução à ponte de comunicação
A ponte de comunicação é a tecnologia JSBridge, que realiza principalmente a interação de informações entre H5 e Native. A tecnologia nesta área é relativamente madura. Existem muitas implementações JSBridge na indústria e os princípios são semelhantes. Os mais comuns são: injeção de objetos nativos na camada H5, tecnologia de interceptação de URL, chamadas nativas JS comumente usadas função interna stringByEvaluatingJavaScriptFromString e assim por diante. Meituan tem uma estrutura KNB relativamente madura, portanto, a estrutura KNB é usada diretamente no projeto.
4.4 Camada de mapa nativo
Esta camada é encapsulada com base no SDK do mapa (como Tencent Map SDK) e fornece algumas interfaces amigáveis para serviços de táxi, como operações básicas de mapa, adição de marcadores para pontos de partida e chegada de táxi, animação do carro do motorista, eventos de mapa e várias janelas pop-up de informações do marcador etc.
4.5 Tecnologia de manutenção automática de dados de zona quente do elemento Dom
A pilha de tecnologia front-end do negócio de chamada de táxi é: um sistema de uma página desenvolvido por Vue + VueX + Vue-Router. Conforme mostrado na figura abaixo, há muitos elementos H5 na página que precisam adicionar zonas ativas. Seria complicado escrever códigos um por um para adicioná-los. Além disso, quando a posição e o tamanho dos elementos da página mudam, o os dados da zona quente precisam ser atualizados de forma síncrona. Aqui, usamos a Diretiva Vue (instrução) para resolver este problema.
As 2 imagens acima, à esquerda e à direita, são os diferentes estados da exibição da página durante a operação do usuário. É óbvio que o cartão na parte inferior da imagem direita tornou-se mais alto e os dados da zona quente correspondente precisam ser atualizados simultaneamente quando o cartão mudanças. A tecnologia diretiva pode facilmente resolver este problema. O princípio é o seguinte:
-
Ao adicionar um elemento, a função de gancho de ligação da instrução Vue é acionada. Neste momento, o tamanho e a posição do elemento pop-up são calculados: use a função getBoundingClientRect para obter a esquerda, topo, largura, altura e outras informações do elemento e adicione a nova atualização de dados da zona de acesso à camada de distribuição de gestos por meio da função setHotRegion.
-
Quando o elemento é removido, a função de desvinculação do gancho é acionada e os dados da zona quente são removidos neste momento, de modo que a função de adição e exclusão automática da zona quente é realizada.
-
A tecnologia de instrução é muito simples e conveniente. Depois de escrever a lógica da instrução, registre-a no global e defina um tag v-hotRegion no elemento que precisa atualizar dinamicamente a zona quente.
4.6 Ferramentas de depuração e teste
A ferramenta de depuração pode usar um simulador ou uma máquina real.O simulador que usamos durante o desenvolvimento é desenvolvido e QA usa verificação de máquina real durante os testes. Durante o processo de depuração, duas funções são verificadas principalmente, a saber, a verificação da zona quente e a verificação da interface do mapa.
Verificação de ponto quente
Verifique principalmente se a zona ativa definida na página principal está correta, incluindo se ela pode ser clicada, se o cartão inferior pode ser arrastado normalmente, se a função de negócios está normal, etc. Como os dados da zona quente são uma série de números, na forma: [0, 0, 50, 50], é impossível julgar visualmente se os dados estão errados, então desenvolvemos uma ferramenta de visualização que usa retângulos vermelhos para definir o elementos da zona quente Realce-o, conforme mostrado na figura abaixo, para que você possa diagnosticar rapidamente se os dados da zona quente são anormais. A ferramenta é implementada usando a tela Canvas. O tamanho da tela se sobrepõe completamente ao tamanho da tela. Com a ajuda da tela, os dados retangulares da zona quente podem ser desenhados na tela em tempo real.
Verificação da interface do mapa
A tarefa principal é escrever testes de unidade. Este projeto encapsula mais de 50 interfaces de mapa. Para cada interface, escreva um único caso de teste para observar parâmetros de entrada, parâmetros de saída, resultados de saída do console e se o efeito de exibição do mapa está correto. O teste é feito principalmente no simulador iOS, que é conveniente para imprimir algumas informações de depuração no console para diagnóstico.
5. Efeito online
Depois que a estrutura foi lançada no aplicativo Dianping, a experiência do mapa foi significativamente melhorada, o que se reflete principalmente nos seguintes aspectos:
-
A experiência de operação do mapa, como movimento e zoom do mapa, é significativamente melhor do que o mapa H5. Os usuários usam o mapa nativo para selecionar o ponto de partida e destino, fazer um pedido e chamar um carro, e o efeito de animação de pegar e dirigir o carro é mais suave.
-
Os indicadores de dados do mapa da primeira tela também foram significativamente melhorados, conforme mostrado na tabela a seguir:
-
No momento, a operação online é estável. Durante os primeiros dois meses de lançamento, o número de falhas foi de um dígito e a taxa de falhas foi muito inferior a 0,1 ‰.
-
Depois que o framework é lançado, as iterações de negócios no aplicativo Dianping podem ser lançadas de acordo com o ritmo H5 para alcançar a eficiência de desenvolvimento de lançamento a qualquer momento.
A interface de código de camada de mapa nativa é estável e rica em funções, o que basicamente atende às necessidades de negócios de cenários de mapa. Você só precisa seguir a versão pela primeira vez e só precisa iterar a lógica de negócios do H5.
6. Resumo deste artigo
Este artigo sobrepõe os componentes do WebView e do mapa nativo, percebe o mecanismo de distribuição inteligente de eventos de gesto do usuário e resolve o problema de layout difícil do WebView e do mapa nativo na mesma página. Este mecanismo de integração fornece uma maneira eficaz para o negócio de carona melhorar a eficiência iterativa, garantindo a experiência do mapa. As funções diárias de negócios são lançadas usando a iteração da tecnologia H5. O mapa nativo é instalado no celular do usuário como um recurso básico que não é atualizado com frequência quando é lançado pela primeira vez.A capacidade de atender às necessidades de negócios para lançar a qualquer momento não é mais restrita pelas principais lojas de aplicativos e os usuários têm uma experiência mais tranquila de operar mapas. A estrutura de fusão é adequada para os seguintes cenários de negócios:
-
A função de mapa é usada no negócio e no negócio com requisitos mais elevados, como carregamento de mapa e experiência operacional.
-
O negócio pertence ao negócio Híbrido, e a página H5 e o mapa estão dispostos na mesma página.
-
Se sua empresa é um sistema baseado em vários WebViews e mapas nativos, é altamente recomendável que você leia este artigo.
7. Sobre o autor
Terminal R&D Center of Meituan Taxi Technology Department, Jia Peng, Zhang Bin, Yang Rui, Qiu Bo, Haifeng, etc.
---------- FIM ----------
Ofertas de trabalho
O Terminal R&D Center do Meituan Taxi Technology Department convida engenheiros seniores de desenvolvimento front-end, especialistas em desenvolvimento front-end, engenheiros sênior de iOS e engenheiros seniores do Android. Oferecemos serviços de táxi de alta qualidade aos usuários do Meituan Dianping, o que é uma parte importante da vida local, comendo, bebendo e brincando. Bem-vindos todos os amigos para se juntar a nós para criar os produtos de viagem mais recentes Os alunos interessados podem enviar seus currículos para: [email protected] (especifique o assunto do e-mail: Meituan Taxi).
Talvez você ainda queira assistir
| A prática do React Native no cliente de comida para viagem Meituan
| Exploração da ferramenta de inspeção estática TSLint no projeto React Native
| Biblioteca de componentes nativos do React de código aberto beeshell 2.0 lançada