场景描述
三方应用使用过程中,可能会在应用或浏览器的H5页面中需要跳转到其它应用,本文档提供了H5跳转页面的方法
- 如果在应用中则使用startAbility打开deepLink拉起对应应用,如果在H5页面中拉起其它应用,则绑定点击事件,点击按钮后调用window.open(deepLink)进行跳转。
常见场景
在H5页面中,通过deepLink拉起已安装应用,或拉起应用市场下载未安装应用,关键步骤如下:
- 通过onLoadIntercept拦截前端H5请求,进行url判断。
- 使用bundleManager.canOpenLink检测是否可以打开相关应用。
- 已安装应用则拉起。
- 未安装应用跳转应用市场进行下载。
相关配置:
1.在拉起方的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解释
- hwtips:// 是玩机技巧APP的协议头,表示这是一个玩机技巧APP的链接。
- com.huawei.hmos.tips.app 是玩机技巧APP的主域名,表示这个链接是由玩机技巧APP生成的。
- funNum=xxx&type=xxx是链接的参数,表示要跳转到的具体页面。xxx是一个代表具体页面的字符串,可以是详情页、咨询页等。
- id=xxx是应该上架应用市场才有的标识id,通过此id可以跳转到对应app下载页面。
- 查询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规则,自己去做解析打开对应页面即可。