为了账号安全,请及时绑定邮箱和手机立即绑定

教你一招H5快应用快速回到首页

标签:
Android

使用快应用web组件打包封装成H5快应用后,原网页自身没有提供返回主页的功能,但转成快应用后,希望用户在浏览任一H5页面时,都能有一个回到网页主页的入口。

此需求可以参考如下步骤实现。

  1. 在页面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,
        },
}
  1. 修改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值需要替换为项目中图片实际路径。

  1. 修改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";
},

最终效果:点击界面华为图标即跳转至华为官网。

在这里插入图片描述


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消