HarmonyOS management page jump and browsing history navigation

Zun Du and Fake Du, are Chengdu programmers also 996?

History navigation

When a user clicks a link in the web page on the front-end page, the web component will automatically open and load the target URL by default. When the front-end page is replaced with a new loading link, the visited web page address will be automatically recorded. You can browse the previous/next history record forward/backward through the forward() and backward() interfaces.

In the example below, clicking the app's button triggers the back action on the front-end page.

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          if (this.webviewController.accessBackward()) {
            this.webviewController.backward();
            return true;
          }
        })
      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
    }
  }
}

If a history record exists, the accessBackward() interface will return true. Likewise, you can use the accessForward() interface to check if there is a forward history. If you don't perform a check, then when the user reaches the end of the history, nothing will be done when the forward() and backward() interfaces are called.

Page jump

When clicking a link on a web page to jump to other pages in the application, this can be achieved by using the onUrlLoadIntercept() interface of the Web component.

In the following example, the application homepage Index.ets loads the front-end page route.html. Clicking the hyperlink on the front-end route.html page will jump to the application's ProfilePage.ets page.

● Apply the index.ets page code on the homepage.

// index.ets
import web_webview from '@ohos.web.webview';
import router from '@ohos.router';
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('route.html'), controller: this.webviewController })
        .onUrlLoadIntercept((event) => {
          let url: string = event.data as string;
          if (url.indexOf('native://') === 0) {
            // 跳转其他界面
            router.pushUrl({ url:url.substring(9) })
            return true;
          }
          return false;
        })
    }
  }
}

● route.html front-end page code.

<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
      <a href="native://pages/ProfilePage">个人中心</a>
   </div>
</body>
</html>

● Jump page ProfilePage.ets code.

@Entry
@Component
struct ProfilePage {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
    }
  }
}

Jump across applications

Web components can jump to other applications by clicking on the hyperlink on the front-end page.

In the example below, clicking the hyperlink in the call.html front-end page jumps to the dialing interface of the phone application.

● Application-side code.

// xxx.ets
import web_webview from '@ohos.web.webview';
import call from '@ohos.telephony.call';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
        .onUrlLoadIntercept((event) => {
          let url: string = event.data as string;
          // 判断链接是否为拨号链接
          if (url.indexOf('tel://') === 0) {
            // 跳转拨号界面
            call.makeCall(url.substring(6), (err) => {
              if (!err) {
                console.info('make call succeeded.');
              } else {
                console.info('make call fail, err is:' + JSON.stringify(err));
              }
            });
            return true;
          }
          return false;
        })
    }
  }
}

● Front-end page call.html code.

<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
    <a href="tel://xxx xxxx xxx">拨打电话</a>
  </div>
</body>
</html>

This article is published by OpenWrite, a blog that publishes multiple articles !