uniapp web-view src 如何动态赋值

在uniapp中，web-view组件的src属性如何实现动态赋值？我尝试通过data中的变量绑定src，但发现页面加载时无法实时更新。比如我需要根据用户选择的不同参数来切换web-view加载的URL地址，但直接修改绑定的变量后web-view不会重新加载。请问正确的动态赋值方法是什么？是否有必要调用web-view的刷新方法？

2 回复

在uniapp中，使用web-view组件的src属性时，可以通过数据绑定实现动态赋值。

例如：

<web-view :src="url"></web-view>

在script中定义数据：

data() {
  return {
    url: 'https://example.com'
  }
}

可以通过方法修改url值来动态更新web-view的地址。


在 UniApp 中，web-view 组件的 src 属性可以通过数据绑定实现动态赋值。以下是具体方法：

实现步骤

  1. 在 data 中定义变量：例如 webViewUrl。
  2. 使用 v-bind 或 : 绑定 src：将变量与 web-view 的 src 属性关联。
  3. 动态修改变量值：通过方法或生命周期函数更新 webViewUrl，例如根据条件或接口返回数据赋值。

示例代码

<template>
  <view>
    <!-- 动态绑定 src -->
    <web-view :src="webViewUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: "" // 初始化为空或默认地址
    };
  },
  onLoad(options) {
    // 示例：通过页面参数动态赋值
    if (options.url) {
      this.webViewUrl = decodeURIComponent(options.url);
    }
    // 或通过接口获取数据
    // this.fetchUrl();
  },
  methods: {
    // 示例方法：通过接口动态更新 URL
    async fetchUrl() {
      const res = await uni.request({ url: "https://api.example.com/getUrl" });
      this.webViewUrl = res.data.url;
    }
  }
};
</script>

注意事项

  • URL 格式：需为合法完整地址（如 https://example.com），本地路径可能受限。
  • 页面刷新：修改 webViewUrl 后，web-view 会自动重新加载新地址。
  • 作用域限制：web-view 内容与 UniApp 页面隔离，无法直接交互，需通过 uni.postMessage 通信。

通过以上方法，即可灵活控制 web-view 加载的网页内容。

回到顶部