在Web组件的H5页面中，如何使用a标签实现打开各种页面

HarmonyOS

zxjiu

2024-03-17 17:50:21

浏览

回答 1

待解决

回答 1

按赞同

按时间

wingcky

情况一：跳转本应用的ArkTS页面

实现逻辑为，使用Web组件的onLoadIntercept来监测Web组件加载url,然后通过回调结果做判断是否为跳转本地ArkTS页面，如果是，使用router做跳转。

参数可以通过获取url然后做字符串操作获取。

原生页面一：

import { webview } from '@kit.ArkWeb' 
import { router } from '@kit.ArkUI'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
  build() { 
    Column() { 
      Column() { 
        Web({ src: $rawfile('hello.html'), controller: this.controller }) 
          .onLoadIntercept((event) => { 
            if(event){ 
              let url = event.data.getRequestUrl(); 
              console.log(url); 
              if(url.indexOf('native://') === 0){ 
                router.pushUrl({ url : url.substring(9)}) 
                return true; 
              } 
            } 
            return false; 
          }) 
          .width('100%') 
          .height('100%') 
      } 
      .layoutWeight(1) 
    } 
  } 
}

原生页面二：

@Entry 
@Component 
struct Second { 
  build() { 
    Column() { 
      Text('这是本应用的第二个页面') 
    } 
  } 
}

H5侧

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no" /> 
    <title>Document</title> 
</head> 
<body> 
<div id="bg"> 
   hello world!<br> 
   <a href="native://pages/Second">跳转至本应用第二个arkts页面</a> 
</div> 
</body> 
</html>

情况二：跳转本应用的H5页面

实现逻辑为，使用相对路径定位第二个H5页面即可。

H5侧页面一：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no" /> 
    <title>Document</title> 
</head> 
<body> 
<div id="bg"> 
   hello world!<br> 
    <a href="Second.html">跳转至本应用第二个H5页面</a> 
</div> 
</body> 
</html>

H5侧页面二：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no" /> 
    <title>Document</title> 
</head> 
<body> 
<div id="bg"> 
    hello world 
    <br> 
    <br> 
    我是本应用的第二个H5页面 
</div> 
</body> 
</html>

情况三：跳转至系统应用页面

实现逻辑为，在a标签的url中存储系统应用的url，然后使用startAbility打开系统应用，完成跳转。

原生页面：

import { webview } from '@kit.ArkWeb' 
import { common } from '@kit.AbilityKit'; 
import { Want } from '@kit.AbilityKit'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
function startSettingsInfo(context: common.UIAbilityContext,uri : string): void { 
  let want: Want = { 
    bundleName: 'com.huawei.hmos.settings', 
    abilityName: 'com.huawei.hmos.settings.MainAbility', 
    uri: uri 
  }; 
  context.startAbility(want) 
    .then(() => { 
      // ... 
    }) 
    .catch((err: BusinessError) => { 
      console.error(`Failed to startAbility. Code: ${err.code}, message: ${err.message}`); 
    }); 
} 
@Entry 
@Component 
struct WebComponent { 
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; 
  controller: webview.WebviewController = new webview.WebviewController(); 
  build() { 
    Column() { 
      Column() { 
        Web({ src: $rawfile('hello.html'), controller: this.controller }) 
          .onLoadIntercept((event) => { 
            if(event){ 
              let url = event.data.getRequestUrl(); 
              console.log(url); 
              if(url.indexOf('hmos://') === 0){ 
                startSettingsInfo(this.context,url.substring(7)) 
                return true; 
              } 
            } 
            return false; 
          }) 
          .width('100%') 
          .height('100%') 
      } 
      .layoutWeight(1) 
    } 
  } 
}

H5侧：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no" /> 
    <title>Document</title> 
 
</head> 
<body> 
<div id="bg"> 
   hello world!<br> 
    <a href="hmos://volume_settings">跳转至系统应用（以声音与震动为例）</a> 
</div> 
</body> 
</html>

情况四：跳转至三方应用页面

实现逻辑为，使用Web组件的onLoadIntercept来监测Web组件加载url,然后获取url并判断是否跳转三方应用，然后使用startAbility打开三方应用，完成跳转。

原生页面

import { webview } from '@kit.ArkWeb' 
import { common } from '@kit.AbilityKit'; 
import { Want } from '@kit.AbilityKit'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
  build() { 
    Column() { 
      Column() { 
        Web({ src: $rawfile('hello.html'), controller: this.controller }) 
          .onLoadIntercept((event) => { 
            let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; // UIAbilityContext 
            let want: Want = { 
              deviceId: '', // deviceId为空表示本设备 
              bundleName: '***', // 想要跳转的三方应用的bundleName 
              moduleName: 'entry', // moduleName非必选 
              abilityName: 'EntryAbility', 
              parameters: { 
                // 自定义参数传递页面信息 
                router: 'index' 
              } 
            } 
            context.startAbility(want).then(() => { 
              console.log('success') 
            }).catch((err: BusinessError) => { 
              console.log('error:' + JSON.stringify(err)) 
            }); 
            return false; 
          }) 
      } 
      .layoutWeight(1) 
    } 
 
  } 
}

H5侧：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
</head> 
<body> 
<a  href="">跳转至三方应用</a> 
</body> 
</html>

2024-03-18 21:30:53

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

在Web组件的H5页面中，如何使用a标签实现打开各种页面

订阅鸿蒙技术特刊，精选内容抢先看