目录

• 使用Webview在鸿蒙设备上运行Unity游戏需要几个步骤？
• 1. 创建鸿蒙全屏工程
• 2. 添加Webview
• 2.1. 将模板layout中的image组件替换成webview
• 2.2. 初始化webview，并加载url
• 3. 隐藏标题栏
• 3.1. 在config.json中设置NoTitleBar
• 3.2. 在onStart中设置MARK_TRANSLUCENT_STATUS
• 4. 设置Webview加载Unity Webgl游戏
• 5. 打开远程真机，进行调试
• 如何加载本地资源？
• 特别鸣谢钟发发老师

上一次测试了Cocos直接打包鸿蒙应用，体验极度舒适。

《用DevEco 2.2远程真机调试+Cocos Creator 3.2开发一个鸿蒙游戏》
xmanyou.com/build-a-harmony-game-with-cocos-creator-and-run-on-remote-device

但是，对于Cocos之外的其他游戏引擎使用者，例如Laya，例如Egret，特别是Unity，有什么办法可以在鸿蒙上开发游戏呢？

由于这些引擎的底层与Cocos不同，不能直接用Cocos的代码，所以在这些引擎为鸿蒙提供原生支持之前，我们需要一个曲线救国的方法。

于是乎，我想到了：Webview。

官方文档
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158

实际效果：

使用Webview在鸿蒙设备上运行Unity游戏需要几个步骤？

1. 创建鸿蒙全屏工程

在DevEco中创建一个新工程，模板选择Full Screen Ability。

2. 添加Webview

这个工程的布局很简单，就是一个全屏的image组件，把image组件替换成webview即可。

2.1. 将模板layout中的image组件替换成webview

    <ohos.agp.components.webengine.WebView
        ohos:id="$+id:webview"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ohos.agp.components.webengine.WebView>
1.
2.
3.
4.
5.

注意
该模板提供了2个layout，land_main是横屏，port_main是竖屏，根据需要或者直接都替换掉。

2.2. 初始化webview，并加载url

在MainAbilitySlice中，添加方法initWebview

    // 初始化webview，并加载url
    private void initWebview(){
        WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
        webView.getWebConfig().setJavaScriptPermit(true);  // 如果网页需要使用JavaScript，增加此行；如何使用JavaScript下文有详细介绍
        final String url = EXAMPLE_URL; // EXAMPLE_URL由开发者自定义
        webView.load(url);
    }
1.
2.
3.
4.
5.
6.
7.

并在onStart方法中调用。

3. 隐藏标题栏

添加完Webview组件，就可以用它来查看网页了。

下图中，展示了我的博客

xmanyou.com/

可以看到，标题栏还在。

为了提供更好的体验，我们想办法把它隐藏。
以下方法来自钟发发老师。

两个步骤：

3.1. 在config.json中设置NoTitleBar

    "abilities": [
      {
...
        "metaData":{
          "customizeData":[
            {
              "name": "hwc-theme",
              "value": "androidhwext:style/Theme.Emui.NoTitleBar",
              "extra":""
            }
          ]
        }
...
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

3.2. 在onStart中设置MARK_TRANSLUCENT_STATUS

注意，以下代码需要在setUIContent之前调用。

        // 沉浸式显示（by 钟发发老师)
        this.getWindow().addFlags(WindowManager.LayoutConfig.MARK_TRANSLUCENT_STATUS);
      // setUIContent 之前
1.
2.
3.

再次测试Webview，这次标题栏就隐藏了。

4. 设置Webview加载Unity Webgl游戏

首先，用Unity打包Webgl游戏，并上传到服务器上。
然后，用Webview加载Unity游戏的链接。

5. 打开远程真机，进行调试

与cocos项目一样，模拟器无法正常演示游戏，需要使用远程真机来调试。
参考上一篇：

《用DevEco 2.2远程真机调试+Cocos Creator 3.2开发一个鸿蒙游戏》
xmanyou.com/build-a-harmony-game-with-cocos-creator-and-run-on-remote-device/

完成~

如何加载本地资源？

你可能已经注意到了，本文介绍的方法，游戏代码是放在服务器上的，如果你没有服务器，或者想把资源放在游戏包中，可以参考官方WebView文档，里边有详细介绍如何加载本地资源。
如果有空尝试的话，我会再出一篇相关文章。

《WebView》
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158

特别鸣谢钟发发老师

非常感谢钟发发老师在我遇到困难时，第一时间伸出援手，非常感谢，比心。