uni-app plus.webview.create创建网页后，网页中uni.postMessage会触发报错

uni-app plus.webview.create创建网页后，网页中uni.postMessage会触发报错

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：3.98
手机系统：Android
手机系统版本号：Android 9.0
手机厂商：模拟器
手机机型：雷电模拟器
页面类型：vue
vue版本：vue3
打包方式：离线
项目创建方式：HBuilderX

示例代码：

// uniapp项目代码

<template>
    <view>
        <button @click="createWebview()">create webview</button>
    </view>
</template>

<script>
export default {
    methods: {
        createWebview() {
            plus.webview.create('http://10.22.1.0:5500/test.html', 'test2')
        }
    }
}
</script>

// 网页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}function a(){return window.__uniapp_x_postMessage||window.__uniapp_x_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(a()){if("postMessage"===e){var r={data:n};return window.__uniapp_x_postMessage?window.__uniapp_x_postMessage(r):window.__uniapp_x_.postMessage(JSON.stringify(r))}var d={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__uniapp_x_postMessage?window.__uniapp_x_postMessageToService(d):window.__uniapp_x_.postMessageToService(JSON.stringify(d))}else if(o()){if("postMessage"===e){var s={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(s):window.__dcloud_weex_.postMessage(JSON.stringify(s))}var w={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(w):window.__dcloud_weex_.postMessageToService(JSON.stringify(w))}else{if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var u=plus.webview.currentWebview();if(!u)throw new Error("plus.webview.currentWebview() is undefined");var g=u.parent(),v="";v=g?g.id:u.id,t.push(v)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var c=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(c,",").concat(JSON.stringify(t),");"))}}},d={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){a()?e({uvue:!0}):o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},s=/uni-app/i.test(navigator.userAgent),w=/Html5Plus/i.test(navigator.userAgent),u=/complete|loaded|interactive/;var g=window.my&&navigator.userAgent.indexOf(["t","n","e","i","l","C","y","a","p","i","l","A"].reverse().join(""))>-1;var v=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var _=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var m=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var E=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var x=window.xhs&&window.xhs.miniProgram&&/xhsminiapp/i.test(navigator.userAgent);for(var S,h=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},y=[function(e){if(s||w)return window.__uniapp_x_postMessage||window.__uniapp_x_||window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&u.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),d},function(e){if(_)

更多关于uni-app plus.webview.create创建网页后，网页中uni.postMessage会触发报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这个问题解决了吗，我也遇到这个问题。。。

更多关于uni-app plus.webview.create创建网页后，网页中uni.postMessage会触发报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


网页中怎么引入uni那个sdk的

解决了吗

在 uni-app 中使用 plus.webview.create 创建网页后，如果在网页中使用 uni.postMessage 触发报错，可能是由于以下几个原因导致的：

1. uni.postMessage 的上下文问题

uni.postMessage 是 uni-app 提供的一个用于向原生页面发送消息的 API。它通常用于在 H5 页面与 uni-app 原生页面之间进行通信。如果你在通过 plus.webview.create 创建的网页中使用 uni.postMessage，可能会因为上下文不正确而导致报错。

解决方法：

  • 确保你在 uni-app 的 H5 页面中使用 uni.postMessage，而不是在通过 plus.webview.create 创建的外部网页中使用。
  • 如果你确实需要在外部网页中与 uni-app 进行通信，可以考虑使用 WebView 的 evalJS 方法或者通过 URL Scheme 进行通信。

2. uni.postMessage 的兼容性问题

uni.postMessage 是 uni-app 提供的 API，它依赖于 uni-app 的运行环境。如果你在通过 plus.webview.create 创建的网页中使用 uni.postMessage，可能会因为该网页没有运行在 uni-app 的环境中而导致报错。

解决方法：

  • 如果你需要在外部网页中与 uni-app 进行通信，可以考虑使用 WebView 的 evalJS 方法或者通过 URL Scheme 进行通信。

3. uni.postMessage 的使用方式错误

uni.postMessage 的使用方式可能不正确，导致报错。uni.postMessage 通常用于在 H5 页面中向原生页面发送消息，而不是在外部网页中使用。

解决方法：

  • 确保你在 uni-app 的 H5 页面中使用 uni.postMessage，并且按照正确的语法使用。

4. plus.webview.create 创建的网页与 uni-app 的通信问题

如果你确实需要在通过 plus.webview.create 创建的网页中与 uni-app 进行通信，可以考虑使用 WebView 的 evalJS 方法或者通过 URL Scheme 进行通信。

解决方法：

  • 使用 WebView 的 evalJS 方法：
    var wv = plus.webview.create('https://example.com');
wv.evalJS("window.postMessage('message', '*');");
  • 使用 URL Scheme 进行通信：
    var wv = plus.webview.create('https://example.com');
wv.addEventListener('loaded', function() {
    wv.evalJS("window.location.href = 'uniwebview://message';");
});
回到顶部