How can I quickly return to the home page of an HTML5 quick app?

After the quick app web component is used to pack an HTML5 app into a quick app, the original web page does not provide the function of returning to the home page. In an HTML5 quick app, users want to have an entry for returning to the home page when browsing any HTML5 page.

To implement this requirement, perform the following steps:

1. Define the loadUrl variable under data in the page script. This variable is used to store the URL of the HTML5 web page. In this demo, the Huawei official website is used as the home page entry.

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. Modify template code.

• Bind the src attribute of web in template to the variable loadUrl defined in step 1.
• Listen to the pagestart event of the web component, that is, onpagestart in the code.
• Add the entry layout of returning to the home page, which needs product design. This demo uses an image as an example.

The sample code is as follows. Pay attention to the text in red to see the modification points.

<template>
  <div class="doc-page">
    <image 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}}"

Precautions:

• The event callback methods goMain and onPageStart in the preceding code must be defined in the script.
• The value of src in the image component must be replaced with the actual image path in the project.

3. Modify the code in the script. The following code needs to be modified:

• In the callback method onPageStart of the web component, assign the value of url (indicating the URL of the current page) to loadUrl.

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

l In the goMain method, assign the home page URL to loadUrl.

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

Then, you can click HUAWEI on the screen to go to the Huawei official website.