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

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

HarmonyOS
2024-03-17 17:50:21
浏览
收藏 0
回答 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>
分享
微博
QQ
微信
回复
2024-03-18 21:30:53
相关问题
H5页面如何与ArkTS交互
507浏览 • 1回复 待解决
如何实现H5自定义事件
311浏览 • 1回复 待解决
Web能直接加载h5代码吗?
1154浏览 • 2回复 待解决
webview加载Vue h5失败
15526浏览 • 5回复 待解决
如何加载字符串形式H5数据
201浏览 • 1回复 待解决
FA里内嵌H5是怎么保持登录状态?
5110浏览 • 1回复 待解决
鸿蒙-如何打开跳转WLAN设置页面
7994浏览 • 1回复 待解决
鸿蒙-如何打开跳转GPS设置页面
15275浏览 • 1回复 待解决
页面导航如何实现两个页面叠层
247浏览 • 1回复 待解决
JS API web组件 怎么使用
3474浏览 • 1回复 待解决