在微信小程序和app环境下 web-view内嵌的外部H5里面如何调用uni-app api

问题描述

使用 uni-app 写的项目A 已兼容微信小程序和APP。另外有个使用uni-app vue写的H5 (项目B)。现在想项目A使用web-view组件内嵌项目B的某个H5页面。

问题：在小程序环境里有用，但是在app环境下，报错：TypeError: Cannot read property ‘reLaunch’ of undefined

有没有大佬清楚咋解决？我找了网上文档，没有用。

代码示例如下

我分别引入了微信的js 和 uni.webview.js

<!-- 引入微信jssdk -->  
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>  
<!-- uni.webview.js文件 -->  
<script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>

isInWXWebView() {  
    return navigator.userAgent.match(/miniprogram/gi) || window.__wxjs_environment === 'miniprogram';  
}  
// 调用方法跳转页面  
returnAppIndex() {  
            try {  
                 if (this.isInWXWebView()) {  
                    // 微信小程序里  
                    window.jWeixin.miniProgram.reLaunch({  
                        url: pageUrl  
                    });  
                 } else {  
                    uni.webView.reLaunch({  
                           url: pageUrl  
                    });  
                 }  
            } catch (error) {  
                console.log(error);  
            }  
        }

vueper 1楼•8 小时前

<div id="app"><!--app-html--></div>  
<script type="module" src="/main.js"></script>  
<script>  
    // uni.webview.js默认输出的uni；但是因为本身是uni-app；会和本身uni冲突；所以这里重命名变量。  
    const uniWebView = uni.webView  
</script>

</body> 然后他就不报错了！！！

sinazl 2楼•8 小时前

在微信小程序和APP环境下，web-view 组件用于内嵌显示外部H5页面。然而，由于安全隔离机制，web-view 中的外部H5页面无法直接调用 uni-app 提供的原生API。为了实现H5页面与 uni-app 之间的通信，通常需要通过一些间接手段，比如使用postMessage API进行消息传递。

以下是一个基于postMessage的通信示例，展示如何在微信小程序和APP环境下，通过web-view与uni-app进行通信，并间接调用uni-app的API。

小程序端代码示例

1. 在小程序的页面配置文件中添加web-view组件

{
  "usingComponents": {},
  "component": true,
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  }
}

2. 在页面的wxml文件中添加web-view组件

<view class="container">
  <web-view src="https://your-h5-page-url.com" bindmessage="handleMessage"></web-view>
</view>

3. 在页面的js文件中处理消息

Page({
  handleMessage(e) {
    const data = e.detail.data;
    if (data.action === 'callUniAppApi') {
      // 调用uni-app的API，例如获取系统信息
      wx.getSystemInfo({
        success: (res) => {
          // 将结果发送回H5页面
          wx.createSelectorQuery().select('#webview').context((res) => {
            res.context.postMessage({
              type: 'response',
              data: res.systemInfo
            });
          }).exec();
        }
      });
    }
  }
});

H5端代码示例

1. 在H5页面中发送消息给小程序

// 假设在某个按钮点击事件中发送消息
document.getElementById('callApiButton').addEventListener('click', () => {
  if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('postMessage', {
      action: 'callUniAppApi'
    });
  } else {
    // 对于非微信环境，可能需要其他方式发送消息，这里简单处理为alert
    alert('Please open this page in WeChat Mini Program webview.');
  }
});

// 接收小程序返回的消息
window.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'response') {
    console.log('Received response from Mini Program:', event.data.data);
    // 在这里处理小程序返回的数据
  }
});

注意：上述代码示例是基于微信小程序的环境。对于uni-app的APP环境，原理类似，但可能需要调整postMessage的调用方式以及接收消息的监听器，以适应不同平台的API差异。同时，确保web-view组件的src属性指向的H5页面已正确配置跨域通信的相关设置。