uni-app 快手小程序的webview页面里调用uni的api无效

uni-app 快手小程序的webview页面里调用uni的api无效

操作步骤：

  • 在快手小程序的webview页面里调用uni的api

预期结果：

  • 生效

实际结果：

  • 无效

bug描述：

  • 官方Demo小程序就可以复现，录屏见附件
  • video(2).zip
信息类别 信息内容
产品分类 uniapp/小程序
PC开发环境 Windows
PC操作系统版本 11
HBuilderX类型 正式
HBuilderX版本 4.36
工具版本 1.61.2
基础库版本 1.98.1
项目创建方式 HBuilderX

更多关于uni-app 快手小程序的webview页面里调用uni的api无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

顶顶

更多关于uni-app 快手小程序的webview页面里调用uni的api无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，当你尝试在快手小程序的webview页面中调用uni的API时，确实可能会遇到调用无效的问题。这主要是因为webview通常是一个隔离的环境，它不能直接访问宿主应用（在这里是uni-app）的API。不过，你可以通过一些变通的方法来实现功能，比如使用postMessage进行跨页面通信。

以下是一个基本的示例，展示如何在uni-app的页面和嵌入的webview之间进行通信，尽管这不能直接调用uni的API，但你可以通过发送消息给宿主页面，然后在宿主页面中处理这些消息，再调用相应的uni API。

宿主页面（uni-app页面）代码

首先，在你的uni-app页面中嵌入一个webview组件，并监听来自webview的消息。

<template>
  <view>
    <web-view :src="webviewSrc" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewSrc: 'https://your-webview-url.com' // 你的webview页面URL
    };
  },
  methods: {
    handleMessage(event) {
      const { data } = event.detail;
      if (data && data.action) {
        switch (data.action) {
          case 'callUniApi':
            this.callUniApi(data.params);
            break;
          // 添加更多处理逻辑
        }
      }
    },
    callUniApi(params) {
      // 在这里调用uni的API
      uni.showToast({
        title: `Received from webview: ${JSON.stringify(params)}`,
        icon: 'none'
      });
      // 例如，调用uni.setStorageSync保存数据
      uni.setStorageSync('webviewData', params);
    }
  }
};
</script>

Webview页面代码

在你的webview页面中，你可以使用postMessage发送消息给宿主页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webview Page</title>
</head>
<body>
  <button onclick="sendMessage()">Send Message to Uni-app</button>

  <script>
    function sendMessage() {
      const message = {
        action: 'callUniApi',
        params: { key: 'value' } // 你想传递的参数
      };
      window.parent.postMessage(message, '*');
    }
  </script>
</body>
</html>

这种方式虽然不能直接调用uni的API，但通过消息传递机制，你可以在宿主页面中处理这些消息，并间接地调用所需的uni API。这是处理webview与uni-app之间通信的一种常见方法。

回到顶部