【HarmonyOS NEXT】如何实现通过三方浏览器打开一个H5页面，通过H5页面拉起原生应用并且传递参数

最新推荐文章于 2024-07-22 21:09:27 发布
最新推荐文章于 2024-07-22 21:09:27 发布
阅读量870 收藏 7
点赞数 8
文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mayism123/article/details/136740065
版权
本文讲述了在H5页面中，通过Webview和JSBridge技术调用三方浏览器或微信打开页面，实现H5拉起原生应用的方法，包括使用StartAbility和依赖于原生应用的特定接口。未来，H5将通过AppLink功能传递参数，类似于iOS的UniversalLinks和安卓的AppLinks。
摘要由CSDN通过智能技术生成

【关键字】

webview / jsbridge / 三方浏览器 / H5 / 拉原生应用 / 传递参数

【问题描述】

如何实现通过三方浏览器或微信打开一个H5页面，通过H5页面拉起原生应用并且传递参数。

【解决方案】

当前webview通过jsbridge的方式，可以执行StartAbility来拉起原生应用。

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/start-page-0000001774120010

当前jsbridge拉起的方式只支持应用内web组件通过和H5页面通信实现。

目前H5拉原生应用只有相关原生应用自己适配的接口，比如call.makeCall，具体实现可参考链接。

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-redirection-and-browsing-history-mgmt-0000001820999901#ZH-CN_TOPIC_0000001820999901__%E8%B7%A8%E5%BA%94%E7%94%A8%E8%B7%B3%E8%BD%AC

关于H5页面拉起原生应用传递参数，目前已有规划，需要等版本实现后，通过AppLink实现，能力对标ios的Universal Links和安卓App Links的能力。

Mayism123
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HarmonyOS 上实现 ArkTS 与 H5 的交互
HarmonyOSDev的博客
11-13 2829
您已经完成了本次 Codelab 的学习，并了解到以下知识点：1. ArkTS 侧如何使用桥接通道提供给 H5 调用方法。2. H5 如何接收 ArkTS 侧的异步数据。
鸿蒙 HarmonyOS NEXT应用开发案例集
最新发布
小北的博客
08-02 1178
随着应用代码复杂度的提升，为了提高应用的可维护性和可扩展性，良好的应用架构设计显得尤为重要。本篇文章将介绍一个应用通用架构的设计思路，旨在减少模块间的耦合、提升团队开发效率，为开发者提供一个清晰且结构化的开发框架。本文以“应用通用开发范例App”为例，从分层架构设计和模块化设计两个方面介绍应用的架构组成。
HarmonyOS 应用开发之使用隐式Want打开网址
maniuT的博客
03-29 525
以打开浏览器为例，假设设备上安装了一个或多个浏览器应用。当存在多个匹配的应用时，系统将弹出应用选择框供用户选择。示意效果如下图所示。在调用方UIAbility中，使用隐式Want方式启动浏览器应用。4.鸿蒙开发系统底层方向。1.项目开发必备面试题。5.鸿蒙音视频开发方向。6.鸿蒙车载开发方向。7.鸿蒙南向开发方向。
【鸿蒙实战开发】web组件的h5页面调用鸿蒙app图库和拍照示例实现
HarmonyOS_NEXT的博客
07-22 304
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。
【HarmonyOS NEXT】如何通过h5拉起应用（在华为浏览器中拉起应用）
wu1004019946的博客
06-12 1334
网页需要给自己的应用拉活，因此在网页中添加按钮引导用户拉应用。url=XXX)>,点击该按钮，打开网页web端收到的url为iyingyong://www.yingyong.com?另外浏览器不会对deeplink链接做任何解析或处理，只会原封不动的传递给拉起的应用。因此第三方应用只需要自己的网页端和应用端协商好url规则，自己去做解析打开对应页面即可。浏览器访问网页经常会遇到deeplink的场景。需要注意deeplink链接的scheme协议头必须网页拉起的链接的应用配置的保持一致。
H5调用app原生接口
qq_42858057的博客
12-29 3544
移动端H5调用app原生接口使用JSBridge的方式调用使用 需求是在移动端app中跳转至H5页面，需要调用该app的刷脸接口。只是使用过，故在此留下笔记。 使用JSBridge的方式调用 使用
【HarmonyOS NEXT】是否支持在H5中以deeplink方式拉起APP
Mayism123的博客
06-21 284
当前只能用jsbridge方式用Web组件和H5页面通信来实现。H5拉起原生APP，只能自己适配接口来实现，例如下面链接示例代码中通过call.makeCall拉起通话应用。对标iOS的Universal Links和安卓App Links的能力正在规划实现中，后续可以使用此能力。是否支持在H5中以deeplink方式拉起APP？H5 / deeplink / 拉起 / APP。
爱星物联——H5调用原生接口介绍
安信可科技
04-17 382
在功能实现时我们会根据需求用原生接口，如配网、获取当前WiFi名称、设置APP权限、扫一扫、拍照等。爱星云APP基于Cordova提供了大量内置、自定义接口。开发者可根据需求查阅调用。APP原生端会定义相关接口，提供H5端调用；H5端需要根据接口信息在脚手架框架下的src/api/cordova.js中定义调用方法供vue页面调用。上图为接口定义，详情使用方式可查看脚手架。以上就是本期分享的内容，目的在于让大家快速适应新品方案的开发，更多资料可从我们官网上获取。
端午假期整理了仿天猫H5 APP项目vue.js+express+mongo
m0_67393413的博客
07-30 364
源码太多，放github上了。
真实测评揭秘：开发小程序用原生还是选框架？
小程序公社
05-19 4029
自2017-1-9微信小程序诞生以来，历经2年多的迭代升级，已有数百万小程序上线，成为继Web、iOS、Android之后，第四大主流开发技术。 与之相随，小程序的开发生态也在蓬勃发展，从最初的微信原生开发，到wepy、mpvue、taro、uni-app等框架依次出现，从刀耕火种演进为现代化开发，生态越来越丰富。 选择多了，问题也就来了，开发小程序，该用原生还是选择三方框架？ 首先，微信原生开发的槽点大多集中如下： 原生开发对Node、预编译器、webpack支持不好，影响开发效率和工程...
Android uni-app 封装原生插件
anyRTC的博客
12-17 5964
前言 据广大用户的需求，需要把我们anyRTC的SDK，封装到uni-app来使用，并且实现音视频通话。这边文章图文讲解一下怎么封装原生插件，并且在下一章uni-app实现音视频通话。 anyRTC开发者中心 1.uni-app是什么？ 一个使用Vue.js开发所有前端应用框架,开发者编写一套代码,可发布到ios、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 如果你还没有了解uni-app是什么：点击这里：这篇文章举例说明。 2.uni-app的特点 1、跨
使用uni-app开发小程序，比直接原生开发小程序好在哪里？
weixin___sjk6070的博客
10-16 3050
小程序原生开发有不少槽点： 原生wxml开发对Node、预编译器、webpack支持不好，影响开发效率和工程构建流程。所以大公司都会用框架开发 微信定义的这套语法，wxml、wxs，以及wx:if等语法，私有化太强。不如正经学vue，学会了全端通用，而不是只为微信小程序 vue生态里有太多周边工具，可以提高开发效率，比如ide、校验器、三方库。。。而微信的开发者工具和专业编辑器相比实在不好用，个性...
【HarmonyOS NEXT】是否有类似Android的Scheme功能，可以从H5页面上拉起App内的特定页面（原生页面/H5页面）
Mayism123的博客
03-12 428
是否有类似Android的Scheme功能，可以从H5页面上拉起App内的特定页面（原生页面/H5页面）？当前WebView通过JSBridge的方式，可以执行到startability，来拉起页面。H5 / 拉起App / WebView / JSBridge。
【HarmonyOS NEXT】如何调用系统的浏览器并打开指定URL，提示无法打开此文件
Mayism123的博客
03-15 994
浏览器 / 打开指定URL / 隐式Want / uris数组。检查一下是否符合匹配规则，请参考如下文档。如何调用系统的浏览器并打开指定URL。skills中没有配置uris数组。后在华为工程师指导下按参考文档（）写代码，提示无法打开此文件。手机报错提示如下图所示。
HarmonyOS鸿蒙应用开发——原生与H5通信框架DSBrigde-HarmonyOS
学习，思考，输出
01-09 4505
HarmonyOS版的DSBridge，通过本库可以在鸿蒙原生与JavaScript完成交互，相互调用彼此的功能。目前兼容Android、iOS第三方DSBridge库的核心功能，基本保持原来的使用方式，可以放心接入到项目中，后续会持续迭代保持与Android库相同的功能，减少前端和客户端的适配工作。支持以类的方式集中统一管理API；支持同步和异步调用；支持进度回调/回传：一次调用，多次返回；支持API是否存在的测试 (当前仅支持检测原生API，在调用call()方法时会自检测)
【HarmonyOS NEXT】Web加载H5页面，请求数据报CORS跨域问题
Mayism123的博客
02-22 619
示例代码中Web({src:'resource://rawfile/index.html',controller:this.controller}) 使用本地的域名请求HTTPS，导致跨域的。Web组件使用onInterceptRequest方法，H5请求网络数据时，使用setResponseIsReady异步传数据，报CORS跨域问题。建议在拦截器里面设置一下header。使用这个接口，在拦截器里面设置跨域。unshift / 拼写错误。
移动端H5与原生交互
jstljspservlet的博客
08-01 365
JavaScript调用Native的方式，主要有两种：注入API和拦截URL SCHEME
HarmonyOS鸿蒙最新鸿蒙ArkTS实战开发：Worker(8)，h5页面适配所有手机
2401_84853282的博客
05-10 671
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
【HarmonyOS】解决API6 WebView跳转外部浏览器问题、本地模拟器启动黑屏
Mayism123的博客
09-21 1082
最近在新电脑上安装DevEco Studio本地模拟器时，遇到了一个很古怪的问题，在这边跟大家分享一下，希望能帮助到遇到相同问题的同学。新安装的本地模拟器在启动的时候长时间黑屏，启动模拟器会发现 “Size on Disk”一直在增长，但是增长的很慢。排查了半天，最后发现是误删了C:\Users\用户名\目录下的.android文件夹导致的，重新新建.android文件夹后，就可以正常运行模拟器了。关闭模拟器以后在本地模拟器的日志中会发现，模拟器的错误日志的大小跟上面的Size on Disk相同。
uni-app实现h5右滑返回上一个页面不是退出页面
06-08
在uni-app中，可以使用 `vue-router` 来实现H5右滑返回上一个页面而不是退出页面的功能。具体来说，你需要在 `vue-router` 中配置 `routes` 时，将 `meta` 字段中的 `keepAlive` 属性设置为 `true`，表示需要缓存页面状态，这样在返回上一个页面时就不会重新加载页面。 下面是一个简单的示例代码： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: () => import('@/views/Home'), meta: { keepAlive: true // 缓存页面状态 } }, { path: '/detail', name: 'detail', component: () => import('@/views/Detail'), meta: { keepAlive: true // 缓存页面状态 } } ] }) ``` 在上面的代码中，我们使用 `meta` 字段来配置页面的一些属性，其中 `keepAlive` 属性为 `true` 表示需要缓存页面状态。在页面中，你可以通过监听 `beforeRouteLeave` 钩子来实现右滑返回的功能。 下面是一个简单的示例代码： ```javascript export default { name: 'Detail', beforeRouteLeave(to, from, next) { if (from.name === 'home') { history.pushState(null, null, document.URL) // 将当前状态推入历史记录栈 } next() } } ``` 在上面的代码中，我们通过监听 `beforeRouteLeave` 钩子来实现在离开当前页面时将当前状态推入历史记录栈的功能，这样在右滑返回时就会返回到前一个页面，而不是退出页面。需要注意的是，我们通过判断 `from.name` 来确定是否从前一个页面返回，如果是从其他页面返回则不执行推入历史记录栈的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值