大明子
大明子
  • 发布:2019-11-15 10:30
  • 更新:2019-11-15 16:54
  • 阅读:2367

【有偿】关于uniapp端 webview回调问题

分类:uni-app

我这边用js创建了一个webview, 这个网址是别人的,我没办法修改。
于是用过预加载JS ,把JS成功的在webview中执行了。

//创建webview  
wv = plus.webview.create(self.url,"custom-webview",{  
    top:uni.getSystemInfoSync().statusBarHeight+44,  
});  
//预加载本地JS文件  
wv.appendJsFile('static/js/uni.webview.1.5.2.js');  
wv.appendJsFile('static/js/jsfun.js');  
wv.show();  
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象  
currentWebview.append(wv);

经测试,两个js都成功的在webview中加载了。
但是我想实现的功能是 让用户在webview中点击我的按钮,执行uniapp中的事件。

//这是jsfun 中的代码  

//给按钮添加点击事件  
i.addEventListener('click', function() {  
    //获取当前页面url  
    var url = location.href;  
    console.log('【前】::' + url);  
    //准备执行uniapp  
    document.addEventListener('UniAppJSBridgeReady', function() {  
        console.log('【中】::' + url);  

        uni.navigateTo({  
            url: 'play?url=' + encodeURIComponent(url)  
        });  

    });  
    //执行完毕  
    console.log('【后】::' + url);  
});


上面的代码,只会执行 【前】和【后】,UniAppJSBridgeReady放到点击事件外面,也无法打印。
请大佬帮我看看,是哪方面的问题。

===========================分割线===========================

翻了一天社区文档和问答, 现在确定问题是 注入js的时间点有问题。
问题依旧, 继续查文档,有大佬知道怎么实现,拜托指点下

===========================补充demo===========================

2019-11-15 10:30 负责人:无 分享
已邀请:
大明子

大明子 (作者)

顶,在线等大佬

大明子

大明子 (作者)

顶,在线等大佬

大明子

大明子 (作者)

顶,在线等大佬

大明子

大明子 (作者)

顶,在线等大佬

大明子

大明子 (作者)

顶,在线等大佬

DCloud_UNI_HT

DCloud_UNI_HT

上传一个可运行的简单 demo 模拟你的场景。

  • 大明子 (作者)

    Demo已经补充,感谢大佬

    2019-11-15 14:49

DCloud_UNI_HT

DCloud_UNI_HT

webview.vue 按如下改一下,看看行不行

<template>  
    <view>  

    </view>  
</template>  

<script>  
    var wv; //计划创建的webview  
    export default {  
        data() {  
            return {  
                url: '',  
            }  
        },  
        onLoad(option) {  
            var self = this;  
            self.url = option.url;  

            // #ifdef APP-PLUS  
            //创建webview  
            wv = plus.webview.create(self.url, "custom-webview", {  
                top: uni.getSystemInfoSync().statusBarHeight + 44,  
            });  
            //预加载本地文件  
            wv.appendJsFile('static/js/uni.webview.1.5.2.js');  
            // wv.appendJsFile('static/js/jsfun.js');  
            wv.show();  
            var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象  
            currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭  

            // setTimeout(function() {  
                wv.addEventListener('loaded', function() {  
                    var wvurl = wv.getURL();  
                    console.log(wvurl + '加载完毕!!!!');  
                    var webview = plus.webview.getWebviewById("custom-webview");  
                    webview.evalJS(  
                        `document.addEventListener('UniAppJSBridgeReady', function() {  
                            console.log('jsfun加载前');  

                            var i = document.getElementsByClassName('cover-logo')[0];  
                            if (typeof(i) != 'undefined') {  
                                i.style.height = '60px';  
                                i.style.color = '#fff';  
                                i.style.lineHeight = '15';  
                                i.style.position = 'static';  
                                i.style.paddingTop = '0%';  
                                i.style.background = '#000000';  
                                i.style.textAlign = 'center';  
                                i.innerHTML =  
                                    '<div><img src=\"https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg\" width=\"100%\" height=\"50%\"></div>';  
                                plus.nativeUI.toast('更换logo,点击logo 应该调用uniapp!');  

                                //给按钮添加点击事件  
                                i.addEventListener('tap', function() {  
                                    //获取当前页面url  
                                    var url = location.href;  
                                    console.log('前::' + url);  
                                    //准备执行uniapp  
                                        console.log('中::' + url);  
                                        uni.navigateTo({  
                                            url: '/pages/index/home?url=' + encodeURIComponent(url)  
                                        });  
                                    //执行完毕  
                                    console.log('后::' + url);  
                                });  
                            };  
                            console.log('jsfun加载后');  
                        });`  
                    )  
                }, false);  

            // }, 1000); //如果是首页的onload调用时需要延时一下,二级页面无需延时,可直接获取  
            // #endif  
        },  
    }  
</script>  

<style>  
</style>  
大明子

大明子 (作者)

大佬看到 试一下我的demo

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