场景描述
三方应用使用过程中,可能会在应用或浏览器的H5页面中需要跳转到其它应用,本文档提供了H5跳转页面的方法
- 如果在应用中则使用startAbility打开deepLink拉起对应应用,如果在H5页面中拉起其它应用,则绑定点击事件,点击按钮后调用window.open(deepLink)进行跳转。
常见场景
在H5页面中,通过deepLink拉起已安装应用,或拉起应用市场下载未安装应用,关键步骤如下:
- 通过onLoadIntercept拦截前端H5请求,进行url判断。
- 使用bundleManager.canOpenLink检测是否可以打开相关应用。
- 已安装应用则拉起。
- 未安装应用跳转应用市场进行下载。
相关配置:
-
在拉起方的module.json5文件中配置querySchemes字段,表示本应用可能会用到的scheme查询。
"module": { "querySchemes": [ "hwtips", ], }
-
在被拉起方的module.json文件中的skill字段中配置该应用支持的scheme协议,表示这个应用可以通过此协议打开,例如玩机技巧应用想被成功拉起则需要玩机技巧应用在工程的model.json5文件中配置abilities的skills中配置scheme。
"abilities": [ { "skills": [ { "actions": [ "ohos.want.action.viewData" ], "uris": [ { "scheme": "hwtips" } ] } ] } ]
-
以在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。
核心代码
-
使用webView onLoadIntercept拦截前端请求,目的是获取拉起应用的url,也可以使用应用侧与前端交互方法获取url,例如javaScriptProxy。
Web({ src: $rawfile('wanjijiqiao.html'), controller: this.controller }) .onLoadIntercept((event) => { if (event) { let url: string = event.data.getRequestUrl(); })
-
使用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); }) }
-
未安装,不可打开则跳转应用市场进行下载。
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(() => { // 拉起成功 }) } );
常见问题
-
跳转Want的有哪些参数可以配置?
Want跳转配置的参数参考链接:Want参数配置。
-
Web会对deeplink链接做任何解析或处理吗?
Web不会对deeplink链接做任何解析或处理,只会原封不动的传递给拉起的应用。因此第三方应用只需要自己的网页端和应用端协商好url规则,自己去做解析打开对应页面即可。
最后
小编在之前的鸿蒙系统扫盲中,有很多朋友给我留言,不同的角度的问了一些问题,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,因为资料太多,太杂,教授的人也多,无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
为了确保高效学习,建议规划清晰的学习路线
GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助~
鸿蒙(HarmonyOS NEXT)最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
2.学习视频+学习PDF文档
HarmonyOS Next 最新全套视频教程 (鸿蒙语法ArkTS、TypeScript、ArkUI教程……)
纯血版鸿蒙全套学习文档(面试、文档、全套视频等)
鸿蒙APP开发必备
总结
总的来说,华为鸿蒙不再兼容安卓,对程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。