H5通过url scheme拉起对应应用

三方应用使用过程中,可能会在应用或浏览器的H5页面中需要跳转到其它应用,本文档提供了H5跳转页面的方法

如果在应用中则使用startAbility打开deepLink拉起对应应用,如果在H5页面中拉起其它应用,则绑定点击事件,点击按钮后调用window.open(deepLink)进行跳转。

HarmonyOS
2024-07-24 10:23:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
五行缺踹

在H5页面中,通过deepLink拉起已安装应用,或拉起应用市场下载未安装应用,关键步骤如下:

1. 通过onLoadIntercept拦截前端H5请求,进行url判断。

2. 使用bundleManager.canOpenLink检测是否可以打开相关应用。

3. 已安装应用则拉起。

4. 未安装应用跳转应用市场进行下载。

相关配置:

在拉起方的module.json5文件中配置querySchemes字段,表示本应用可能会用到的scheme查询。

"module": { 
  "querySchemes": [ 
  "hwtips", 
  ], 
}

2. 在被拉起方的module.json文件中的skill字段中配置该应用支持的scheme协议,表示这个应用可以通过此协议打开,例如玩机技巧应用想被成功拉起则需要玩机技巧应用在工程的model.json5文件中配置abilities的skills中配置scheme。

"abilities": [ 
{ 
  "skills": [ 
  { 
    "actions": [ 
    "ohos.want.action.viewData" 
    ], 
    "uris": [ 
    { 
      "scheme": "hwtips" 
    } 
    ] 
  } 
  ] 
} 
]

3.以在H5页面拉起玩机技巧为例,玩机技巧网页需要给自己的应用拉活,因此在网页中添加按钮引导用户拉起玩机技巧应用。网页端显示打开玩机技巧应用按钮,此按钮绑定点击事件,并执行window.open('hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx'),用户点击按钮后,web端收到的url为'hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx',点击该按钮,打开网页web端收到的url为'hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx'。

<!DOCTYPE html> 
<html> 
<body> 
<div> 
    <button type="button" onclick="goToLink()">拉起应用</button> 
</div> 
</body> 
</html> 
<script> 
    function goToLink() { 
         window.open('hwtips://com.huawei.hmos.tips.app?id=xxx&funNum=xxx&type=xxx') 
    } 
</script>

url解释

1. hwtips:// 是玩机技巧APP的协议头,表示这是一个玩机技巧APP的链接。

2. com.huawei.hmos.tips.app 是玩机技巧APP的主域名,表示这个链接是由玩机技巧APP生成的。

3. funNum=xxx&type=xxx是链接的参数,表示要跳转到的具体页面。xxx是一个代表具体页面的字符串,可以是详情页、咨询页等。

4. id=xxx是应该上架应用市场才有的标识id,通过此id可以跳转到对应app下载页面。

5. 查询AppId参考:如何查询AppId

核心代码

1.使用webView onLoadIntercept拦截前端请求,目的是获取拉起应用的url,也可以使用应用侧与前端交互方法获取url,例如javaScriptProxy

Web({ src: $rawfile('wanjijiqiao.html'), controller: this.controller }) 
  .onLoadIntercept((event) => { 
    if (event) { 
      let url: string = event.data.getRequestUrl(); 
    })

2. 使用bundleManager.canOpenLink检测是否可以打开相关应用,可以打开则拉起应用。

let canOpen = bundleManager.canOpenLink('xxx'); 
if (canOpen) { 
  const want: Want = { 
    uri: 'xxx' 
  } 
  const context = getContext(this) as common.UIAbilityContext; 
  context.startAbility(want).then(() => { 
    //拉起成功 
  }).catch((error: BusinessError) => { 
    console.log('error code:' + error.code + ', message:' + error.message); 
  }) 
}

3. 未安装,不可打开则跳转应用市场进行下载。

promptAction.showDialog({ 
  title: `提示`, 
  message: '应用未下载前去应用市场', 
  buttons: [{ 
    text: '确定', 
    color: '#41464b', 
  }] 
}, 
  (err, data) => { 
    if (err) { 
      console.info('showDialog err: ' + err); 
      return; 
    } 
    // 应用未安装,拉起应用市场 
    const want: Want = { 
      uri: `store://appgallery.huawei.com/app/detail?id=C1229502635594278976` 
    } 
    const context = getContext(this) as common.UIAbilityContext; 
    context.startAbility(want).then(() => { 
      // 拉起成功 
    }) 
  } 
);

常见问题

1. 跳转Want的有哪些参数可以配置?

Want跳转配置的参数参考链接:Want参数配置

2. Web会对deeplink链接做任何解析或处理吗?

Web不会对deeplink链接做任何解析或处理,只会原封不动的传递给拉起的应用。因此第三方应用只需要自己的网页端和应用端协商好url规则,自己去做解析打开对应页面即可。

分享
微博
QQ
微信
回复
2024-07-24 20:30:58
相关问题
HarmonyOS web组件加载h5h5拉起摄像头
355浏览 • 1回复 待解决
HarmonyOS ArkTS主动与H5信方式是什么
322浏览 • 0回复 待解决
HarmonyOS H5应用侧数据交互
75浏览 • 1回复 待解决
HarmonyOS H5拉起系统相机的样例代码
26浏览 • 1回复 待解决
HarmonyOS H5应用侧数据交互的Demo
326浏览 • 1回复 待解决
HarmonyOS 在H5中如何跳转到应用市场
441浏览 • 1回复 待解决
HarmonyOS web与H5交互
418浏览 • 1回复 待解决
webview加载Vue h5失败
17524浏览 • 5回复 待解决
Web中webview和H5交互
891浏览 • 1回复 待解决
HarmonyOS 浏览器不能通过scheme拉起app
271浏览 • 1回复 待解决
HarmonyOS H5的JS端调用应用端的新问题
286浏览 • 0回复 待解决
HarmonyOS webview h5的localstorage
243浏览 • 1回复 待解决
如何实现H5自定义事件
2123浏览 • 1回复 待解决
HarmonyOS web原生和H5如何交互?
348浏览 • 1回复 待解决
h5如何在鸿蒙设备进行调试
1364浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人