应用快利用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为例。
具体示例代码如下,批改点参考红色加粗局部:
onmessage="onMessage" ontitlereceive="onTitleReceive" οnerrοr="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
作者:鼓楼赵又廷