Te enseñamos un truco de la aplicación rápida H5 para volver rápidamente a la página de inicio

Después de usar el componente web de la aplicación rápida para empaquetar y empaquetar en la aplicación rápida H5, la página web original en sí misma no proporciona la función de regresar a la página de inicio, pero después de convertir a la aplicación rápida, se espera que el usuario tenga una entrada a la página de inicio de la página web cuando navegue por cualquier página de H5. .

Este requisito se puede lograr consultando los siguientes pasos.

1. Defina la variable loadUrl debajo de los datos en el script de la página. Esta variable se usa para almacenar la URL de la página web H5. En esta demostración, el sitio web oficial de Huawei se usa como entrada de la página de inicio.

export default {
        props: ['websrc'],
        data: {
            title: "",
            // TODO Replace the link to the H5 app
            loadUrl: "http://www.huawei.com/en",
            allowThirdPartyCookies: true,
            //Attribute supportzoom, indicates whether the H5 page can be zoomed with gestures.
            supportZoom: true,
            wideViewport: true,
            overViewModeLoad: true,
        },
}

2. Modifique el código de la plantilla.

• El valor del atributo src de la web en la plantilla está vinculado a la variable loadUrl definida en el paso 1.

• Escuche el evento de inicio de página pagestart del componente web, que es el inicio de página en el código.

• Agregue un diseño de entrada de "volver a la página de inicio", centrándose en el diseño del producto. Esta demostración usa la imagen como ejemplo.

El código de muestra específico es el siguiente, los puntos de modificación se refieren a la parte en negrita roja:

<template>
  <div class="doc-page">
    <image class="img" src="/Common/main.png" onclick="goMain"></image>
        <web class="web-page" src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart" onpagefinish="onPageFinish"
            onmessage="onMessage" ontitlereceive="onTitleReceive" onerror="onError" id="web" supportzoom="{{supportZoom}}"
            wideviewport="{{wideViewport}}}" overviewmodeinload="{{overViewModeLoad}}" useragent="{{userAgent}}"

【Precauciones】

• Los métodos de devolución de llamada de eventos goMain y onPageStart en el código anterior deben definirse en el script.

• El valor src en el componente Imagen debe reemplazarse con la ruta real de la imagen en el proyecto.

3. Modifique el código en el script. Necesita modificar los siguientes 2 códigos:

   • En el caso del método de devolución de llamada onPageStart en el que la página del componente web comienza a cargarse, la URL de la página actual se asigna a loadUrl.

onPageStart(e) {
console.info('pagestart: ' + e.url)
this.loadUrl=e.url;
},

• En el método goMain, asigne la URL de la página de inicio a loadUrl.

goMain: function () {
console.log("goMain :");
this.loadUrl = "https://www.huawei.com/en";
},

Efecto final: haga clic en el icono de Huawei en la interfaz para ir al sitio web oficial de Huawei.

---

Enlace original:
https://developer.huawei.com/consumer/cn/forum/topic/0201399568718750123?fid=18
Autor: Drum Chao