uniapp 嵌入外部h5 报错/收不到消息

uniapp 嵌入外部h5 报错/收不到消息

  • [h5 不是uniapp 框架](#h5 不是uniapp 框架)
  • [h5 是uniapp 框架](#h5 是uniapp 框架)

使用的版本:

h5 不是uniapp 框架

报错:会报window.__f__is not function...

在引入uni.webview.1.5.8.js 最前面加入window.f = function() {};

h5 是uniapp 框架

报错:会报window.__f__is not function...

此时加入 window.f = function() {}; 还是不能收到消息,需要在引入uni.webview.1.5.8.js 后打补丁

javascript 复制代码
  <script type="text/javascript" >
        window.__f__ = function() {};
  </script>
   <script type="text/javascript" src="/js/uni.webview.1.5.8.js"></script>
   <script>
        // 等待 uni.webview.js 加载完成
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                console.log('检查 uni.postMessage 是否可用...');

                // 如果 uni.postMessage 不存在,手动创建
                if (window.uni && !window.uni.postMessage) {
                    console.log('uni.postMessage 不存在,手动创建');

                    // 创建 uni.postMessage 方法
                    window.uni.postMessage = function(message) {
                        console.log('uni.postMessage 被调用:', message);

                        // 方式1:使用 __dcloud_weex_postMessage(weex 环境)
                        if (window.__dcloud_weex_postMessage) {
                            console.log('使用 __dcloud_weex_postMessage');
                            window.__dcloud_weex_postMessage({
                                data: message.data || []
                            });
                            return;
                        }

                        // 方式2:使用 __uniapp_x_postMessage(uni-app x 环境)
                        if (window.__uniapp_x_postMessage) {
                            console.log('使用 __uniapp_x_postMessage');
                            window.__uniapp_x_postMessage({
                                options: { timestamp: +new Date },
                                name: 'postMessage',
                                arg: message.data || {}
                            });
                            return;
                        }

                        // 方式3:使用 plus.webview.postMessageToUniNView(plus 环境)
                        if (window.plus && window.plus.webview) {
                            console.log('使用 plus.webview.postMessageToUniNView');
                            try {
                                var webviewIds = [];
                                var currentWebview = plus.webview.currentWebview();
                                if (currentWebview) {
                                    var parentWebview = currentWebview.parent();
                                    if (parentWebview) {
                                        webviewIds.push(parentWebview.id);
                                    }

                                    // 发送消息到 uni-app 服务层
                                    plus.webview.postMessageToUniNView({
                                        type: "WEB_INVOKE_APPSERVICE",
                                        args: {
                                            data: {
                                                options: { timestamp: +new Date },
                                                name: 'postMessage',
                                                arg: message.data || {}
                                            },
                                            webviewIds: webviewIds
                                        }
                                    }, "__uniapp__service");

                                    console.log('✓ 消息已发送到 uni-app 服务层');
                                }
                            } catch(e) {
                                console.error('plus.webview.postMessageToUniNView 失败:', e);
                            }
                            return;
                        }

                        console.warn('没有可用的 postMessage 方式');
                    };

                    console.log('✓ uni.postMessage 方法已创建');
                } else {
                    console.log('uni.postMessage 已存在:', typeof window.uni?.postMessage);
                }
            }, 100);
        });
    </script> 
  
相关推荐
RuoyiOffice15 小时前
2026 企业定制开发选型:从零开发、低代码、SaaS 与 RuoYi Office 怎么选?
spring boot·uni-app·开源·saas·oa·定制化·ruoyioffice
三天不学习1 天前
【超详细】Vue3+UniApp+.NET8集成腾讯云IM即时通信全攻略
uni-app·.net·腾讯云·im·即时通信
于先生吖1 天前
前后端分离人事招聘项目,校招宣讲预约+社招双向撮合功能架构设计教程
java·开发语言·uni-app
QQ_5110082851 天前
uniapp微信小程序网上饰品商城售卖系统php python物流
微信小程序·uni-app·php
2501_915909061 天前
深入解析Mock.js:功能、应用及实战案例,提升前端开发效率
android·ios·小程序·https·uni-app·iphone·webview
于先生吖1 天前
前后端分离体育服务项目,场馆计费+线下赛事排行小程序部署开发教程
java·小程序·uni-app
蜡台1 天前
Uniapp 实现预览pdf 文件
pdf·uni-app·pdfh5
不想吃饭e1 天前
uniapp-图片,视频上传组件封装
java·uni-app·音视频
2501_916007472 天前
不用 Mac 也可以 Windows下管理iOS描述文件的非Xcode完整指南
android·ios·小程序·https·uni-app·iphone·webview
于先生吖2 天前
UniApp搭配Java后端实现到店预约上门指派,订单状态流转与结算开发教程
java·开发语言·uni-app