uniapp开发HarmonyOS NEXT的app，如何向window注入挂载有方法的对象

Question

项目为uniapp，vue3开发的，适配HarmonyOS NEXT的app。

现在有一些已经编写好的，部署在外部网址的h5页面，页面通过调用window上的一个对象所挂载的方法来获取一些信息（例如getUserInfo方法，这个方法返回的是app登录所得到的用户信息），这些h5页面已经写好并上线了，可以通过已有的安卓原生开发的app正常访问并通过这种方法获取信息。

现在我的需求是，需要在不改动h5页面的情况下，在uniapp开发的适配纯血鸿蒙（HarmonyOS NEXT）的app中实现这个效果。
我目前使用了web-view组件，成功打开了h5页面，现在问题是如何将app中的信息以上述方式传递到h5页面。

我目前的想法是，往web-view的window上注入一个对象，这个对象挂载了getUserInfo方法，方法返回h5需要的数据，h5可以通过原先的方式调用这个方法获取信息。这个想法是否可行？如果可行，需要如何实现？

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

你的想法是完全可行的，并且在 **HarmonyOS NEXT 的 uniapp 项目中可以通过 web-view 组件实现对 window 对象的注入。通过这种方式，你可以将 app 中的逻辑（如获取用户信息）暴露给 web 页面，而无需修改 H5 页面代码。

---

✅ 解决方案步骤

1. 理解需求

你希望：

• 在 H5 页面中调用 window.getUserInfo()；
• 这个方法需要返回 App 中的用户信息；
• H5 页面不改动；
• 使用 web-view 打开 H5 页面；
• 在 web-view 中注入一个带有 getUserInfo 方法的对象到 window 上。

---

2. 可行性分析

在 HarmonyOS NEXT 的 uniapp 中，web-view 支持 JavaScript 注入功能，可以使用 evalJS 或者 onMessage 事件进行通信。

注意： HarmonyOS 的 web-view 不支持直接操作 window 对象，但可以通过注入脚本的方式实现类似效果。

---

3. 具体实现步骤

3.1 在页面中使用 web-view

<template>
  <view>
    <web-view :src="h5Url" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: 'https://your-h5-page.com'
    };
  },
  mounted() {
    this.injectScript();
  },
  methods: {
    injectScript() {
      const script = `
        window.getUserInfo = function() {
          return JSON.stringify({
            name: '张三',
            token: 'abcd1234',
            userId: '1001'
          });
        };
      `;
      // 使用 evalJS 注入脚本
      this.$refs.webView.evalJS(script);
    },
    handleMessage(event) {
      console.log('收到H5消息:', event.detail);
    }
  }
};
</script>

⚠️ 注意：在 HarmonyOS 中，web-view 并没有 ref 属性，因此不能直接通过 this.$refs.webView 获取组件实例。你需要使用其他方式，比如通过 @message 事件监听或使用原生 API 调用。

---

3.2 使用 @message 事件接收 H5 消息（可选）

如果你的 H5 页面也想向 App 发送消息，可以使用：

<web-view :src="h5Url" @message="handleMessage"></web-view>

然后在 JS 中处理：

methods: {
  handleMessage(event) {
    console.log('H5 发来消息:', event.detail);
  }
}

---

3.3 如果无法直接注入 window，可考虑以下替代方案

方案一：使用 evalJS 注入函数

this.$scope.evalJS(`
  window.getUserInfo = function() {
    return JSON.stringify({ name: '张三', token: 'abc123' });
  };
`);

注意： 在某些 HarmonyOS 版本中，evalJS 可能有安全限制，需确保 H5 页面来源可信。

方案二：使用 postMessage 实现双向通信

H5 页面中：

window.addEventListener('message', function(e) {
  if (e.data === 'getUserInfo') {
    window.postMessage(window.getUserInfo(), '*');
  }
});

App 端通过 @message 接收并响应：

methods: {
  handleMessage(event) {
    if (event.detail === 'getUserInfo') {
      this.$scope.evalJS(`
        window.getUserInfo = function() {
          return JSON.stringify({ name: '张三', token: 'abc123' });
        };
      `);
    }
  }
}

---

✅ 总结

| 步骤 | 内容 | |------|------| | 1 | 在 web-view 中注入 window.getUserInfo 函数 | | 2 | 使用 evalJS 注入 JavaScript 代码 | | 3 | H5 页面无需修改，直接调用 window.getUserInfo() | | 4 | 可选：使用 @message 实现 H5 和 App 之间的双向通信 |

---

✅ 示例代码（完整版）

<template>
  <view>
    <web-view :src="h5Url" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: 'https://your-h5-page.com'
    };
  },
  mounted() {
    this.injectUserInfoFunction();
  },
  methods: {
    injectUserInfoFunction() {
      const script = `
        window.getUserInfo = function() {
          return JSON.stringify({
            name: '张三',
            token: 'abcd1234',
            userId: '1001'
          });
        };
      `;
      // 使用 evalJS 注入脚本
      this.$scope.evalJS(script);
    },
    handleMessage(event) {
      console.log('H5 发来的消息:', event.detail);
    }
  }
};
</script>

---

✅ 注意事项

• 安全性：不要在生产环境中随意注入全局对象，避免 XSS 风险。
• 兼容性：不同版本的 HarmonyOS 可能对 web-view 的支持略有差异，建议测试多设备。
• 性能：频繁注入脚本可能影响性能，建议在合适时机注入一次即可。

---

如有更多关于 web-view 与 H5 交互的问题，欢迎继续提问！