uni-app和web-view页面相互传参

在uni-app中，可以通过uni.navigateTo和uni.redirectTo等方法跳转到其他页面，并且可以通过url参数进行页面间的参数传递。而在web-view页面中，可以通过url的query参数进行参数传递。

下面是一个示例，演示了uni-app页面和web-view页面之间的参数传递：

1. 在uni-app中，使用uni.navigateTo方法跳转到web-view页面，并传递参数：

// uni-app页面
uni.navigateTo({
  url: '/pages/webview/webview?url=https://www.example.com&title=Example'
})

2. 在web-view页面中，通过获取url的query参数来获取传递的参数：

// web-view页面
var url = decodeURIComponent(location.search.substring(1));
var params = {};
url.split('&').forEach(function(item) {
  var kv = item.split('=');
  params[kv[0]] = kv[1];
});
console.log(params.url); // https://www.example.com
console.log(params.title); // Example

在上述代码中，我们使用了uni.navigateTo方法跳转到web-view页面，并通过url参数传递了两个参数：url和title。在web-view页面中，我们通过获取url的query参数，并解析成一个对象来获取传递的参数。

需要注意的是，传递给web-view页面的参数需要进行encodeURIComponent编码，以防止特殊字符的影响。在web-view页面中，需要使用decodeURIComponent解码获取到的参数。

下面是一个详细的示例，演示了uni-app页面和web-view页面之间的参数传递的整个过程。

1. 在uni-app中，创建一个名为webview的页面，并在该页面的template中添加一个按钮，用于跳转到web-view页面：

<!-- webview.vue -->
<template>
  <view>
    <button @click="navigateToWebview">跳转到Webview页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToWebview() {
      uni.navigateTo({
        url: '/pages/webview/webview?url=https://www.example.com&title=Example'
      })
    }
  }
}
</script>

2. 创建一个名为webview的web-view页面，并在该页面的template中添加一个web-view组件，用于显示web页面：

<!-- webview.vue -->
<template>
  <view>
    <web-view :src="url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  mounted() {
    // 获取传递的参数
    const params = this.$route.query;
    this.url = params.url;
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: params.title
    });
  }
}
</script>

3. 在uni-app的pages.json文件中配置webview页面的路由：

{
  "pages": [
    {
      "path": "pages/webview/webview",
      "style": {
        "navigationBarTitleText": "Webview页面"
      }
    }
  ]
}

在上述代码中，我们创建了一个webview页面，在该页面的template中添加了一个按钮，用于跳转到web-view页面。在跳转时，我们使用uni.navigateTo方法，并通过url参数传递了两个参数：url和title。

在webview页面中，我们使用this.$route.query获取传递的参数，并将url参数赋值给web-view组件的src属性。同时，我们使用uni.setNavigationBarTitle方法设置页面的标题为传递的title参数。

需要注意的是，这里的示例假设已经安装了uni-app的vue-router插件，用于实现页面的路由功能。

希望这个示例能够帮助您理解uni-app页面和web-view页面之间的参数传递过程。

使用场景：

• 在uni-app中，如果需要展示一个外部的web页面，可以使用web-view组件。比如展示一个H5活动页面、加载一个第三方网页等。
• 如果需要在uni-app中跳转到一个web页面，并且需要传递参数给该页面，也可以使用web-view组件来实现参数传递。

优点：

• 可以在uni-app中直接展示外部的web页面，无需通过其他方式进行集成。
• 可以通过url参数进行页面间的参数传递，方便实现页面间的数据交互。

缺点：

• web-view组件在uni-app中是一个嵌入的webview，会占用一定的内存和性能。
• 由于web-view组件是一个嵌入的webview，所以无法直接访问uni-app的原生API和插件，需要通过其他方式进行通信。
• 在iOS平台上，由于App Store的审核要求，web-view组件中的页面不能包含太多的第三方内容，否则可能会被拒绝上架。

总结：
web-view组件在uni-app中可以用于展示外部的web页面，或者实现uni-app页面和web页面之间的参数传递。它有一些优点，比如方便展示外部页面和实现参数传递，但也有一些缺点，比如占用内存和性能，无法直接访问uni-app的原生API和插件等。在使用时需要根据具体的需求和场景来权衡利弊。