1***@qq.com
1***@qq.com
  • 发布:58 分钟前
  • 更新:11 分钟前
  • 阅读:18

web-view无法收到message

分类:uni-app

是这么个情况:
我上一个打包的APP版本时间是2026-04-02,最新打包的版本时间是2026-05-11。
上一个版本安卓IOS都没问题,最新这个IOS没问题,安卓无法正常使用,两次版本并没有调整相关代码。
我使用调试模式发现问题是@message没收到消息,但我上一个版本啥都没改却功能正常。
现在无法排查到是哪里的问题,需求帮助。
相关代码如下:

<template>  
    <view class="uniapp">  
        <web-view :src="url" @message="getpostMsg" @load="webLoad" @error="webError"></web-view>  
    </view>  
</template>  

<script>  
    // pages/web/web.js  
    export default {  
        data() {  
            return {  
                url: '',  
                successUrl: "",  
                failUrl: "",  
                options: {}  
            };  
        }  
        /**  
         * 生命周期函数--监听页面加载  
         */  
        ,  
        onLoad(options) {  
            console.warn(123, options)  
            this.url = options.src  
            this.successUrl = decodeURIComponent(options.surl)  
            this.failUrl = decodeURIComponent(options.furl)  
            this.options = options  
            // uni.showLoading()  
        },  
        /**  
         * 生命周期函数--监听页面初次渲染完成  
         */  
        onReady() {},  
        /**  
         * 生命周期函数--监听页面显示  
         */  
        onShow() {},  
        /**  
         * 生命周期函数--监听页面隐藏  
         */  
        onHide() {},  
        /**  
         * 生命周期函数--监听页面卸载  
         */  
        onUnload() {},  
        /**  
         * 页面相关事件处理函数--监听用户下拉动作  
         */  
        onPullDownRefresh() {},  
        /**  
         * 页面上拉触底事件的处理函数  
         */  
        onReachBottom() {},  
        /**  
         * 用户点击右上角分享  
         */  
        onShareAppMessage() {},  
        methods: {  
            webLoad() {  
                console.error(111)  
                uni.hideLoading()  
            },  
            webError(e) {  
                console.error(222)  
                uni.hideLoading()  
                uni.showToast({  
                    title: e && e.message ? e.message : "加载失败",  
                    icon: 'none'  
                });  
            },  
            callBack(callback, message) {  
                console.warn("callBack", callback, message)  
                const childrenWebviews = this.$scope.$getAppWebview().children()  
                const webviewInstance = childrenWebviews && childrenWebviews.length > 0 ? childrenWebviews[0] : undefined  
                if (webviewInstance && typeof webviewInstance.evalJS === 'function') {  
                    let code;  
                    if (message) {  
                        code = callback + '({ code: 1, message: ' + JSON.stringify(message) + ', data: {} })'  
                    } else {  
                        code = callback + '({ code: 0, message: "success", data: {} })'  
                    }  
                    console.warn("code", code)  
                    webviewInstance.evalJS(code)  
                }  
            },  
            openMiniProgram(e) {  
                const indexPayData = e.params  
                plus.share.getServices((res) => {  
                    let sweixin = null;  

                    for (let i in res) {  
                        if (res[i].id == 'weixin') {  
                            sweixin = res[i];  
                        }  
                    }  

                    //唤醒微信小程序  
                    if (sweixin) {  
                        sweixin.launchMiniProgram({  
                                id: indexPayData.mp_username, //注意是:小程序的原始ID  
                                path: indexPayData.mp_path,  
                                type: indexPayData.mp_version == 'release' ? 0 : indexPayData  
                                    .mp_version ==  
                                    'trial' ? '2' : '1' //0是正式环境  1测试版 2是体验版本  
                            },  
                            res => {  
                                console.warn(res)  
                                this.callBack(e.callback)  
                            },  
                            err => {  
                                console.error(err)  
                                // uni.showToast({  
                                //  title: err.message || "调起支付失败",  
                                //  icon: 'none'  
                                // });  
                                this.callBack(e.callback, err)  
                            });  
                    } else {  
                        // uni.showToast({  
                        //  title: '当前环境不支持微信操作!',  
                        //  icon: 'none'  
                        // });  
                        this.callBack(e.callback, "当前环境不支持微信操作!")  
                    }  
                });  
            },  
            openURL(e) {  
                const indexPayData = e.params  
                let payTimeout = setTimeout(() => {  
                    this.callBack(e.callback)  
                }, 500)  
                let errorCallBack = (err) => {  
                    // uni.showToast({  
                    //  title: err && err.message ? err.message : '操作失败',  
                    //  icon: 'none'  
                    // });  
                    clearTimeout(payTimeout)  
                    this.callBack(e.callback, err)  
                };  
                let platform = uni.getSystemInfoSync().platform;  
                if (platform == 'ios') {  
                    plus.runtime.launchApplication({  
                        action: indexPayData.url  
                    }, errorCallBack)  
                } else {  
                    plus.runtime.openURL(indexPayData.url, errorCallBack)  
                }  
            },  
            shareToWechat(e) {  
                const indexPayData = e.params  
                uni.share({  
                    provider: "weixin",  
                    scene: "WXSceneSession",  
                    type: 0,  
                    href: indexPayData.shareUrl,  
                    title: indexPayData.title,  
                    summary: indexPayData.description,  
                    imageUrl: indexPayData.imageUrl,  
                    success: () => {  
                        // uni.showToast({  
                        //  title: "分享成功!",  
                        //  icon: 'none'  
                        // })  
                        this.callBack(e.callback)  
                    },  
                    fail: (e) => {  
                        console.log("分享错误原因:" + JSON.stringify(e));  
                        // uni.showToast({  
                        //  title: "分享失败!",  
                        //  icon: 'none'  
                        // })  
                        this.callBack(e.callback, e)  
                    }  
                });  
                return  
            },  
            back(e) {  
                const indexPayData = e.params  
                if (indexPayData.pay_status == "FAILED") {  
                    uni.redirectTo({  
                        url: this.failUrl,  
                    })  
                    return  
                }  
                uni.redirectTo({  
                    url: this.successUrl  
                });  
                this.callBack(e.callback)  
            },  
            getpostMsg(e) {  
                console.warn(111, e)  
                if (e && e.detail && e.detail.data && e.detail.data.length > 0 && e.detail.data[0]) {  
                    const data = e.detail.data[0]  
                    if (data.method == "MicroPay.openWechatMiniProgram") {  
                        this.openMiniProgram(data)  
                    } else if (data.method == "MicroPay.openURL") {  
                        this.openURL(data)  
                    } else if (data.method == "MicroPay.shareToWechat") {  
                        this.shareToWechat(data)  
                    } else if (data.method == "MicroPay.onPayComplete") {  
                        this.back(data)  
                    }  
                } else {  
                    uni.showToast({  
                        title: "操作失败",  
                        icon: 'none'  
                    })  
                }  
            }  
        }  
    };  
</script>  

<style>  
</style>
58 分钟前 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

根据你提供的信息,问题表现为:同一个 uni-app 项目,在 2026-04-02 的打包版本中安卓和 iOS 都正常,但在 2026-05-11 的打包版本中,iOS 正常,安卓端 @message 无法收到消息,且期间未修改相关代码。这通常指向打包环境或运行时的差异,而不是你的代码逻辑问题。

结合知识库中的内容,这类问题很可能与 安卓端 WebView 的渲染引擎变化或 HBuilderX 版本引入的某些兼容性调整有关。虽然你提到代码未改,但打包工具链的更新可能会影响底层 webview 组件的消息通信机制。

排查与解决方案

针对安卓端 @message 失效,建议你按以下步骤逐一排查:

  1. 检查 uni.webview.js 的引入与版本

    • 确保 H5 页面正确引入了该 SDK:你的 web-view 加载的网页中,必须在 <script> 标签内引入 uni.webview.js 文件,并且要在 UniAppJSBridgeReady 事件触发后,再调用 uni.postMessage()。从你的代码看,App 端只是在接收消息,需要确认 H5 端的发送逻辑是否符合规范。
    • 尝试更新 uni.webview.js 版本:根据知识库对话记录,官方人员提到过 1.5.6 版本是较新的兼容版本。你可以检查 H5 页面引用的 SDK 版本,并尝试使用最新的官方版本。参考链接:uni.webview.1.5.4.js
  2. 在 H5 中确保事件就绪后发送消息
    根据知识库中关于 WebView 通信的常见问题,务必在 H5 的 UniAppJSBridgeReady 事件触发后再调用 uni.postMessage()。否则在安卓端可能因桥接未就绪而发送失败。

    <script>  
      document.addEventListener('UniAppJSBridgeReady', function() {  
        // 在此处或之后发送消息  
        uni.postMessage({  
          data: {  
            action: 'your_action'  
          }  
        });  
      });  
    </script>  

    本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

  3. 检查 HBuilderX 版本与打包环境

    • 你提到最新的打包版本是 2026-05-11,而官方在 2026-04-16 更新了 HBuilderX 正式版 5.07。如果你的打包机器使用的 HBuilderX 版本从旧版升级到了 5.07 或更高版本,可能引入了新的安卓 WebView 内核或渲染引擎,导致了兼容性问题。
    • 尝试回退 HBuilderX 版本:可以尝试使用与上次成功打包(2026-04-02)时相同或更早的 HBuilderX 版本(例如 4.85 左右)进行打包,验证是否是打包工具版本导致的问题。
  4. 检查 pages.json 中是否有 subNVues 配置
    知识库的 ISSUE 系统中有一个明确记录的问题:evalJS像网页发送消息无效。该问题指出,当页面配置了 subNVues 时,通过 evalJS 向 WebView 发送消息会无效,去掉 subNVues 后恢复正常。虽然你遇到的是 @message 接收消息失败,但这提示了 subNVues 可能会干扰 WebView 的通信机制。请检查你的页面配置文件中是否使用了 subNVues

  5. 尝试使用 @onPostMessage 作为替代监听
    在社区知识库的 uni组件之——webview与APP之间的通讯 一文中,有开发者提到,在某些情况下(特别是 nvue 页面),@message 只在页面后退等特定时机触发,而 @onPostMessage 可以实时接收消息。你可以尝试将模板中的 @message="getpostMsg" 替换或增加为 @onPostMessage="getpostMsg",看安卓端是否能接收到消息。

    <web-view :src="url" @message="getpostMsg" @onPostMessage="getpostMsg"></web-view>  

    本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

  6. 检查安卓的 WebView 调试日志
    使用 Chrome 浏览器的 chrome://inspect 功能,对安卓设备上的 WebView 进行远程调试。查看 H5 页面调用 uni.postMessage() 时,控制台是否有报错信息,这能直接定位是发送端的问题还是接收端的问题。

  7. 清理缓存和重新打包
    在尝试上述更改后,确保执行以下操作以排除缓存干扰:

    • 删除手机上的旧版 App。
    • 在 HBuilderX 中,清理项目缓存(菜单栏 -> 运行 -> 清理缓存)。
    • 重新制作自定义基座或进行云打包。

总结

这个问题大概率是打包环境变化引起的安卓端兼容性问题。你的代码本身没有问题,核心矛盾在于底层通信机制。你可以优先尝试 检查 H5 端 uni.webview.js 的版本和调用时机,并 尝试在 App 端同时监听 @message@onPostMessage 事件。如果无效,再深入排查 HBuilderX 版本和 pages.jsonsubNVues 的配置影响。

如果以上步骤仍无法解决,建议将你的 HBuilderX 具体版本、H5 页面发送消息的代码片段以及安卓系统版本提供出来,以便更精确地定位问题。

内容为 AI 生成,仅供参考
1***@qq.com

1***@qq.com (作者)

1、H5应该是没问题的,上个APP都能行,而且我这边调整不了
2、同时监听 @message 和 @onPostMessage 事件,调试模式也未收到消息
3、subNVues没找到相关配置
4、HBuilderX也回退版本了

还是没收到消息,我的代码只有onLoad的console.warn(123, options)打印了,@message="getpostMsg"的console.warn(111, e)没打印。

要回复问题请先登录注册