使用快应用web组件打包封装成H5快应用后，原网页自身没有提供返回主页的功能，但转成快应用后，希望用户在浏览任一H5页面时，都能有一个回到网页主页的入口。
此需求可以参考如下步骤实现。
- 在页面script中data下定义变量loadUrl，这个变量用于存储H5网页的url，本示例demo中以华为官网作为主页入口。
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,
},
}
- 修改template代码。
-
template中web的src属性值绑定步骤1定义的变量loadUrl。
-
监听web组件的页面开始加载事件pagestart，即代码中的onpagestart。
-
添加“回到主页”的入口布局，以产品设计为主。本示例demo使用image为例。
具体示例代码如下，修改点参考红色加粗部分：
<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}}"
【注意事项】
-
以上代码中的事件回调方法goMain和onPageStart均需要在script中定义。
-
Image组件中的src值需要替换为项目中图片实际路径。
- 修改script中的代码。需要修改以下2处代码：
- web组件页面开始加载的事件回调方法onPageStart中将当前页面的url赋值给loadUrl。
onPageStart(e) {
console.info('pagestart: ' + e.url)
this.loadUrl=e.url;
},
- goMain方法中，将首页url赋值给loadUrl。
goMain: function () {
console.log("goMain :");
this.loadUrl = "https://www.huawei.com/en";
},
最终效果：点击界面华为图标即跳转至华为官网。