使用快應用web元件打包封裝成H5快應用後，原網頁自身沒有提供返回主頁的功能，但轉成快應用後，希望使用者在瀏覽任一H5頁面時，都能有一個回到網頁主頁的入口。

此需求可以參考如下步驟實現。

1. 在頁面script中data下定義變數loadUrl，這個變數用於儲存H5網頁的url，本示例demo中以華為官網作為主頁入口。

```java
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. 修改template程式碼。

- template中web的src屬性值繫結步驟1定義的變數loadUrl。

- 監聽web元件的頁面開始載入事件pagestart，即程式碼中的onpagestart。

- 新增“回到主頁”的入口布局，以產品設計為主。本示例demo使用image為例。

具體示例程式碼如下，修改點參考紅色加粗部分：

```java
<template>
  <div class="doc-page">
    <image class="img" src="http://blog.itpub.net/Common/main.png" onclick="goMain"></image>
        <web class="web-page" src="http://blog.itpub.net/69970551/viewspace-2733600/%7B%7BloadUrl%7D%7D" trustedurl="{{list}}" onpagestart="onPageStart" onpagefinish="onPageFinish" onmessage="onMessage" ontitlereceive="onTitleReceive" onerror="onError" id="web" supportzoom="{{supportZoom}}" wideviewport="{{wideViewport}}}" overviewmodeinload="{{overViewModeLoad}}" useragent="{{userAgent}}" image="" web="" console.info="" e.url="" this.loadurl="e.url;" gomain="" gomain:="" function="" console.log="" :="">
                        </web></div>
                                        <p style="clear:both;"></p>
                    <p class="translate">
                                                    來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69970551/viewspace-2733600/，如需轉載，請註明出處，否則將追究法律責任。
                                            </p>

</template>

教你一招H5快應用快速回到首頁

相關文章