uniapp中evaljs的使用方法

在uniapp中如何使用evaljs函数？我在项目中需要动态执行一些JS代码，但直接使用evaljs时遇到报错。请问正确的调用方式是什么？是否需要特殊的配置或权限？能否提供一个具体的用法示例？

2 回复

uniapp中evaljs用于执行JS代码字符串。使用示例：evaljs("console.log('Hello')")。注意：仅在H5端有效，小程序端不支持。


在 UniApp 中，evalJS 是用于在 WebView 组件中执行 JavaScript 代码的方法，允许原生页面与 H5 页面进行交互。以下是使用方法和注意事项：

使用方法

  1. 在 WebView 组件中调用：
    在 UniApp 页面中嵌入 WebView，并通过 evalJS 向 H5 页面注入并执行 JS 代码。

    示例代码：

    <template>
  <view>
    <web-view :src="webUrl" @message="onMessage" ref="webview"></web-view>
    <button @click="executeJS">执行JS</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webUrl: 'https://example.com' // H5 页面地址
    };
  },
  methods: {
    executeJS() {
      // 通过 ref 获取 WebView 组件实例，调用 evalJS 方法
      this.$refs.webview.evalJS('alert("Hello from UniApp!");');
    },
    onMessage(e) {
      // 接收来自 H5 页面的消息（需 H5 配合 postMessage）
      console.log('H5消息:', e.detail.data);
    }
  }
};
</script>

  2. H5 页面配合：
    H5 页面需通过 uni.postMessage 向 UniApp 发送数据（需引入 UniApp 的 JS SDK）。

注意事项

  • 平台限制：仅支持 App 平台（iOS/Android），H5 和小程序无法使用。
  • 安全性：避免执行不可信代码，防止 XSS 攻击。
  • 异步执行：evalJS 是异步操作，无法直接获取 H5 返回值。需通过 @message 事件接收 H5 回调。
  • 作用域：执行的 JS 代码在 H5 页面的全局作用域中运行。

替代方案

  • 若需复杂通信，建议使用 uni.postMessage 和 WebView 的 @message 事件进行数据交换。

通过以上方法，可实现 UniApp 与内嵌 H5 的高效交互。

回到顶部