web-view加载本地html无法触发uniAppJSBridgeReady监听事件

分类：uni-app

uniapp

编译器版本：2.2.2，
当前项目编译模式：自定义组件模式
nvue编译模式：uni-app

===================================
我只是把模板工程里面的web-view和对应的local.html移植到我自己的工程里面，就出现uniAppJSBridgeReady监听事件无法触发，只有plusready事件触发。

**uni.webview.1.5.1.js加载是成功的。

=================================
与模板工程唯一的区别就是我的是vue页面调用uni.navigateTo({url:'page/webview/web-view'})进入的,而模板工程是在components.nvue调用进入的而已。

2019-09-19 20:15 负责人:无分享

2 个回复

DCloud_uniCloud_WYQ

我看一下你html页面里面的代码

小明子 (作者)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>pro本地网页</title>

<style type="text/css">

.btn {

display: block;

margin: 20px auto;

padding: 5px;

background-color: #007aff;

border: 0;

color: #ffffff;

height: 40px;

width: 200px;

}

        .btn-red {  

            background-color: #dd524d;  

        }  



        .btn-yellow {  

            background-color: #f0ad4e;  

        }  



        .desc {  

            padding: 10px;  

            color: #999999;  

        }  

    </style>  

</head>  

<body>  

    <p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>  

    <div class="btn-list">  

        <button class="btn" type="button" data-action="navigateTo">navigateTo</button>  

        <button class="btn" type="button" data-action="redirectTo">redirectTo</button>  

        <button class="btn" type="button" data-action="navigateBack">navigateBack</button>  

        <button class="btn" type="button" data-action="reLaunch">reLaunch</button>  

        <button class="btn" type="button" data-action="switchTab">switchTab</button>  

    </div>  

    <p class="desc">网页向应用发送消息，应用会在此页面后退时接收到消息。</p>  

    <div class="btn-list">  

        <button class="btn btn-red" type="button" id="postMessage">postMessage</button>  

        <button class="btn" type="button" id="loadUrl">加载local.1.html</button>  

    </div>  

    <!-- uni 的 SDK -->  

    <!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script> -->  

    <script src="./uni.webview.1.5.1.js" type="text/javascript" charset="utf-8"></script>  

    <script type="text/javascript">  

        //默认支持  

        document.addEventListener('plusready',function(){  

            console.log("======plus ready==========");  

        })  



        var UniAppJSBridgeFunc = function() {  

            document.querySelector('.btn-list').addEventListener('click', function(evt) {  

                var target = evt.target;  

                if (target.tagName === 'BUTTON') {  

                    var action = target.getAttribute('data-action');  

                    switch (action) {  

                        case 'switchTab':  

                            uni.switchTab({  

                                url: '/pages/home/home'  

                            });  

                            break;  

                        case 'reLaunch':  

                            uni.reLaunch({  

                                url: '/pages/home/home'  

                            });  

                            break;  

                        case 'navigateBack':  

                            uni.navigateBack({  

                                delta: 1  

                            });  

                            break;  

                        default:  

                            uni[action]({  

                                url: '/pages/my-components/web-view?url=/hybrid/html/local.1.html'  

                            });  

                            break;  

                    }  

                }  

            });  

            document.querySelector("#postMessage").addEventListener('click', function() {  

                uni.postMessage({  

                    data: {  

                        action: 'message'  

                    }  

                });  

            })  



            document.querySelector("#loadUrl").addEventListener('click', function() {  

                console.log("=============");  

                // #ifdef APP-PLUS  

                /* plus.webview.currentWebview().setStyle({  

                    titleNView:{  

                        progress:{  

                            color:"#007AFF",  

                            height:'2px'  

                        },  

                        autoBackButton:true  

                    }  

                }) */  

                //plus.webview.currentWebview().loadURL('_www/hybrid/html/local.1.html');  

                //plus.webview.currentWebview().setJsFile('_www/app-service.js');  

                //plus.webview.currentWebview().setJsFile('_www/app-view.js');  

                //plus.webview.currentWebview().setJsFile('_www/pages/public/network.js');  

                //plus.webview.currentWebview().loadURL('_www/__uniappview.html');  



                // #endif  

                // #ifdef H5  

                //location.href = 'local.1.html';  

                // #endif  

            })  

        }  



        document.addEventListener('UniAppJSBridgeReady', function () {   

                console.log("======UniAppJSBridgeReady=======");  

                UniAppJSBridgeFunc();  

        });    



    </script>  

</body>

</html>

2019-09-24 09:12

DCloud_uniCloud_WYQ

回复小明子: 我这还是没能复现，升级一下HBuilderX看还有这问题吗，如果还有可以把代码打包发上来

2019-09-24 10:59
小明子 (作者)

回复 DCloud_uniCloud_WYQ: 刚才我自己解决了。解决办法如下：if (window.UniAppJSBridge) {

console.log("======UniAppJSBridgeReady=======");

UniAppJSBridgeFunc();

} else {

document.addEventListener('UniAppJSBridgeReady', function () {

console.log("======UniAppJSBridgeReady=======");

UniAppJSBridgeFunc();

});

}

2019-09-24 11:05
小明子 (作者)

回复 DCloud_uniCloud_WYQ: 大神，问你一个其他问题，App.vue中如何调用UI组件？我想在App.vue的onLaunch中弹出一个自定义的popup层，进行App公告提醒或者App更新提示。给一点思路，谢谢

2019-09-24 11:11
小明子 (作者)

回复 DCloud_uniCloud_WYQ: 说白了，我不想用uni.showModal做弹出层，想做一个统一样式的自定义弹出层，想问问怎么实现？

2019-09-24 11:25
DCloud_uniCloud_WYQ

回复小明子: 你试试plus.webview.create弄个本地网页进去看行不行，为什么一定要在App.vue的onLaunch里面做呢，放到首页的onLoad里面不也差不多吗

2019-09-24 13:21
小明子 (作者)

回复 DCloud_uniCloud_WYQ: 因为App.vue的onLaunch只执行一次。

uniapp怎么设置当前页面为透明？this.$mp.page.$getAppWebview().setStyle({

background:"transparent"

})

不生效。

2019-09-24 17:25

DCloud_uniCloud_WYQ

回复小明子:

let pages = getCurrentPages()  

pages[pages.length - 1].$getAppWebview().setStyle({  

    background: 'transparent'  

})

2019-09-24 18:42

DCloud_uniCloud_WYQ

回复 DCloud_uniCloud_WYQ: 回复小明子: 你的这种写法我试了也可以透明，是不是有效果，只是你页面里面还有背景的导致透明效果看不出来

2019-09-24 18:46
小明子 (作者)

回复 DCloud_uniCloud_WYQ: 恩。OK了，还需要设置一下 page的样式为透明的才生效。谢谢哈。

2019-09-25 15:08
2***@qq.com

回复小明子: 大佬你的vue的页面代码呢，能看看不

2021-03-24 15:18

kalin

我在vue页面中，通过onLoad创建的webview:代码如下
// #ifdef APP-PLUS
wv = plus.webview.create("html地址","custom-webview",{
plusrequire:"none",
'uni-app': 'none',
top:uni.getSystemInfoSync().statusBarHeight+44,
height:'380px'
})
var currentWebview = this.$scope.$getAppWebview();
currentWebview.append(wv);
setTimeout(function() {
console.log(wv.getStyle())
}, 1000);
// #endif

在html页面中，
<script type="text/javascript">
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
});

</script>

在html页面中document.addEventListener('UniAppJSBridgeReady', function() { }监听不到，有没有办法解决哦，

该问题目前已经被锁定, 无法添加新回复

web-view加载本地html无法触发uniAppJSBridgeReady监听事件

与内容相关的链接

2 个回复

公告

相关问题