android快速开发h5,关于android:教你一招H5快应用快速回到首页

应用快利用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" 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

作者：鼓楼赵又廷