Teach you a trick H5 quick application to quickly return to the home page

After using the fast application web component to package and package into the H5 fast application, the original web page itself does not provide the function of returning to the homepage, but after converting to the fast application, it is hoped that the user will have an entrance to the homepage of the webpage when browsing any H5 page .

This requirement can be achieved by referring to the following steps.

1. Define the variable loadUrl under the data in the page script. This variable is used to store the url of the H5 webpage. In this demo, the Huawei official website is used as the homepage 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 the template code.

• The src attribute value of the web in the template is bound to the variable loadUrl defined in step 1.

• Listen to the page start event pagestart of the web component, which is the onpagestart in the code.

• Add a "back to home page" entry layout, focusing on product design. This demo uses image as an example.

The specific sample code is as follows, the modification points refer to the red bold part:

<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}}"

【Precautions】

• The event callback methods goMain and onPageStart in the above code need to be defined in the script.

• The src value in the Image component needs to be replaced with the actual path of the picture in the project.

3. Modify the code in the script. Need to modify the following 2 codes:

   • The event callback method onPageStart when the web component page begins to load assigns the url of the current page to loadUrl.

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

• In the goMain method, assign the home page url to loadUrl.

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

Final effect: Click on the Huawei icon on the interface to jump to the Huawei official website.

---

Original link:
https://developer.huawei.com/consumer/cn/forum/topic/0201399568718750123?fid=18
Author: Drum Chao