HarmonyOS 鸿蒙Next中webview的登录和通信问题

HarmonyOS 鸿蒙Next中webview的登录和通信问题 鸿蒙使用webview承载uniapp项目的网站，无法实现登录功能和通信

操作步骤：

  1. 鸿蒙新建项目，在index.ets文件中使用webview承载目标网站
  2. 目标网站时使用uniapp写的项目
  3. 使用webview承载目标网站后在鸿蒙中运行到真机/模拟机中

现在存在两个问题：

  • 输入正确登录信息后，点击登录无法进入应用，登录界面被重加载，登录信息被清空。
  • 尝试在网站中发送消息给鸿蒙，鸿蒙与该网站无法实现通信（可以使用hbuilder新建一个uniapp项目作为目标网站）
3 回复

webview组件有一些权限默认是不开启的，如果页面上的功能依赖这些权限会受到影响，可以设置开启这些权限试一下：

Web({ src: “https:xxxxx”, controller: this.controller })

  • 设置是否开启文档对象模型存储接口: domStorageAccess(true)
  • 设置是否开启应用中文件系统的访问: fileAccess(true)
  • 设置是否开启数据库存储API权限: databaseAccess(true)
  • 设置是否允许加载HTTP和HTTPS混合内容: mixedMode(MixedMode.All)
  • 设置确认事件:
    .onConfirm((e: WebMessage) => {
    console.log("luvi > " + JSON.stringify(e) + "666666666")
    promptAction.showToast(e)
    this.content = e.message
    return false;
})

前端页面和鸿蒙客户端进行互相通信可参考文档中的方式： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-use-frontend-page-js-V5

更多关于HarmonyOS 鸿蒙Next中webview的登录和通信问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，WebView的登录和通信问题主要涉及与Web页面的交互和数据传递。鸿蒙Next提供了WebView组件来加载和显示网页内容，开发者可以通过WebView与网页进行通信，处理登录等交互操作。

  1. WebView加载网页：通过WebView组件加载需要登录的网页，可以使用loadUrl方法加载URL。

  2. JavaScript交互：鸿蒙Next的WebView支持与JavaScript的交互。可以通过WebView的executeJs方法执行JavaScript代码，获取或修改网页内容。

  3. 登录处理：在WebView中处理登录，通常可以通过JavaScript注入表单数据并自动提交。例如，使用executeJs方法注入用户名和密码，并触发登录按钮的点击事件。

  4. 通信机制：鸿蒙Next提供了WebMessagePort和WebMessageChannel来实现WebView与Native之间的双向通信。可以通过WebMessagePort发送消息，并在Native端接收处理。

  5. Cookie管理：登录后，WebView会自动管理Cookie。开发者可以通过CookieManager获取或设置Cookie，确保登录状态持久化。

  6. 安全性：鸿蒙Next的WebView支持安全策略，如设置WebSettings的安全选项，防止XSS攻击等。

通过这些机制，开发者可以在鸿蒙Next中实现WebView的登录和通信功能，确保网页与Native应用之间的数据交互安全可靠。

在HarmonyOS鸿蒙Next中，WebView的登录和通信问题可以通过以下方式解决：

  1. 登录问题：使用WebView的loadUrl方法加载登录页面，并通过WebViewClient拦截登录请求，获取登录凭证。可以使用CookieManager管理会话，确保登录状态持久化。

  2. 通信问题：通过JavaScriptInterface实现Java与JavaScript的交互。在WebView中注入Java对象，供前端调用。同时，可以使用WebView的evaluateJavascript方法执行JavaScript代码，实现双向通信。

  3. 安全性：确保通信过程中使用HTTPS协议，防止数据泄露。同时，对JavaScriptInterface进行严格的权限控制，避免安全漏洞。

回到顶部