uni-app webview加载完成回调

在uni-app中，如果你需要在WebView加载完成后执行某些操作，可以使用@loaded事件。这个事件会在WebView页面加载完成后触发。以下是一个简单的示例，展示了如何在uni-app中实现WebView加载完成后的回调。

首先，确保你已经在项目中引入了WebView组件。然后，你可以按照以下步骤进行设置。

1. 在页面中添加WebView组件

在你的.vue文件中，添加一个web-view组件，并绑定@loaded事件。这个事件会在WebView加载完成后被触发。

<template>
  <view>
    <web-view :src="webViewUrl" @loaded="onWebViewLoaded"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://www.example.com' // 替换为你的目标URL
    };
  },
  methods: {
    onWebViewLoaded() {
      // WebView加载完成后的回调逻辑
      console.log('WebView加载完成');
      // 你可以在这里执行其他操作，比如隐藏加载动画等
      // this.hideLoadingAnimation();
    },
    // 如果需要隐藏加载动画，可以定义一个方法
    // hideLoadingAnimation() {
    //   // 实现隐藏加载动画的逻辑
    // }
  }
};
</script>

<style scoped>
/* 样式部分可以根据需要自定义 */
</style>

2. 注意事项

• 确保webViewUrl是一个有效的URL。
• @loaded事件会在WebView内容完全加载后触发，这包括所有资源（如图片、脚本等）的加载。
• 你可以在onWebViewLoaded方法中执行任何你需要在WebView加载完成后执行的操作。

3. 调试与测试

• 在开发过程中，你可以通过控制台日志来验证onWebViewLoaded方法是否被正确调用。
• 如果WebView加载的内容来自本地文件（如file:///协议），请确保这些文件已经正确打包并部署到你的项目中。
• 考虑到不同平台（如iOS、Android、H5等）可能存在的差异，建议在不同平台上进行充分的测试。

通过上述步骤，你可以在uni-app中实现WebView加载完成后的回调。这种方法简单且有效，可以满足大多数场景下的需求。