立即注册
查看: 411|回复: 1

[鸿蒙OS应用] 使用WebView组件实现应用与Web页面间的通信

已绑定手机
发表于 2021-8-28 16:33:28 | 显示全部楼层 |阅读模式 来自 广东省深圳市
1. 介绍
开发者如果需要在自己的应用中嵌入Web页面,可以通过WebView组件进行开发。WebView组件派生于通用组件Component,可以像通用组件一样使用。
本教程以应用嵌入WebView组件为例,从WebView组件构建、Web页面加载、应用与WebView中Web页面间的交互三个方面出发,让您快速了解WebView组件的基本能力及使用方法。
WebView组件能力的详细介绍可以参考开发指南WebView。
注意:
请使用真机或模拟器运行查看WebView效果,预览器不支持WebView显示。
只有预置WebView能力的真机设备才支持WebView功能。具体请以实际设备支持情况为准。智能穿戴设备不支持WebView。

2. 搭建HarmonyOS环境
我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。
安装DevEco Studio,详情请参考下载和安装软件。
设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:
-如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。
-如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境。
开发者可以参考以下链接,完成设备调试的相关配置:
-使用真机进行调试
-使用模拟器进行调试

3. 增加一个WebView组件
步骤 1 - 在"resources/base/layout/ability_main.xml"文件中创建WebView,示例代码如下:
<ohos.agp.components.webengine.WebView
    ohos:id="$+id:webview"
    ohos:height="match_parent"
    ohos:width="match_parent">
</WebView>
步骤 2 - 在"slice/MainAbilitySlice.java"文件中通过如下方式获取WebView对象,示例代码如下:
WebView webview = (WebView) findComponentById(ResourceTable.Id_webview);
—-结束

4. 通过WebView加载Web页面
WebView加载页面分为加载Web页面和加载本地Web页面两种情况,接下来我们将分别进行介绍。
WebView加载网络Web页面
在entry/src/main/config.json中申请网络权限ohos.permission.INTERNET,示例代码如下:
module": {
......
"reqPermissions": [
{
   "name": "ohos.permission.INTERNET"
}
]
}
在"slice/MainAbilitySlice.java"文件中通过webview.load(String url)方法访问具体的Web页面,通过WebConfig类对WebView组件的行为进行配置,示例代码如下:
WebConfig webConfig = webview.getWebConfig();
// WebView加载URL,其中urlTextField为输入URL的TextField组件
webview.load(urlTextField.getText());
......

5. 实现应用与WebView中的Web页面间的通信
本教程以本地Web页面"resources/rawfile/test.html"为例介绍如何实现应用与WebView中的Web页面间交互。
首先需要对WebConfig进行配置,使能WebView与Web页面JavaScript交互的能力,示例代码如下:
// 配置是否支持JavaScript,默认值为false
webConfig.setJavaScriptPermit(true);
应用调用Web页面
在"resources/rawfile/test.html"中编写callJS方法,待应用调用,示例代码如下:
<script type="text/javascript">
// 应用调用Web页面
function callJS(message) {
    alert(message);
}
......

更多详细内容请下载附件查看
游客,如果您要查看本帖隐藏内容请回复
已绑定手机
发表于 2021-8-30 09:32:03 | 显示全部楼层 来自 广东省
DINGDINGDING
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

合作/建议

TEL: 19168984579

工作时间:
周一到周五 9:00-11:30 13:30-19:30
  • 扫一扫关注公众号
  • 扫一扫打开小程序
Copyright © 2013-2024 一牛网 版权所有 All Rights Reserved. 帮助中心|隐私声明|联系我们|手机版|粤ICP备13053961号|营业执照|EDI证
在本版发帖搜索
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表