홈 페이지로 빠르게 돌아 가기위한 트릭 H5 빠른 응용 프로그램을 가르쳐주세요.

고속 애플리케이션 웹 컴포넌트를 사용하여 H5 고속 애플리케이션으로 패키징하고 패키징 한 후, 원래 웹 페이지 자체는 홈페이지로 돌아가는 기능을 제공하지 않지만, 고속 애플리케이션으로 전환 한 후 사용자가 H5 페이지를 열람 할 때 웹 페이지의 홈페이지로 진입 할 수 있기를 바랍니다. .

이 요구 사항은 다음 단계를 참조하여 달성 할 수 있습니다.

페이지 스크립트의 데이터 아래에 변수 loadUrl을 정의합니다.이 변수는 H5 웹 페이지의 URL을 저장하는 데 사용됩니다.이 데모에서는 Huawei 공식 웹 사이트가 홈페이지 항목으로 사용됩니다.

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,
        },
}

템플릿 코드를 수정합니다.

템플릿에있는 웹의 src 속성 값은 1 단계에서 정의한 변수 loadUrl에 바인딩됩니다.
코드에서 onpagestart 인 웹 구성 요소의 페이지 시작 이벤트 pagestart를 수신하십시오.
제품 디자인에 초점을 맞춘 "홈 페이지로 돌아 가기"항목 레이아웃을 추가합니다. 이 데모에서는 이미지를 예로 사용합니다.

특정 샘플 코드는 다음과 같으며 수정 지점은 빨간색 굵은 부분을 나타냅니다.

<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는 스크립트에 정의되어야합니다.
이미지 구성 요소의 src 값을 프로젝트에있는 그림의 실제 경로로 바꿔야합니다.

스크립트에서 코드를 수정하십시오. 다음 두 코드를 수정해야합니다.
- 웹 구성 요소 페이지가로드되기 시작할 때 이벤트 콜백 메서드 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";
},

최종 효과 : 인터페이스에서 Huawei 아이콘을 클릭하면 Huawei 공식 웹 사이트로 이동합니다.

여기에 사진 설명 삽입

원본 링크 :
https://developer.huawei.com/consumer/cn/forum/topic/0201399568718750123?fid=18
저자 : Drum Chao

홈 페이지로 빠르게 돌아 가기위한 트릭 H5 빠른 응용 프로그램을 가르쳐주세요.

추천