共计 1435 个字符，预计需要花费 4 分钟才能阅读完成。
应用快利用 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";
},最终成果：点击界面华为图标即跳转至华为官网。
原文链接：
https://developer.huawei.com/consumer/cn/forum/topic/0201399568718750123?fid=18
作者：鼓楼赵又廷
正文完
