uni-app开发微信小程序通过web-view如何及时获取传递参数

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app开发微信小程序通过web-view如何及时获取传递参数

uniapp 开发微信小程序需要通过web-view嵌套h5 ，子页面向小程序传参 可以及时看到日志 但是获取参数只能是在跳转、分享、销毁的时候触发。 功能就没法正常使用 有没有什么可以及时获取到参数的方式。

Harmonyos Next教程
1 回复

在uni-app开发微信小程序时，通过web-view组件嵌入网页并传递参数是一个常见的需求。要实现参数的传递和及时获取，可以利用微信小程序提供的web-view组件与网页之间的通信机制。这里提供一个示例，展示如何在uni-app中实现这一功能。

1. 在uni-app中设置web-view组件

首先，在uni-app的页面中使用web-view组件，并通过src属性设置要加载的网页URL，同时利用URL参数传递数据。

<template>
  <view>
    <web-view :src="webviewUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: ''
    };
  },
  mounted() {
    // 假设我们要传递的参数是 userId 和 token
    const params = {
      userId: '123456',
      token: 'abcdefg'
    };
    // 将参数转换为查询字符串
    const queryString = Object.keys(params)
      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
      .join('&');
    // 设置 web-view 的 URL，假设网页地址为 'https://example.com/page'
    this.webviewUrl = `https://example.com/page?${queryString}`;
  }
};
</script>

2. 在网页中接收参数

在嵌入的网页中，可以通过JavaScript获取URL参数。以下是一个简单的示例，展示如何在网页中获取传递的参数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web-view Page</title>
</head>
<body>
  <script>
    function getQueryParams() {
      const params = {};
      const queryString = window.location.search.substring(1);
      const arr = queryString.split('&');
      for (let i = 0; i < arr.length; i++) {
        const a = arr[i].split('=');
        const paramName = a[0];
        const paramValue = typeof(a[1]) === 'undefined' ? true : decodeURIComponent(a[1]);
        params[paramName] = paramValue;
      }
      return params;
    }

    const params = getQueryParams();
    console.log('Received params:', params); // 输出: Received params: { userId: '123456', token: 'abcdefg' }
  </script>
</body>
</html>

总结

以上代码展示了如何在uni-app中使用web-view组件传递参数，并在嵌入的网页中接收这些参数。这种方法利用了URL查询字符串进行参数传递，简单且有效。如果需要更复杂的通信机制，可以考虑使用微信小程序的postMessage API，但这需要网页端和微信小程序端都进行相应的处理。对于简单的参数传递，上述方法已经足够。

回到顶部